Cara Membuat Syntax Highlighter di Blog

 

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;
} 

Abis CCS, letakkan JavaScript nya 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> 

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>