Jika blog sobat bertema tutorial blog atau desain blog, kebanyakan di blog tersebut membagikan kode-kode seperti kode HTML, CSS dan JavaScript, maka Syntax Highlighter sangat cocok untuk dipasangkan diblog sobat. Dengan menggunakan Syntax Highlighter di blog sobat, otomatis kode html, css dan javascript sobat itu berwarna sesuai pewarnaan pada kode tersebut dan akan menjadi lebih menarik di blog sobat.
Disini kita akan membuat tutorial cara memasang syntax highlighter di blog menggunakan highlight.js, karena highlight.js dapat membaca kode yang kita tulis. Selain itu, highlight.js juga memiliki ukuran script dan css yang sangat kecil, tentu saja tidak membuat blog sobat menjadi berat. Script ini juga sudah berfungsi Defer, supaya menghindari Render Blocking js dari Google Pagespeed Insight agar tidak berpengaruh pada loading blog.
Cara penulisan Syntax Highlighter cukup mudah, sobat tinggal menggunakan penulisan kode tag Pre dan Code seperti ini
Jika sudah menemukan yang pas untuk dipasangkan diblog sobat, silahkan sobat cari nama css highlighter.js yang tadi DISINI, kemudian salin kode css tersebut dan pastekan di atas kode
Kemudian pastekan kode dibawah ini diatas kode
Simpan
Script diatas juga otomatis membaca
Sekarang lihat tampilan Syntax highlighter pada postingan blog sobat, akan terasa lebih menarik pada postingan blog sobat. Jika masih ada yang kurang jelas, silahkan berkomentar.
Sumber: http://www.kompiajaib.com
Disini kita akan membuat tutorial cara memasang syntax highlighter di blog menggunakan highlight.js, karena highlight.js dapat membaca kode yang kita tulis. Selain itu, highlight.js juga memiliki ukuran script dan css yang sangat kecil, tentu saja tidak membuat blog sobat menjadi berat. Script ini juga sudah berfungsi Defer, supaya menghindari Render Blocking js dari Google Pagespeed Insight agar tidak berpengaruh pada loading blog.
Cara penulisan Syntax Highlighter cukup mudah, sobat tinggal menggunakan penulisan kode tag Pre dan Code seperti ini
<pre><code>
KODE HTML, CSS atau JavaScript yang sudah di parse
</code></pre>Cara Memasang Syntax Highlighter di Blog
Pilih style atau css yang cocok dengan blog sobat atau yang sobat sukai untuk dipasangkan di blog, Klik DISINI untuk mencari style/css highlight.js.Jika sudah menemukan yang pas untuk dipasangkan diblog sobat, silahkan sobat cari nama css highlighter.js yang tadi DISINI, kemudian salin kode css tersebut dan pastekan di atas kode
]]></b:skin> atau </style> pada Template -> Edit HTML.Kemudian pastekan kode dibawah ini diatas kode
</body>
<b:if cond='data:blog.pageType == "item"'>
<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>Simpan
Script diatas juga otomatis membaca
<i rel="pre"> pada komentar blog dan menampilkan highlight.js seperti syntax highlighter pada posting.Sekarang lihat tampilan Syntax highlighter pada postingan blog sobat, akan terasa lebih menarik pada postingan blog sobat. Jika masih ada yang kurang jelas, silahkan berkomentar.
Sumber: http://www.kompiajaib.com
