Cara Membuat Syntax Highlighter di Blogger Terbaru

WANHEART NET - Cara Membuat Syntax Highlighter di Blogger. Syntax Highlighter adalah sebuah fitur penyunting teks untuk bahasa pemrograman, skrip, bahasa markah seperti Javascript, HTML, CSS dan PHP. Fitur ini menampilkan skrip dengan warna polos dan bisa berwarna seperti teks editor sesuai format bahasa yang dipilih.

Memasang Syntax Highlighter pada blog cukup mudah, hanya dengan memParse code skrip yang akan di letakkan di dalam Syntax Highlighter. Efek yang dihasilkan dengan pemasangan Syntax Highlighter berwarna yaitu dapat membuat nyaman pengunjung, skrip mudah dipahami oleh pembaca, tampilan website lebih indah dan enak dipandang dan bisa membedakan dengan format bahasa pemrograman yang dimasukan.

Perlu anda ingat, permasangan syntax highlighter ini lebih cocok kepada blogger yang mengelola blog dengan niche yang terbatas dan sangat tidak cocok untuk blog yang mempunyai niche campuran atau gado – gado. Oleh karena itu bijaklah anda dalam memilih dan memasang script di blog. Jika terlalu berlebihan bisa membuat loading website menjadi lambat dan berat.

Cara Membuat Syntax Highlighter di Blogger

Oke langsung saja berikut Cara Membuat Syntax Highlighter di Blogger.

1. Silakan masuk ke menu TEMA, kemudian EDIT HTML. Jika tidak menemukannya anda bisa klik ikon segitiga kecil di samping tombol sesuaikan.
2. Cari kode </head>, kemudian letakkan kode dibawah ini diatasnya.

<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/monokai.min.css");
//]]>
</script>

Pada kode marking berwarna kuning di atas, itu adalah style kode CSS dari highlight.js, anda dapat menggantinya sesuai selera tampilan tema highlighter anda. Untuk kali ini saya menggunakan tema monokai. Untuk demo tampilan tema anda bisa mengeceknya disini.

Cara Merubah tema highlight.js, anda cukup mengganti url cssnya. Pertama, anda silakan pilih dan buka tema sesuai keinginan disini, Contoh monokai.css, Kemudian klik RAW dan copy linknya. Ganti marking kuning kode diatas dengan link raw tadi.

3. Cari Kode </body> kemudian letakkan kode dibawah ini diatasnya.

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

4. Terakhir anda bisa menambahakan code CSS berikut di atas </style>.

/* 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}

5. Kemudian Save Tema, Selesai.

Cara Pasang Syntax Highlighter Berwarna di Blog

Untuk memasang syntax highlighter di blog cukup mudah, anda hanya perlu meletakkan kode skrip yang sudah terParse di dalam tag pre code, untuk contoh sebagai berikut

<pre><code>
Letakkan skrip yang sudah terparse disini
</code></pre>

Mungkin itu Cara Buat dan Pasang Syntax Highlighter Berwarna di Blog, semoga bermanfaat, terima kasih.