Membuat Syntax Highlighter Otomatis Terbaru Di Blogger

Berikut ini yaitu tutorial perihal cara memasang sytax highlight js otomatis di blogger/Blogspot. Syntax Highlighter yaitu salah satu script yang sanggup menciptakan arahan menjadi warna-warni. Kode warna-warni tersebut biasa kita lihat pada blog yang berisi konten tutorial atau menyebarkan tips perihal blogger yang di dalamnya terdapat script HTML, JavaScript, jQuery dan lain sebainya.

Selain memperindah tampilan barisan arahan pada postingan blog, penggunaan Syntax Highlighter juga dimaksudkan semoga pembaca sanggup dengan gampang mengenal jenis arahan yang disajikan oleh penulis. Efek penggunaan Syntax Highlighter lainnya ialah, pengunjung akan merasa nyaman membaca sajian konten blog, dan bagi pengelola blog akan membuatnya menjadi lebih professional dalam menyajikan artikel-artikel pada blog tutorialnya.

Widget yang Tidak SEO Friendly di Mesin Pencari

Dengan begitu, penggunaan Syntax Highlighter lebih cocok kepada blogger yang mengelola blogdengan niche yang terbatas dan sangat tidak cocok dipakai oleh blog yang hanya sekali-sekali menyajikan tutorial alias blog gado-gado, untuk itu bijaklah menentukan dan memasang script di blog kita. Sebab, kalau berlebihan maka akan besar lengan berkuasa terhadap loading blog.

Syntax Highlighter yang aku sajikan ini yaitu hasil racikan dari Alex Gorbatchev yang kodenya ini juga dikenal dengan nama script Stabilo Syntacs. Syntax Highlighter yaitu tools pengganti blockquote, mengingat tampilan blockquote yang tidak mendukung warna-warni untuk arahan script, maka solusinya yaitu memakai Syntax Highlighter ini. Jika anda tertarik untuk memakai Syntax Highlighter ini, silahkan ikuti caranya berikut.

Cara Praktis Mencegah Kopi Paste Artikel Kecuali Blockquote

Cara Memasang Syntax Highlighter di Blogger

Langkah 1
Login ke blog kemudian masuk ke Theme > Edit HTML. Temukan arahan </head> atau </head> dan letakkan arahan berikut di atas arahan tadi.

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

Pada arahan yang aku marking warna kuning di atas yaitu CSS / style dari highlight.js yang sanggup dipilih atau diganti DISINI. Yang pada tutorial ini aku memakai css googlecode.

Silahkan sesuaikan style highlight.js yang Anda suka dengan mengganti googlecode pada arahan tersebut dengan style yang diinginkan. Misalnya suka dengan style Github Gist, maka tinggal ganti googlecode tersebut dengan github-gist.

Atau, sanggup juga mengambil style highlight.js ini DISINI (link GitHub).

Langkah 2
Cari arahan </body> atau </body> kemudian letakkan arahan berikut 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>

Langkah 3
Sebtulnya hingga pada langkah 2 di atas, pemasangan syntax highlight.js sudah selesai. Hanya saja tampilannya masih akan sedikit berserakan saat JavaScript dan highlight.js belum tepat di load. Maka untuk mengatasi hal itu, silahkan tambahkan beberapa baris CSS berikut ini di atas arahan </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}

Langkah 4
Simpan template