Syntax Highlight

Syntax Highlight- Hai sobat sekalian saya kali ini mempunyai tutorial yaitu ''Syntax Highlight'' pengertiannya nanti saya terangin,tapi sekarang saya kasih tau dari mana saya dan kok saya bisa menyukai ini,saya sangat menyukai ini setelah blockquote,eh rupanya saya bru tw ada jg yg bernama ''Pre'' Pre itu sama kayak blockquote,pengertiannya silahkan cari di google,saya tau Tag Pre dari BlogKangismet, ada perbedaan blockquote dan Tag Pre.


DEMO SyntaxHighlighter 

Syntax Highlight [1]adalah fitur pada teks editor yang menampilkan atau menyoroti teks-terutama source code-dalam berbagai warna dan font sesuai dengan kategori istilah. Dengan menggunakan SyntaxHighlighter memudahkan dalam menulis source code atau bahasa terstruktur seperti bahasa pemrograman (programming language) atau bahasa markup (markup language). Implementasi dari syntax higlighter pada halaman website, blog atau forum online sering digunakan sebagai kode prensentasi pada contoh code source ( seperti Javascript, HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Java, SQL, Apache, Haskell, Erlang, Ruby, C++, Objective C dan masih banyak bahasa program lainnya.) yang ingin ditampilkan.[2].

oke langsung saja tutorialnya,,

Install Syntax Highlight (Box Code)

Nah kita install dlu script Syntax Highlight

letakkan code d bawah ini di atas code </head> atau </body>,oke?

<script src="https://problogizjs.googlecode.com/files/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

tapi belum siap,oke lanjut d step selanjutnya

Install Program CSS

Kalau code CSS ini letak saja di atas code ]]></b:skin> atau </style> ,oke?

/* Syntax Highlghter----------------------------------------------- */

pre,i[rel="pre"] {

padding:.8em 1em;
margin:0;
background-color:#2f3741;
border-left:4px solid #40627E;
font-size:13px;
color:#839496;
font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;
line-height:1.4em;
position:relative;
white-space: pre;
word-wrap: normal;
white-space:pre;
overflow:auto
}
pre.line-number {
background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_3h-DZRFQM4uIDYZiBX9L8bvjA8qeBzexkB7Xo5fa7Uxq4uNM9nUurG2y4ESq7UNi-RUavoG2oDRxQCupXIL01d1nT_E-DMnNdZPbhYdz4v30oRqFTqsGeKkXUk5uFys1EBcgfGBRaoU/s1600/new-line-number.png)no-repeat top left;
padding-left:54px;
border-left:none;
}
  pre.line-number:after{
    content:"";
    width:35px;
    height:8px;
    background-color:#39424e;
    bottom:0;
    left:0;
    position:absolute;
  }
pre[data-codetype="CSS"]{border-left-color:#5fbbba}
pre[data-codetype="HTML"]{border-left-color:#4fc1eb}
pre[data-codetype="JavaScript"]{border-left-color:#ff6c60}
pre[data-codetype="JQuery"]{border-left-color:#99c262}
pre.line-number[data-codetype]:before {
content:attr(data-codetype);
display:block;
margin:-11px -13px 10px -54px;
padding:8px 12px;
font-family:Oswald,Arial,Sans-serif;
font-size:14px;
text-transform:uppercase;
background-color:#41749f;
color:white
}
pre.line-number[data-codetype="CSS"]:before{background-color:#a9d86e}
pre.line-number[data-codetype="HTML"]:before{background-color:#4fc1eb}
pre.line-number[data-codetype="JavaScript"]:before{background-color:#ff6c60}
pre.line-number[data-codetype="JQuery"]:before{background-color:#99c262}
code {
font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;
font-size:13px;
color: #d14;
}
#comments code {
 color:#bbbb6d;
}
#comments pre {
    margin-bottom:-15px;
}
pre code {
padding:0 !important;
color: #a3a49a;
background: none !important;
border:none !important;
display:block;
}
pre mark {background-color:#1a5752;color:#a3a483}
pre .line-number {
  float:left;
  margin:0 1em 0 -1em;
  color:#61686d;
  background-color:#39424e;
  text-align:right;
  min-width:2.5em;
    padding-right:4px;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {
color: #586e75;
font-style: italic;
}
pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {
color: #859900;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .rules .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
color: #7195a3;
}
pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl .literal,
pre .id,
pre .css .function {
color: #569dcf;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
color: #aa985a;
}
pre .preprocessor,
pre .preprocessor .keyword,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata,
pre .clojure .title,
pre .css .pseudo {
color: #509a55;
}
pre .deletion {
color: #dc322f;
}
pre .tex .formula {
background: #073642;
}

simpan template

jika ah lanjut ke step selanjutnya,,          

Install Program HTML

agar codenya berjalan di postingan silahkan Salin Code d bawah ini

<pre><code>Text/Code2</code></pre>

ubah Text/code2 dengan text anda atau code.

nah selesai deh ,semoga bermanfaat.

Posted by Blog Billy Wadu on Saturday - Rating: 4.5

Title : Syntax Highlight
Description : Syntax Highlight - Hai sobat sekalian saya kali ini mempunyai tutorial yaitu ''Syntax Highlight'' pengertiannya nanti saya...

Share to

Facebook Google+ Twitter