Memasang Syntax Highlighter Otomatis pada Blogspot

Nofantz at 5/15/2019

Sebelum memulai pembahasan tentang Memasang Syntax Highlighter pada blog secara otomatis saya akan jelaskan terlebih dahulu apa itu Syntax Highlighter.

Syntax Highlighter adalah kode script yang biasa di gunakan untuk menampilkan kode-kode HTML, CSS, JavaScript, ataupun jQuery pada postingan blog menjadi warna warni. Biasanya Syntax Highlighter ini digunakan oleh blog-blog yang membahas tentang tutorial-tutorial yang berhubungan dengan kode-kode seperti HTML, CSS, JavaScript, maupun jQuery.

Keuntungan menggunakan Syntax Highlighter ini yaitu tampilan kode menjadi lebih rapi, enak dipandang yang tentunya akan membuat nyaman para pengunjung blog.

Cara memasang Syntax Highlighter pada Blog

Baca dengan dan ikuti dengan teliti tutorial ini.

Langkah #1

Login terlebih dahulu ke Dashboard Blogger kalian, kemudian masuk ke Menu Tema > Edit HTML. Cari kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; , kemudian Copy kode berikut dan paste tepat di atasnya ( </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; ).

<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("//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/styles/googlecode.min.css");
//]]>
</script>

Langkah 2

Cari kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; kemudian copy kode berikut dan paste tepat di atasnya (</body> atau &lt;!--</body>--&gt;&lt;/body&gt;).

<b:if cond='data:view.isPost'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
hljs.initHighlightingOnLoad();hljs.configure({useBR:false});$("div.code").each(function(e,t){hljs.highlightBlock(t)});
//]]>
</script>
</b:if>

Langkah 3

Agar tampilan lebih rapi, Copy dan paste kode berikut di atas ]]></b:skin> atau ]]></b:template-skin>

/* Highlight CSS */
code,pre,pre code{font-family:Consolas,Monaco,'Andale Mono',monospace;word-spacing:normal;font-size:14px;line-height:1.3em;}
pre code{padding:20px!important;margin:20px auto 50px;background-color:#fff!important;box-shadow:0 9px 19px 7px rgba(0,0,0,.04),0 10px 17px -2px rgba(0,0,0,.070);border-top:1px solid rgba(0,0,0,0.02);}
.post-body code{color:#e20d58}

Langkah 4

Bila code-code diatas sudah di terapkan di Template kita, selanjutnya tinggal Save atau SImpan Tema

Untuk menerapkannya di postingan blog, lihat contoh berikut.

<pre><code>
Taruh disini kode HTML , CSS, JavaScript atau jQuery nya.
</code></pre>

Demikian tutorial Memasang Syntax Highlighter pada blog secara otomatis. Bila ada pertanyaan silahkan tinggalkan komentar di bawah.

Related Posts