Cara Membuat dan Memasang Syntax Highlighter di Blogger

Keberadaan Syntax Highlighter di blogger merupakan salah satu cara yang dapat memperindah tampilan blog. Selain bisa memperindah tampilan blog, keberadaan Syntax Highlighter di blog juga akan membuat blog terkesan prosefional. Dan pemasangan syntax highlighter juga dapat mempermudah pengunjung dalam membaca jenis kode yang tertulis di dalam postingan.

Apa lagi jika blog anda merupakan media blog yang mempunyai niche tentang tutorial, maka keberadaan syntax highlighter ini sangat penting.

Syntax Highlighter merupakan fitur khusus text editor yang menyoroti penulisan berbagai jenis bahasa pemrograman, agar tulisan tersebut mudah untuk dibaca dan dipelajari. Oleh karena itu keberadaan syntax highlighter sangatlah penting bagi blog yang mempunyai niche tentang tutorial.

Bagaimana Cara kerjanya Syntax Highlighter

Cara kerjanya dari syntax highlighter sebenarnya hampir sama dengan blockquote. Akan tetapi yang membedakan antara keduanya adalah untuk warna teks pada fitur blockquote hanya ada satu warna saja dan untuk merubahnya harus dilakukan dengan cara manual melalui menu postingan.

Sedangkan pada fitur syntax highlighter, teks yang ada didalamnya bisa di setting secara otomatis mempunyai warna yang berbeda sesuai bahasa pemrograman itu sendiri. Nah dari situlah perbedaan antara blockquote dan syntax highlighter.

Berikut adalah contoh tampilan syntax highlighter yang bisa menampilkan kode HTML atau Javascript Css di dalam box berwarna warni.

Cara Memasang Syntax Highlighter Keren di Blogger

Contoh syntax highlighter dengan tampilan warna warni

Kalau dibawah ini merupakan contoh syntax highlighter dengan tampilan yang simpel tanpa warna warni

Contoh syntax highlighter dengan tampilan simpel tanpa warna warni

Dan pada kesempatan kali ini saya akan berbagi pengalaman kepada rekan rekan blogger semuanya, yakni tentang cara membuat dan memsang syntax highlighter dengan tampilan warna warni. Dan juga syntax highlighter dengan tampilan simpel tanpa warna warni. Untuk panduanya mari kita simak terus artikel ini sampai selesai.

Cara Memasang Syntax Highlighter di Blogger

Sebelum anda memasang Syntax Highlighter diblogger, pastikan didalam template blog sudah ditambahkan jquery library. Dan berikut ini adalah contoh jquery library yang saya maksudkan.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

Langkah selanjutnya silahkan anda Login atau Masuk ke akun blogger anda masing masing. Pilih menu tema lalu Edit Html dan paste kode Css berikut tepat di atas tag </head> didalam template blog anda

