Memasang Highlight.Js Syntax Highlighter Di Blog

Jika Anda mempunyai blog yang suka memposting kode-kode HTML, CSS, atau JavaScript, maka syntax highlighter perlu Anda coba untuk menciptakan tampilan kode-kode yang Anda bagikan menjadi lebih menarik.

Salah satu syntax highlighter yang saya rekomendasikan untuk Anda pasang di blog yaitu Highlight.js.

Highlight.js sanggup membaca bahasa instruksi yang kita tulis secara otomatis tanpa harus membubuhkan class pada tag <code>. Selain itu, highlighter.js mempunyai size js dan css yang cukup kecil dan penerapan kode-kodenya yang cukup mudah. Sehingga penulisannya cukup menyerupai berikut ini.

 
 <pre><code>
 KODE CSS, HTML, ATAU JAVASCRIPT DI SINI
 </code></pre>

Jika Anda ingin mencobanya, silahkan simpan instruksi di bawah ini (untuk ketika ini versi terbarunya yaitu versi 8.4) dan simpan di atas instruksi </body>

 <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js' type='text/javascript'></script>
 <script type='text/javascript'>
 //<![CDATA[
 hljs.initHighlightingOnLoad();hljs.configure({useBR:true});$("div.code").each(function(e,t){hljs.highlightBlock(t)});
 //]]>
 </script>

Source: https://highlightjs.org/download/

Sementara ini untuk highlighter.js belum mendukung pada pemuatan js secara asynchronous. Semoga kedepannya ini sanggup dilakukan.

Namun untuk CSS dari highlight.js ini sanggup kita muat secara asynchronous untuk menghindari render-blocking CSS. Scriptnya sama dengan script untuk memuat Font Awesome secara asynchronous yang sebelumnya saya bagikan.

Jika Anda sebelumnya sudah memakai script asynchronous Font Awesome menyerupai di bawah ini di atas instruksi </body>.

 <script>
 //<![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("//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
 //]]>
 </script>

Maka silahkan tambahkan instruksi link CSS style berikut pada instruksi di atas

 loadCSS("//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css")

Sehingga menjadi menyerupai berikut

 <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("//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");loadCSS("//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css");
 //]]>
 </script>

Perhatikan pada instruksi default.min.css di atas, itu untuk css style default highlight.js. Silahkan pilih style yang Anda sukai pada halaman berikut: https://highlightjs.org/static/demo/. Jika Anda contohnya menentukan style Dark, maka silahkan ganti instruksi default.min.css menjadi dark.min.css.

Dengan begitu kita tidak perlu menyimpan css style highlight.js yang kita pilih di edit html blog kita sehingga tidak akan menambah size blog kita dan css style highlight.js dengan host external tersebut tidak menghambat loading blog alasannya yaitu di-load secara asynchronous.

Sumber https://www.kompiajaib.com/

Share this post