Cara Membuat Syntax Highlighter pada Blogger

Biasanya syntax highlighter adalah script yang dapat membuat paragraf yang berisi kode seperti program menjadi warna warni, biasanya terdapat pada blog yang memuat program seperti HTML,CSS, Javascript, PHP, C dan lain sebagainya.

    Syntax Highlighter umumnya terdapat pada provider Wordpress yaitu Crayon Syntax Highlighter, tapi kita juga bisa menggunakannya di Blogger. berikut adalah caranya :

langkah 1
masuklah ke halaman blogger.com dan pilih Edit HTML, temukan kode </head> dan letakkan kode berikut 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/googlecode.min.css");
//]]></script>

tulisan yang saya marking warna hijau diatas adalah CSS atau style dari Highlight.js. kita bisa menggantinya sesuai keinginan disini. tutorial ini menggunakan css googlecode

bila ingin mengganti stylenya bisa dilakukan dengan cara mengganti googlecode pada kode tersebut dengan kode yang diinginkan. misalkan saya ingin merubahnya dengan Github Gist maka tinggal mengganti googlecode dengan github-gist.

atau bisa dengan mengambil style highlight.js disini

langkah 2

cari kode </body> dan coppy kode berikut 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>

langkah 3 

sebenarnya pemasangan syntax highlighternya sudah selesai. akan tetapi tampilannya akan sedikit berantakan jika JavaScript dan Highlight.js belum terload sempurna. untuk mengatasi hal itu kita akan menambahkan css berikut

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

coppy kode tersebut diatas kode </style>

langkah 4

simpan template

Cara menggunakan Syntax Highlight.js :

untuk memanggil syntax highlight saat menulis diblogger, kita harus masuk pada mode penulisan HTML dengan kode pemanggilan sebagai berikut :

<pre><code> 
Teks anda disini
</pre></code>

itu saja dari kami semoga bermanfaat :)