Cara Membuat Syntax Highlighter BerWarna

Assalamualaikum.
kali ini saya akan kongsikan cara membuat syntax highlighter full color atau berwarna terbaru, seperti yang saya gunakan di dalam blog ini.

Buka Dashboard Blogger > Tema > Edit HTML. Cari kode </head>  lalu letakkan kode CSS berikut ini tepat diatasnya.

/* Highlighter */
.post-body code{padding:1.2em}
.post-body .hljs{display:block;overflow-x:auto;padding:1.2em;background:#2b2b2c;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:3px}
.post-body .hljs-name,.post-body .hljs-strong{font-weight:bold}
.post-body .hljs-code,.post-body .hljs-emphasis{font-style:italic}
.post-body .hljs-tag{color:#62c8f3}
.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-class{color:#ade5fc}
.post-body .hljs-string,.post-body .hljs-bullet{color:#a2fca2}
.post-body .hljs-type,.post-body .hljs-title,.post-body .hljs-section,.post-body .hljs-attribute,.post-body .hljs-quote,.post-body .hljs-built_in,.post-body .hljs-builtin-name{color:#ffa}
.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bullet{color:#d36363}
.post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literal{color:#fcc28c}
.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-code{color:#888}
.post-body .hljs-regexp,.post-body .hljs-link{color:#c6b4f0}
.post-body .hljs-meta{color:#fc9b9b}.post-body .hljs-deletion{background-color:#fc9b9b;color:#333}
.post-body .hljs-addition{background-color:#a2fca2;color:#333}
.post-body .hljs a{color:inherit}
.post-body .hljs a:focus,.post-body .hljs a:hover{color:inherit;text-decoration:underline}
mark .post-body .hljs-attr,mark .post-body .hljs-string,mark .post-body .hljs-bullet{background-color:#e67e22;color:#fff}
.post-body .hljs mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}
.BLOG_mobile_video_class{display:none!important}.post-body .hljs mark span.hljs-number,.post-body .hljs mark span.hljs-comment,.post-body .hljs mark span.hljs-symbol,.post-body .hljs mark span.hljs-string,.post-body .hljs mark span.hljs-attr,.post-body .hljs mark span.hljs-keyword,.post-body .hljs mark span.hljs-name,.post-body .hljs mark span.hljs-tag{color:#fff;margin:.15rem 0}

Tambahkan juga code js berikut sebelum </body>:

<script type='text/javascript'>         
//<![CDATA[
// Highlighter Double Click
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/Arlina-Design/frame/6c8ec00f/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>         
</script>

<script src='https://cdn.rawgit.com/galih977/prisma/d77df66d/galihhighlight.js'/>

Untuk penggunaannya, kamu tinggal menggunakan kode ini.
Pilih sesuai jenis kode yang anda inginkan.

<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript hljs"> CODE ANDA DI SINI</code></pre>

<pre title="JQueryku" data-codetype ="JQueryku"><code class="JQueryku"> CODE ANDA DI SINI</code></pre>

<pre title="CSS" data-codetype ="CSSku"><code class="language-css hljs"> CODE ANDA DI SINI</code></pre>

<pre><code class="hljs xml"> CODE ANDA DI SINI</code></pre>

Untuk demo boleh cek dalam blog ini.
Naa senang bukan.

Thanks, O4U Admin.