<style type='text/css'>
/* Highlighter */
pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0;padding:0}hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem}
.post-body code{padding:1.2em}.post-body pre{padding:0;border-radius:3px;background-color:#292e34;word-spacing:normal;word-break:normal;line-height:1.4em}.post-body .hljs{display:block;overflow-x:auto;padding:1.2em;background:#2b2b2c;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:3px}.post-body .hljs-name,.post-body .hljs-strong{font-weight:bold}.post-body .hljs-code,.post-body .hljs-emphasis{font-style:italic}.post-body .hljs-tag{color:#62c8f3}.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-class{color:#ade5fc}.post-body .hljs-string,.post-body .hljs-bullet{color:#a2fca2}.post-body .hljs-type,.post-body .hljs-title,.post-body .hljs-section,.post-body .hljs-attribute,.post-body .hljs-quote,.post-body .hljs-built_in,.post-body .hljs-builtin-name{color:#ffa}.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bullet{color:#d36363}.post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literal{color:#fcc28c}.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-code{color:#888}.post-body .hljs-regexp,.post-body .hljs-link{color:#c6b4f0}.post-body .hljs-meta{color:#fc9b9b}.post-body .hljs-deletion{background-color:#fc9b9b;color:#333}.post-body .hljs-addition{background-color:#a2fca2;color:#333}.post-body .hljs a{color:inherit}.post-body .hljs a:focus,.post-body .hljs a:hover{color:inherit;text-decoration:underline}mark .post-body .hljs-attr,mark .post-body .hljs-string,mark .post-body .hljs-bullet{background-color:#e67e22;color:#fff}.post-body .hljs mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}.post-body .hljs mark span.hljs-number,.post-body .hljs mark span.hljs-comment,.post-body .hljs mark span.hljs-symbol,.post-body .hljs mark span.hljs-string,.post-body .hljs mark span.hljs-attr,.post-body .hljs mark span.hljs-keyword,.post-body .hljs mark span.hljs-name,.post-body .hljs mark span.hljs-tag{color:#fff;margin:.15rem 0}
</style>

Selanjutnya tambahkan kode Javascript berikut sebelum kode </body> didalam menu Editor template blog anda.

<script type='text/javascript'>
//<![CDATA[
// Highlighter
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://rawcdn.githack.com/muhamadmiftahul/Kang-Tutorial/444c1f0475610932f0a3c26085be19076b3d930c/highlighter.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

Setelah melakukan tiga step diatas, sekarang klik simpan atau save tema. Dengan demikian kini blog anda sudah terpasang syntax highlighter dengan tampilan warna warni.

Cara Menggunakan Syntax Highlighter di Postingan Blog

Setelah sukses memasang kode syntax highlighter didalam template blog. Lalu bagaimana cara menggunakanya?

Cara menggunakanya pun juga sangat mudah, ketika anda sedang menulis artikel yang akan menyisipkan kode script seperti (CSS, HTML, atau javascript), pastikan kode tersebut sudah diparse terlebih dahulu, agar kode HTML atau Javascript dapat berfungsi dengan semestinya dan bisa terbaca di artikel.

Setelah itu silahkan anda membuat postingan baru seperti biasa, namun dalam mode penulisan. Pilih mode HTML jangan mode Menulis, dan untuk memanggil syntax highlighter gunakan markup HTML dengan format seperti berikut ini sobat.

<pre><code>
Letakkan Kode apa saja Disini (HTML, CSS, Javascript) yang sudah diparse.
</code></pre>

KETERANGAN :
Kode syntax highlighter warna warni diatas menggunakan javascript, dan kemungkinan bisa memberatkan blog anda saat diakses. Namun jika anda termasuk pengguna template sejenis viomagz tidak jadi masalah, karena ditemplate viomagz sudah terpasang script lazy load didalamnya. Jadi kode javascript syntax highlighter warna warni yang saya bagikan ini tidak akan terlalu mempengaruhi kecepatan blog anda.

Atau anda ingin memasang syntax highlighter yang simpel dan ringan, silahkan anda Copy kode CSS berikut dan paste diatas kode ]]></b:skin> didalam template blog anda.

pre,pre code{color:#333333}pre{background:#f7f7f7;padding:10px 15px;overflow:auto;max-width:100%;text-align:left;margin:10px auto;border-left:5px solid #0000ff}code,pre,pre code{max-height:250px; font-family:Consolas,Monaco,'Andale Mono',monospace;white-space:initial;word-spacing:normal;word-break:normal;font-size:14px;line-height:1.3em}code{color:#3d3d3d}i.klik-url,pre{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}

Setelah itu jangan lupa klik simpan atau save template blog anda. Untuk cara penggunaanya sama saja dengan syntax highlighter warna warni yang pertama, cukup menggunakan markup HTML dengan format seperti berikut.

<pre><code>
Letakkan Kode apa saja Disini (HTML, CSS, Javascript) yang sudah diparse.
</code></pre>

Oke sobat demikianlah penjelasan sederhana yang dapat saya sampaikan melalui postingan ini, yakni mengenai cara memasang syntax highlighter keren di blogger. Semoga bisa membantu khususnya buat rekan rekan blogger semuanya.

Dan apabila ada salah kata, atau ada kata kata yang kurang berkenan di hati harap dimaklumi ya. Atau diantara anda ada yang mengalami kendala dalam pemasangan kode syntax highlighter yang saya bagikan ini, jangan ragu silahkan tinggalkan komentar anda pada kolom komentar di bawah. Thanks you for All