Memasang Highlight.js Syntax Highlighter Di Blog

Memasang Highlight.js Syntax Highlighter Di Blog

Bola Hero Gawai

Memasang Highlight.js Syntax Highlighter Di Blog

Highlight.js Syntax Highlighter
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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×