Skip to main content

Cara Membuat Syntax Highlighter di Blogger

Cara buat kotak kode html di dalam postingan


Syntax Highlighter adalah suatu kotak kode script yang dapat membuat tulisan berupa kode yang kita simpan di dalam postingan akan warna-warni. Dulu saya sempat mencarinya dengan keyword cara membuat kotak kode HTML di dalam postingan blogger yang akan membingkai kode html, ternyata kotak di dalam postingan ini di sebut dengan istilah Syntax Highlighter.

Dengan membuat Syntax Highlighter di dalam postingan akan membuat tampilan barisan kode di dalam artikel menjadi indah. Selain itu dengan menerapkan Syntax Highlighter di dalam artikel, postingan anda akan terlihat lebih rapi dan juga profesional, dengan begitu pembaca akan lebih mudah memahami berbagai kode yang kita simpan di dalam artikel.


Biasanya Syntax Highlighter ini di gunakan oleh seorang blogger yang blognya membahas tentang berbagai ilmu pengkodingan termasuk blogger yang setiap membuat artikel di dalamnya terdapat script HTML, JavaScript, jQuery atau yang lainnya seperti pada artikel saya yang ini, Sehingga Syntax Highlighter ini sangat di perlukan.

Cara Membuat Syntax Highlighter di Dalam Postingan Blogger


Pertama. Cari kode </head> di dalam menu edit HTML, lalu letakkan kode di bawah ini di atas kode tersebut.

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


Kedua. Cari kode </body> atau yang serupa dengan kode tersebut. Lalu letakan kode berikut ini di atas kode </body>.

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


Ketiga. Simpan kode CSS di bawah ini di atas kode </style>. Tujuannya agar tampilannya menjadi lebih rapi.

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


Keempat. Simpan perubahan template yang sudah teman-teman tambahkan kode untuk membuat Syntax Highlighter di blogger.

Cara Menerapkan Syntax Highlighter di Dalam Postingan


Untuk menggunakan Syntax Highlighter teman-teman perlu memanggilnya di dalam menu compose menggunakan kode di bawah ini, dengan begitu kode-kode yang anda masukan di dalam artikel akan di kemas dengan sebuah kotak atau bisa juga di sebut dengan bingkai.

<pre><code>
Simpan Kode JavaScript, jQuery atau CSS disini
</pre></code>


Nah itulah tutorial cara membuat syntax highlighter di blogger.
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar