Jika blog Anda membahas tentang tutorial kode, maka dipastikan Anda akan menampilkan kode-kode di postingan. Biasanya untuk menampilkan kode di postingan akan mengunakan tag pre.

Nah untuk mempercantik tampilan kode dengan tag pre, maka salah satu syntax highlighter yang saya rekomendasikan adalah highlight.js karena selain mudah dalam memasangnya juga highlight.js akan otomatis membaca bahasa kode seperti yang saya gunakan pada blog ini.

Jika Anda tertarik untuk mencobanya juga, silahkan ikuti langkah-langkahnya di bawah ini.

Silahkan buat file baru highlight.js di repo blog Anda di folder js dan silahkan copy kode dari sini.

Kemudian silahkan tambahkan CSS highlight.js pada CSS blog Anda di folder css dan silahkan copy kode dari sini atau untuk menggunakan style lainnya silahkan pilih css style dari sini.

Sekarang yang terakhir silahkan buka _includes » footer.html dan simpan kode di bawah ini di bagian paling bawah.

<script>
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "/js/highlight.js ";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

Pada tutorial ini, kita men-_defer_ file js dari highlight.js agar tidak terdeteksi blocking render js.

Selamat mencoba.



Similar Posts