Cara Membuat Syntax Highlighter di Blog

Banyak orang yang nanya, gimana sih? kok bisa gitu? Tentu kalian sering berkunjung ke blog2 yang menyediakan tutorial Blogger. Mereka kebanyakan menggunakan kotak seperti ini. Karena saya penasaran, akhirnya ketemujuga.

Begini nih cara buatnya.
Pertama masuk ke Blogger -> Template -> Edit HTML 
Salin CSS di bawah lalu simpan di bawah <style> atau di bawah <b:skin>

/* CSS Prism Syntax Highlighter */

pre {
 padding:35px 10px 0px;
 margin:.5em 0;
 white-space:pre;
 word-wrap:break-word;
 overflow:auto;
 background-color:#222;
 position:relative;
 max-height:500px;
}
pre::before {
 font-size:14px;
 content:attr(title);
 position:absolute;
 top:0;
 background-color:transparent;
 padding:6px 10px 6px 10px;
 left:0;
 right:0;
 color:#fff;
 display:block;
 margin:0 0 15px 0;
 font-weight:400;
 box-shadow:0 1px 3px rgba(0,0,0,0.1);
}
pre::after {
    content: 'Klik dua kali untuk menyeleksi';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 6px;
    top: 6px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}
pre:hover::after {
 opacity:0;
 top:-8px;
 visibility:visible;
}
code {
 font-family:Verdana,Geneva,sans-serif;
 line-height:16px;
 color:#88a9ad;
 background-color:transparent;
 padding:1px 2px;
 font-size:12px;
}
pre code {
 display:block;
 background:none;
 border:none;
 color:#94b7bb;
 direction:ltr;
 text-align:left;
 word-spacing:normal;
 padding:10px;
 font-weight:none;
}
code .token.punctuation {
 color:#ba3a3e;
}
pre code .token.punctuation {
 color:#777;
}
code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
 color:#666;
}
code .namespace {
 opacity:.8;
}
code .token.property,code .token.tag,code .token.boolean,code .token.number {
 color:#d75046;
}
code .token.selector,code .token.attr-name,code .token.string {
 color:#88a9ad;
}
pre code .token.selector,pre code .token.attr-name {
 color:#00a1d6;
}
pre code .token.string {
 color:#6fb401;
}
code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
 color:#5ac954;
}
code .token.operator {
 color:#1887dd;
}
code .token.atrule,code .token.attr-value {
 color:#009999;
}
pre code .token.atrule,pre code .token.attr-value {
 color:#1baeb0;
}
code .token.keyword {
 color:#e13200;
 font-style:italic;
}
code .token.comment {
 font-style:italic;
}
code .token.regex {
 color:#ccc;
}
code .token.important {
 font-weight:none;
}
code .token.entity {
 cursor:help;
}
pre mark {
 background-color:#ea4f4e!important;
 color:#fff!important;
 padding:2px;
 border-radius:2px;
}
code mark {
 background-color:#ea4f4e!important;
 color:#fff!important;
 padding:2px;
 border-radius:2px;
}
pre code mark {
 background-color:#ea4f4e!important;
 color:#fff!important;
 padding:2px;
 border-radius:2px;
}
.comments pre {
 padding:10px 10px 15px 10px;
 background:#494158;
}
.comments pre::before {
 content:'Code';
 font-size:0px;
 position:relative;
 top:0;
 background-color:#5a9ad2;
 padding:1px 6px;
 left:0;
 right:0;
 color:#fff;
 text-transform:uppercase;
 display:inline-block;
 margin:0 0 10px 0;
 font-weight:400;
 border:none;
}
.comments pre::after {
 font-size:0px;
}
.comments pre code {
 color:#94b7bb;
}
.comments pre.line-numbers {
 padding-left:10px;
}
pre.line-numbers {
 position:relative;
 padding-left:3.0em;
 counter-reset:linenumber;
}
pre.line-numbers > code {
 position:relative;
}
.line-numbers .line-numbers-rows {
 height:100%;
 position:absolute;
 top:1px;
 font-size:100%;
 left:-3.5em;
 width:3.5em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;
 padding:10px 0 0 0;
 background:#2A2A2A;
 border-right:1px solid #3A3A3A;
}
.line-numbers-rows > span {
 display:block;
 counter-increment:linenumber;
}
.line-numbers-rows > span:before {
 content:counter(linenumber);
 color:#A3A49A;
 display:block;
 padding-right:0.8em;
 text-align:right;
 transition:350ms;
}
pre[data-codetype="CSSku"]:before {
 background-color:#2c9bdc;
}
pre[data-codetype="HTMLku"]:before {
 background-color:#f56954;
}
pre[data-codetype="JavaScriptku"]:before {
 background-color:#ee9537;
}
pre[data-codetype="JQueryku"]:before {
 background-color:#00c0ef;
}

Kalo sudah. Simpan kode-kode di bawah ini. Mau di atas </body> atau di atas </head> (Saran saya sih di atas </head> agar cepat terbaca saat loading)

<script src='https://librasbr.googlecode.com/svn/prism.js' type='text/javascript'/>

<script>
$(&#39;pre&#39;).attr(&#39;class&#39;, &#39;line-numbers&#39;);
Prism.hooks.add(&quot;after-highlight&quot;,function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf(&quot;line-numbers&quot;)===-1){return}var n=1+e.code.split(&quot;\n&quot;).length;var r;lines=new Array(n);lines=lines.join(&quot;<span/>&quot;);r=document.createElement(&quot;span&quot;);r.className=&quot;line-numbers-rows&quot;;r.innerHTML=lines;if(t.hasAttribute(&quot;data-start&quot;)){t.style.counterReset=&quot;linenumber &quot;+(parseInt(t.getAttribute(&quot;data-start&quot;),10)-1)}e.element.appendChild(r)})
</script>

<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script> 

Simpan Template

Kalo kamu ingin menggunakan Kotak pre tersebut pada Postingan kamu. Gunakan kode pemanggil di bawah ini, sesuai dengan Kegunaannya

<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... kode CSS di sini ... </code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre>

Update

Untuk yang tidak ada nomor disamping tag [pre] silakan untuk mengulang proses diatas dengan Javascript dan CSS yang baru. Jika masih belum ada nomor, anda kurang tamfan!. :v