Ditulis oleh: Ditulis pada: 12/19/2014
Jika Anda mempunyai blog yang suka memposting kode-kode HTML, CSS, atau JavaScript, maka syntax highlighter perlu Anda coba untuk membuat tampilan kode-kode yang Anda bagikan menjadi lebih menarik.
Salah satu syntax highlighter yang saya rekomendasikan untuk Anda pasang di blog adalah Highlight.js.
Highlight.js dapat membaca bahasa kode yang kita tulis secara otomatis tanpa harus membubuhkan
class pada tag <code>. Selain itu, highlighter.js memiliki size js dan css yang cukup kecil dan penerapan kode-kodenya yang cukup mudah. Sehingga penulisannya cukup seperti berikut ini.
<pre><code>
KODE CSS, HTML, ATAU JAVASCRIPT DI SINI
</code></pre>
Jika Anda ingin mencobanya, silahkan simpan kode di bawah ini (untuk saat ini versi terbarunya yaitu versi 8.4) dan simpan di atas kode
</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 bisa dilakukan.
Namun untuk CSS dari highlight.js ini bisa 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 menggunakan script asynchronous Font Awesome seperti di bawah ini di atas kode
</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 kode link CSS style berikut pada kode di atas
loadCSS("//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css")
Sehingga menjadi seperti 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 kode
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 misalnya memilih style Dark, maka silahkan ganti kode 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 karena di-load secara asynchronous.