Memasang Syntax Highlighting Highlight.js Dengan Defer

Memasang Syntax Highlighting Highlight.js Dengan Defer

Bola Hero Gawai

Memasang Syntax Highlighting Highlight.js Dengan Defer

Memasang Syntax Highlighting Highlight.js Dengan Defer
Dulu saya sudah pernah memposting cara memasang syntax highlighting dari Highlight.js, namun saat itu saya masih belum menemukan cara untuk menghindari blocking render js dari Highlight.js. Dan kini saya sudah menemukan cara untuk mengatasi blocking render js dari highlight.js dengan men-defer javascript-nya sehingga tidak mengganggu loading blog. Dan jika ada yang ingin mencobanya silahkan ikuti caranya di postingan ini.

Highlight.js adalah salah satu syntax highlighting yang cukup ringan serta dapat membaca otomatis bahasa kodenya sehingga kita tidak perlu repot menambahkan class pada tag kodenya, cukup dengan menulis <pre><code>.........</code></pre>. Highlight.js kini mendukung 152 bahasa pemograman dengan 72 style yang bisa kita pilih sesuai selera.

Untuk mulai memasang Highlight.js, silahkan ikuti langkah-langkahnya di bawah ini.

1. Langkah Pertama
Yang pertama kita lakukan adalah memilih style yang akan kita gunakan, silahkan pilih style yang cocok DI SINI, silahkan coba satu per satu style Highlight.js sampai 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 kemudian copy kode CSS-nya dan silahkan simpan di atas kode </style> atau ]]></b:skin> di Edit HTML blog Anda.

2. Langkah Kedua
Silahkan copy kode javascript di bawah ini di atas kode </body>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 seperti pada postingan.

Selesai... silahkan Anda lihat postingan yang menampilkan kode dengan tag pre code

Selamat mencoba dan semoga bermanfaat.

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

10 Comments Add Comment

Test kode di postingan :)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://googledrive.com/host/0Bz4YdwRI3rnCTFdxX29TaU9WTlU/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>

Balas

Test CSS :D

.hljs{display:block;overflow-x:auto;padding:.5em;background:#333;color:#fff}
.hljs-name,.hljs-strong{font-weight:700}
.hljs-code,.hljs-emphasis{font-style:italic}
.hljs-tag{color:#62c8f3}
.hljs-selector-class,.hljs-selector-id,.hljs-template-variable,.hljs-variable{color:#ade5fc}
.hljs-bullet,.hljs-string{color:#a2fca2}
.hljs-attribute,.hljs-built_in,.hljs-builtin-name,.hljs-quote,.hljs-section,.hljs-title,.hljs-type{color:#ffa}
.hljs-bullet,.hljs-number,.hljs-symbol{color:#d36363}
.hljs-keyword,.hljs-literal,.hljs-selector-tag{color:#fcc28c}
.hljs-code,.hljs-comment,.hljs-deletion{color:#888}
.hljs-link,.hljs-regexp{color:#c6b4f0}
.hljs-meta{color:#fc9b9b}
.hljs-deletion{background-color:#fc9b9b;color:#333}
.hljs-addition{background-color:#a2fca2;color:#333}
.hljs a{color:inherit}
.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}

Balas

Akang Adhy, saya kirim email kok tidak dibalas2 ya. saya kirim menggunakan halaman contact blog ini....waduh jadi gegana ini eui.....ditunggu replay emailnya kang..maaf OOT

Balas

mas. seperti apa membuat 3 kolom komentar seperti ini mass?????

Balas

Waduh saya cari ga ada, mungkin ketimpah, coba kirimkan lagi.

Balas

Coba di sini mas http://www.kompiajaib.com/2016/02/memasang-komentar-disqus-blogger.html

Balas

Siap kang, dikirim ulang....

Balas

Hmm keren mas muantappp sekali nih.

Balas

Maap mas, nanya di luar topik...
Klo mau buat page HTML live editor kayak blog ini gimana y?

Balas

Di sini mas http://www.kompiajaib.com/2016/04/membuat-html-live-editor-dengan-hosting.html

Balas
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!

×
×
×