Membuat Syntax Highlighter Otomatis Terbaru di Blogger

Berikut ini adalah tutorial tentang cara memasang sytax highlight js otomatis di blogger/Blogspot. 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 di dalamnya terdapat script HTML, JavaScript, jQuery dan lain sebainya.

Selain memperindah tampilan barisan kode pada postingan blog, penggunaan Syntax Highlighter juga 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 lebih professional dalam menyajikan artikel-artikel pada blog tutorialnya.

Baca juga:  Widget yang Tidak SEO Friendly di Mesin Pencari

Dengan begitu, penggunaan Syntax Highlighter lebih cocok kepada blogger yang mengelola blogdengan niche yang terbatas dan sangat tidak cocok digunakan oleh blog yang hanya sekali-sekali menyajikan tutorial alias blog gado-gado, untuk itu bijaklah memilih dan memasang script di blog kita. Sebab, jika berlebihan maka akan berpengaruh terhadap loading blog.

Syntax Highlighter yang saya sajikan ini adalah hasil racikan dari Alex Gorbatchev yang kodenya ini juga dikenal dengan nama script Stabilo Syntacs. Syntax Highlighter adalah tools pengganti blockquote, mengingat tampilan blockquote yang tidak mendukung warna-warni untuk kode script, maka solusinya adalah menggunakan Syntax Highlighter ini. Jika anda tertarik untuk menggunakan Syntax Highlighter ini, silahkan ikuti caranya berikut.

Baca juga: Cara Mudah Mencegah Kopi Paste Artikel Kecuali Blockquote

Cara Memasang Syntax Highlighter di Blogger

Langkah 1

Login ke blog lalu masuk ke Theme > Edit HTML. Temukan kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; dan letakkan kode berikut di atas 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 saya marking warna kuning di atas adalah CSS / style dari highlight.js yang bisa dipilih atau diganti DISINI. Yang pada tutorial ini saya menggunakan css googlecode.

Silahkan sesuaikan style highlight.js yang Anda suka dengan mengganti googlecode pada kode tersebut dengan style yang diinginkan. Misalnya suka dengan style Github Gist, maka tinggal ganti googlecode tersebut dengan github-gist.

Atau, bisa juga mengambil style highlight.js ini DISINI (link GitHub).

Langkah 2

Cari kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; lalu letakkan kode berikut ini 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

Sebtulnya sampai pada langkah 2 di atas, pemasangan syntax highlight.js sudah selesai. Hanya saja tampilannya masih akan sedikit berantakan ketika JavaScript dan highlight.js belum sempurna di load. Maka untuk mengatasi hal itu, silahkan tambahkan beberapa baris CSS berikut ini di atas kode </style>

/* 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 Highlight.js Otomatis di Blogger/Blogspot

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

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

Atau jika ingin membuat syntax highlight di komentar Blogger, silahkan formatnya adalah seperti ini:

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

 

Akhir Kata

Demikian cara membuat Syntax Highlighter dan menggunakannya di blogger, semoga berhasil diterapkan di blog anda.