Pada kesempatan kali ini saya akan membuat tutorial tentang cara memasang syntax highlight otomatis di blogger/Blogspot. Salah satu script yang memiliki kemampuan untuk membuat kode menjadi berwarna-warni adalah Syntax Highlighter. Kode warna-warni ini sering terlihat pada blog yang berisi tutorial atau berbagi tips tentang blogger, yang mencakup script HTML, JavaScript, dan jQuery.
Syntax Highlighter digunakan untuk tujuan meningkatkan tampilan barisan kode pada postingan blog dan membuat pembaca lebih mudah memahami jenis kode yang disajikan oleh penulis. Efek tambahan dari penggunaan Syntax Highlighter adalah bahwa pengunjung blog akan merasa nyaman membaca sajian konten blog, dan pengelola blog akan merasa lebih profesional dalam menyajikan artikel-artikel di blog tutorial mereka.
Baca Juga : Cara Memasang Widget Recent Posts di Sidebar Blogger
Karena itu, Syntax Highlighter lebih cocok untuk blogger yang mengelola blog dengan niche terbatas. Itu tidak cocok untuk blog yang hanya menyajikan tutorial alias blog gado-gado sesekali. Oleh karena itu, sangat penting untuk memilih dan memasang script di blog kita. karena jika terlalu banyak, akan berdampak pada kecepatan loading blog.
Baca Juga : Cara Buat Halaman Fanspage Facebook di Blogger
Kode yang dikenal sebagai Stabilo Syntacs oleh Alex Gorbatchev adalah sumber daya untuk Syntax Highlighter yang saya sajikan ini. Tampilan blockquote tidak mendukung warna-warni dalam kode script, jadi Syntax Highlighter adalah penggantinya. Jika Anda ingin menggunakan Syntax Highlighter ini, ikuti langkah-langkah berikut.
Cara Pasang Syntax Highlighter di Blogger
Langkah 1
Login ke blogspot, kemudian masuk ke menu Theme > Edit HTML. Lalu cari kode </head> atau </head><!--<head/>--> 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>
Langkah 2
Cari kode </body> atau <!--</body>--></body> kemudian 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
Sebenarnya sampai pada langkah 2 di atas, pemasangan syntax highlight sudah siap. Hanya saja tampilannya nanti akan sedikit berantakan jika JavaScript dan highlight.js belum selesai di load. Untuk mengatasi 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 di Blogspot/Blogger
Untuk bisa menggunakan Syntax Highlighter harus melalui menu compose pada halaman buat artikel dengan pemanggilan kode sebagai berikut.
<pre><code>
Kode JavaScript, jQuery atau CSS masukkan disini
</pre></code>
Atau jika kamu ingin membuat syntax highlight di komentar Blogspot/Blogger, formatnya adalah seperti ini:
<i rel="pre"> kode disini </i>
Demikian cara membuat Syntax Highlighter dan menggunakannya di blogspot/blogger, semoga berhasil diterapkan di blog kamu.