Memasang Syntax Highlighting Highlight.js Dengan Defer

Ditulis oleh: Adhy Suryadi

Ditulis pada: 4/13/2016

Dulu saya sudah pernah memposting cara memasang syntax highlighting dari Highlight.js, namun saat itu saya masih belum menemukan cara untuk menghindari blocking render js dari Highlight.js. Dan kini saya sudah menemukan cara untuk mengatasi blocking render js dari highlight.js dengan men-defer javascript-nya sehingga tidak mengganggu loading blog. Dan jika ada yang ingin mencobanya silahkan ikuti caranya di postingan ini.

Highlight.js adalah salah satu syntax highlighting yang cukup ringan serta dapat membaca otomatis bahasa kodenya sehingga kita tidak perlu repot menambahkan class pada tag kodenya, cukup dengan menulis <pre><code>.........</code></pre>. Highlight.js kini mendukung 152 bahasa pemograman dengan 72 style yang bisa kita pilih sesuai selera.

Untuk mulai memasang Highlight.js, silahkan ikuti langkah-langkahnya di bawah ini.

1. Langkah Pertama
Yang pertama kita lakukan adalah memilih style yang akan kita gunakan, silahkan pilih style yang cocok DI SINI, silahkan coba satu per satu style Highlight.js sampai menemukan yang cocok dengan klik style di samping kiri halamannya. Setelah menemukan style yang cocok, silahkan copy CSS style DI SINI, silahkan klik style yang dipilih kemudian copy kode CSS-nya dan silahkan simpan di atas kode </style> atau ]]></b:skin> di Edit HTML blog Anda.

2. Langkah Kedua
Silahkan copy kode javascript di bawah ini di atas kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script>

//<![CDATA[

function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/KompiAjaib/js/master/highlight2.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;

//]]>

</script>

</b:if>

Ini juga akan otomatis membaca tag <i rel="pre"> pada komentar blogger dan menampilkannya dengan tampilan Highlight.js seperti pada postingan.

Selesai... silahkan Anda lihat postingan yang menampilkan kode dengan tag pre code

Selamat mencoba dan semoga bermanfaat.