Memasang Syntax Highlighting Highlight.Js Dengan Defer
Dulu saya sudah pernah memposting cara memasang syntax highlighting dari Highlight.js, namun dikala itu saya masih belum menemukan cara untuk menghindari blocking render js dari Highlight.js. Dan sekarang saya sudah menemukan cara untuk mengatasi blocking render js dari highlight.js dengan men-defer javascript-nya sehingga tidak mengganggu loading blog. Dan kalau ada yang ingin mencobanya silahkan ikuti caranya di postingan ini.Highlight.js ialah salah satu syntax highlighting yang cukup ringan serta sanggup membaca otomatis bahasa kodenya sehingga kita tidak perlu repot menambahkan
class pada tag kodenya, cukup dengan menulis <pre><code>.........</code></pre>. Highlight.js sekarang mendukung 152 bahasa pemograman dengan 72 style yang sanggup kita pilih sesuai selera.Untuk mulai memasang Highlight.js, silahkan ikuti langkah-langkahnya di bawah ini.
1. Langkah Pertama
Yang pertama kita lakukan ialah menentukan style yang akan kita gunakan, silahkan pilih style yang cocok DI SINI, silahkan coba satu per satu style Highlight.js hingga 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 lalu copy isyarat CSS-nya dan silahkan simpan di atas isyarat
</style> atau ]]></b:skin> di Edit HTML blog Anda.2. Langkah Kedua
Silahkan copy isyarat javascript di bawah ini di atas isyarat
</body> <b:if cond='data:blog.pageType == "item"'>
<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 menyerupai pada postingan.Selesai... silahkan Anda lihat postingan yang menampilkan isyarat dengan tag
pre codeSelamat mencoba dan biar bermanfaat.
Sumber https://www.kompiajaib.com/
0 Response to "Memasang Syntax Highlighting Highlight.Js Dengan Defer"
Posting Komentar