Membuat Syntax Highlighter dengan Languange Autodetection

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.

Mungkin kamu sudah mencari-cari tutor seperti ini di Google dan ternyata hasilnya tidak sekeren yang kamu fikirkan. Untuk itu inilah kesempatan saya untuk memberikan 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.

Berikut cara pemasangannya.

Langkah pertama letakkan kode CSS ini ke dalam template kamu dan letakkan tepat diatas kode </style> yang pertama atau jika tidak ada cari kode seperti ini ]]></b:skin> dan langsung letakkan diatasnya.

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
}

Langkah kedua yaitu masih tetap di dalam mod pengeditan template kamu. Cari kode ini </body> lalu letakkan script ini tepat diatasnya.

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

Sudah selesai. Klik save/simpan template kamu.

Selanjutnya ini adalah yang terpenting untuk memunculkan kode-kode tersebut. Ada lima bahasa pengkodean yang sudah saya bagikan 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 cukup mudah 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>

Terimakasih kepada +riefand riefund yang sudah membagikan tutorial ini.