Dulu saya sudah pernah share cara pemasangan Syntax Highlighter, namun yang waktu itu tidak menggunakan Fungsi Defer, karena kita tahu defer ini lumayan membantu dalam mengatasi loading blog karena banyaknya script yang kita gunakan.
Memasang Syntax Highlighter Dengan Fungsi Defer
Artikel ini hanya sebagai dokumentasi saya aja jika suatu saat ingin menggunakan cara ini lagi, Syntax Highlighter ini berguna untuk mempercantik tampilan dari setiap kode yang terbungkus tag <pre><code>.......</code></pre> Cara ini terbilang sangat simple dari pada kita harus menggunakan beberapa tag kode yang sangat banyak yang biasa digunakan.

Untuk demo sobat bisa melihatnya pada artikel pada blog ini, atau ketika sobat melihat postingan ini saya sudah menggunakan Syntax Highlighter ini. Untuk sobat yang ingin mencobanya bisa mengikuti tutorial berikut :

1. Memilih Style Yang Cocok
Ada banyak pilihan style tampilan yang sangat beragam dan bisa sobat pilih sesuai selera sobat, stylenya pun sudah lebih dari 50 style. Untuk sobat yang mau memilih stylenya bisa mengunjungi situsnya https://highlightjs.org/static/demo/ dan jikas sudah mendapati style mana yang akan digunakan, selanjutnya silahkan mengambil kode CSS nya pada link Github berikut https://github.com/isagalaev/highlight.js/tree/master/src/styles .

Tambahkan CSS tersebut seperti biasa pada template sobat, biasanya sih diletakkan pada kode </style> ataupun ]]></b:skin> biasanya itu ada pada menu Edit html setiap template. Jika sobat sudah biasa ngotak ngatik template tidak akan canggung lagi dalam mengerjakan tutorial ini.

2. Menambahkan Javacript
Setelah stylenya sobat tentukan, terakhir kita tinggal menambahkan kode javascript berikut ini yang berfungsi mengubah tampilan kode yang dibungkus dengan tag <pre><code>.......</code></pre> dan juga Javascript ini sudah support defer yang telah dijelaskan juga pada artikel Kang Adhy KompiAjaib.

Tambahkan javascript berikut tepat sebelum tag </body> Javascriptnya sudah saya hosting ke github biar lebih ringan.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
// Highlight Script
function downloadJSAtOnload() {
    var e = document.createElement("script");
    e.src = "https://cdn.rawgit.com/Iwan27/iwanscript/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>
Agar memudahkan dalam memilih kodenya, kita tambahkan double click event (jadi untuk memblok kode tidak perlu di drag lagi) berikut ini :
// Doubel Click Script
var pres = document.querySelectorAll("blockquote,pre,.comment_body p i[rel=pre]");
for (var i = 0; i < pres.length; i++) {
    pres[i].addEventListener("dblclick", function() {
        var e = getSelection();
        var t = document.createRange();
        t.selectNodeContents(this);
        e.removeAllRanges();
        e.addRange(t)
    }, false)
};
Jadi secara keseluruhan kode bisa sobat lihat dan tuliskan seperti berikut :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Highlight Script
function downloadJSAtOnload() {
    var e = document.createElement("script");
    e.src = "https://cdn.rawgit.com/Iwan27/iwanscript/master/highlight2.js", document.body.appendChild(e)
}
window.addEventListener ? window.addEventListener("load", downloadJSAtOnload, !1) : window.attachEvent ? window.attachEvent("onload", downloadJSAtOnload) : window.onload = downloadJSAtOnload;
// Doubel Click Script
var pres = document.querySelectorAll("blockquote,pre,.comment_body p i[rel=pre]");
for (var i = 0; i < pres.length; i++) {
    pres[i].addEventListener("dblclick", function() {
        var e = getSelection();
        var t = document.createRange();
        t.selectNodeContents(this);
        e.removeAllRanges();
        e.addRange(t)
    }, false)
};
//]]>
</script>
</b:if>
Secara keselurahan caranya hanya seperti itu aja, sangat mudah bukan? Selamat mencoba, jika ada yang bingung silahkan komentar..  Ssemoga bermanfaat..
Share this with short URL:
How to style text in Disqus comments:
  • 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