Cara Memasang Syntax Highlighter di Artikel Blog

Oke kali ini Santui Media akan memberikan tutorial Cara Memasang Syntax Highlighter di Artikel Blog seperti pada blog ini :) sebelum memasang Syntax Highlighter pada artikel blog alangkah baiknya kamu mengetahui dulu apa itu Syntax Highlighter, bagi yang sudah paham sih bisa lewati aja penjelasannya :v

Apa sih Syntax Highlighter itu?

Syntax Highlighter merupakan fitur khusus sebuah proses pemindahan kode bahasa pemrograman tertentu dengan tulisan, warna teks, posisi sama persis dengan yang terdapat pada sebuah kode bahasa pemrograman untuk dipindahkan maupun disalin ke dalam bentuk tulisan lain agar lebih mudah dalam membaca atau mempelajarinya.

Syntax Highlighter cara kerjanya hampir sama dengan blockquote tetapi bedanya untuk fitur blockquote warna teks biasanya hanya satu warna saja, untuk merubah warnanya sesuai dengan kode aslinya harus dilakukan secara manual. Jadi intinya Syntax highlighter akan efektif dalam proses pembuatan atau pemindahannya bila dibandingkan dengan fitur blockquote.

Selain memperbagus tampilan barisan kode di postingan blog, penggunaan Syntax Highlighter dimaksudkan untuk pembaca agar dapat dengan mudah mengenali jenis kode yang diberikan oleh penulis blog. Manfaat penggunaan Syntax Highlighter lainnya yaitu pengunjug akan merasa lebih nyaman membaca isi konten blog.

Cara Memasang Syntax Highlighter di Artikel Blog

1. Masuk ke Blogger > Pilih Blog
2. Masuk ke Tema > Edit HTML
3. Tambahkan code CSS dibawah ini sebelum </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

NB: Kode yang akan saya bagikan ini akan berfungsi dengan baik jika di blog kalian sudah menambahkan jQuery library. Contoh jQuary library seperti ini <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

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

Kemudian tambahkan kode berikut ini sebelum </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<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://cdn.jsdelivr.net/gh/Arlina-Design/frame@master/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

4. Save template

Cara penulisan Syntax Highlighter di Artikel Blog

Setelah memasang kode yang dibutuhkan untuk Syntax Highlighter, selanjutnya ke cara penulisannya didalam postingan. Buat postingan baru di Blog kamu, kemudian untuk penulisannya tambahkan kode ini di tab HTML (bukan compose)

<pre><code>MASUKAN KODE HTML/CSS/JAVASCRIPT DISINI</code></pre>

Ganti kode yang ditandai pada kode diatas dengan kode HTML/CSS/JavaScript.
Perlu diingat! Khusus kode HTML/JavaScript silahkan parse terlebih dahulu dengan HTML Converter.

Berikut ini contoh penulisan kode HTML, Kode HTML yang ditandai adalah kode yang akan sobat tambahkan.

<pre><code><html>
<head>
<title>test</title>
</head>
<body>
<p>Santui Media</p>
</body>
</html></code></pre>

Sama halnya dengan kode CSS dan JavaScript, cara penulisannya sama seperti contoh diatas.

Oke, Semoga tuorial Cara Memasang Syntax Highlighter di Artikel Blog bermanfaat bagi kalian semua :)

Terima Kasih