Memasang Syntax Highlighter Otomatis di Blogger

Syntax Highlighter adalah salah satu script yang dapat membuat kode menjadi warna-warni. Kode warna-warni tersebut biasa kita lihat pada blog yang berisi konten tutorial atau berbagi tips tentang blogger yang didalamnya terdapat script HTML, JavaScript, jQuery, dan lain-lain.

Selain memperindah tampilan barisan kode pada postingan blog, penggunaan Syntax Highlighter dimaksudkan agar pembaca dapat dengan mudah mengenal jenis kode yang disajikan oleh penulis.

Efek penggunaan Syntax Highlighter lainnya ialah, pengunjung akan merasa nyaman membaca sajian konten blog, dan bagi pengelola blog akan membuatnya menjadi professional dalam menyajikan artikel pada blog tersebut.

Syntax Highlighter pada artikel ini adalah hasil racikan dari Alex Gorbatchev yang kodenya ini juga dikenal dengan nama Script Stabilo Syntacs.

Syntax Highlighter adalah tool pengganti blockquote, mengingat tampilan blockquote yang tidak mendukung warna-warni untuk kode script.

Jika Anda tertarik untuk menggunakan Syntax Highlighter ini, berikut caranya:

Memasang Syntax Highlighter di Blogger

Langkah 1

Login ke blog lalu masuk ke Thema > Edit HTML. Cari kode </head> atau

&lt;/head&gt;&lt;!--<head/>--&gt;

Dan letakan kode berikut diatas kode tadi.

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) };loadCSS("//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/styles/googlecode.min.css");
//]]>
</script>

Pada kode yang bertanda diatas adalah CSS atau sytle dari highlight.js yang bisa di pilih atau diganti DISINI. Yang pada tutorial ini menggunakan CSS googlecode.

Silakan sesuaikan style highlight.js yang Anda suka dengan mengganti googlecode pada kode tersebut dengan style yang di inginkan. Misalnya, Anda suka dengan style Github Gist, maka cukup ubah googlecode tersebut dengan github-gist.

Atau, Anda juga bisa mengambil style highlight.js ini DISINI (linkGitHub).

Langkah 2

Cari kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; lalu letakan kode berikut diatasnya:

<b:if cond='data:view.isPost'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
hljs.initHighlightingOnLoad();hljs.configure({useBR:false});$("div.code").each(function(e,t){hljs.highlightBlock(t)});
//]]>
</script>
</b:if>

Langkah 3

Sebetulnya sampai pada langkah 2 diatas, pemasangan Syntax highlight.js sudah selesai. Hanya saja tampilannya masih sedikit berantakan ketika javascript dan highlight.js belum sempurna di load.

Maka untuk mengatasi hal itu, silakan tambahkan beberapa baris CSS berikut ini diatas kode </sytle>

/* Highlight CSS */
code,pre,pre code{font-family:Consolas,Monaco,'Andale Mono',monospace;word-spacing:normal;font-size:14px;line-height:1.3em;}
pre code{padding:20px!important;margin:20px auto 50px;background-color:#fff!important;box-shadow:0 9px 19px 7px rgba(0,0,0,.04),0 10px 17px -2px rgba(0,0,0,.070);border-top:1px solid rgba(0,0,0,0.02);}
.post-body code{color:#e20d58}

Langkah 4 - Simpan template

Cara menggunakan Syntax Highligh.js Otomatis di Blogger

Untuk menggunakan Syntax Highlighter harus melalui menu compose dengan pemanggilan kode sebagai berikut:

<pre><code>
Kode JavaScript, jQuery atau CSS masukkan disini
</code></pre>

Atau jika ingin membuat Syntax Highlight di komentar blogger, silakan formatnya sebagai berikut:

<i rel="pre"> kode disini </i>

Itulah cara membuat Syntax Highlighter dan menggunakannya di blogger.

Tweet