Syntax Highlighter Languange Autodetection blog

Membuat Syntax highlighter adalah salah satu hal yang sangat penting bagi blogger. Apalagi jika niche blog kamu adalah tutorial blog yang pastinya banyak sekali memasukkan kode-kode css, javascript, html, maupun jquery.

Kode syntax highlighter ini dengan beberapa kelebihan diantaranya : warna yang padu, script yang saya bagikan ini sudah dilengkapi dengan double klik untuk mempermudah dalam pengcopyannya.

Letakkan kode berikut diatas kode ]]></b:skin> 

 
pre, i[rel="pre"] {
display:block;
font-style:normal;
font-size:12px;
line-height:18px;
background-color:#0d0e0f;
color:#8e9081 !important;
padding:10px 12px;
border-left:4px solid #555555;
white-space:pre;
word-wrap:normal;
overflow:auto
}
pre[data-codetype="CSS"] {
border-left-color:#7B990C
}
pre[data-codetype="HTML"] {
border-left-color:#0B7E88
}
pre[data-codetype="JavaScript"] , pre[data-codetype="Javascript"] {
border-left-color:#40627E
}
pre[data-codetype="JQuery"] {
border-left-color:#40627E
}
pre[data-codetype="JQuery UI"] {
border-left-color:#40627E
}
pre[data-codetype="XML"] {
border-left-color:#E55E48
}
pre code {
color:inherit !important;
font-weight:normal;
display:block
}
pre.numbered {
border-left-width:4px
}
pre.numbered[data-codetype]:before {
content:attr(data-codetype);
display:block;
margin:-10px -12px 10px;
padding:5px 10px;
font-family:'Open Sans', "Segoe UI", Arial, Tahoma, sans-serif;
text-transform:uppercase;
background-color:#40627e;
color:white
}
pre.numbered[data-codetype="CSS"]:before {
background-color:#7B990C
}
pre.numbered[data-codetype="HTML"]:before {
background-color:#0B7E88
}
pre.numbered[data-codetype="JavaScript"]:before {
background-color:#40627E
}
pre.numbered[data-codetype="JQuery"]:before {
background-color:#40627E
}
pre.numbered[data-codetype="JQuery UI"]:before {
background-color:#40627E
}
pre.numbered[data-codetype="XML"]:before {
background-color:#E55E48
}
pre.numbered[data-codetype*="+"]:before {
content:"Kode";
background-color:#555;
}
code, pre, i[rel="code"], i[rel="pre"] {
font-style: normal;
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;
color:#805bc0
}
pre .branch-link {
border-bottom:1px dotted;
text-decoration:none !important
}
pre .comment, pre .template_comment, pre .diff .header, pre .lisp .string, pre .javadoc {
color:#93a1a1;
font-style:italic
}
pre .doctype {
color:#df7c51
}
pre .keyword, pre .css .rule .keyword, pre .winutils, pre .javascript .title, pre .method, pre .addition, pre .css .tag, pre .lisp .title {
color:#0264BE
}
pre .css .class {
color:#a7aa9b
}
pre .number, pre .command, pre .string, pre .phpdoc, pre .tex .formula, pre .regexp, pre .hexcolor {
color:#628998
}
pre .title, pre .localvars, pre .function .title, pre .chunk, pre .decorator, pre .builtin, pre .built_in, pre .lisp .title, pre .identifier, pre .title .keymethods, pre .id {
color:#86aade
}
pre .tag .title, pre .rules .property, pre .django .tag .keyword {
font-weight:bold
}
pre .attribute, pre .variable, pre .instancevar, pre .lisp .body, pre .smalltalk .number, pre .constant, pre .class .title, pre .parent, pre .haskell .label {
color:#a59355
}
pre .preprocessor, pre .pi, pre .shebang, pre .symbol, pre .diff .change, pre .special, pre .keymethods, pre .important, pre .subst, pre .cdata {
color:#b25a5a
}
pre .tag .value, pre .attr_selector, pre .javascript .literal {
color:#bfbf90
}
pre .deletion {
color:#dc322f
}
pre .tex .formula {
background:#eee8d5
}
pre .tag {
color:#a0a28b
}
pre.numbered .line-number {
display:block;
float:left;
text-align:right;
margin:-10px 12px -10px -12px;
padding:10px 12px;
background-color:#141414
}
pre.numbered .line-number span {
display:block;
position:relative;
color:#818181;
}
pre.numbered .line-number em {
font:inherit;
position:absolute;
top:-5px;
left:100%;
margin-left:15px;
background-color:#fc391e;
border-color:transparent;
color:#fff;
line-height:1;
padding:4px 5px;
display:none
}
pre.numbered .line-number em:before {
content:"";
display:block;
width:0;
height:0;
border:4px solid transparent;
border-right-color:inherit;
border-bottom-color:inherit;
position:absolute;
top:50%;
right:100%;
margin-top:-4px
}
pre.numbered .line-number span:hover em, pre.numbered .line-number span:target em {
display:block
}
pre.numbered .line-number span:target {
font-weight:bold;
background-color:#40464b;
margin:0 -12px;
padding:0 12px
}
pre.numbered .line-number span:target a {
color:#8e9081
}
pre.numbered:hover .line-number span:target em {
display:none
}

Letakkan script dibawah ini tepat diatas </body>

<script src='https://kode-syntax-highlighter.googlecode.com/svn/syntax'></script>  

Selesai.

Klik save template.

Selanjutnya, untuk memunculkan kode-kode tersebut. Ada lima bahasa kode yang sudah dibagikan diatas yaitu :


CSS data-codetype="CSS" , code class="CSS"
Java Script data-codetype="JavaScript" , code class="Javascript"
HTML data-codetype="HTML" , code class="HTML"
XML data-codetype="XML" , code class="XML"
JQuery data-codetype="JQuery" , code class="JQuery"

Cara pemasangannya  silahkan ikuti tata cara dalam pengkodeannya sesuai dengan bahasa pengkodeannya seperti yang tertera dibawah ini.

<pre class="numbered" data-codetype="JavaScript"><code class="Javascript"> 

... kode Javascript di sini ... </code></pre>

 <pre class="numbered" data-codetype="CSS"><code class="CSS"> 

... kode CSS di sini ... </code></pre> 

<pre class="numbered" data-codetype="HTML"><code class="HTML"> 

... kode HTML di sini ... </code></pre> 

<pre class="numbered" data-codetype="JQuery"><code class="JQuery"> 

... kode JQuery di sini ... </code></pre> 

<pre class="numbered" data-codetype="XML"><code class="XML"> 

... kode XML di sini ... </code></pre> 

<pre class="numbered" data-codetype="JQuery Ui"><code class="JQuery Ui"> 

... kode JQuery Ui di sini ... 

</code></pre>