Cara Membuat Syntax Highlighter di Blogger Terbaru

Membuat Syntax Highlighter di Blogger - Hallo sobat! Bagaimana kabar sobat pada kali ini? Semoga sobat baik-baik saja dan sehat selalu ya!

Pada kesempatan kali ini saya mau membahas tentang berbau coding / sintaks (bukan bau bawang ya hehehe). Postingan kali ini saya mau share tentang bagaimana cara membuat syntax highlighter di blogger dengan mudah.

Tapi sebenarnya syntax highlighter itu apa ya? Syntax Highlighter itu adalah sebuah metode yang dimana membuat tampilan syntax terlihat lebih rapih dan bagus. Sebagai contohnya adalah dengan melihat gambar yang paling awal di postingan ini dan itu adalah Syntax Highlighter.

Metode ini sangat berfungsi sekali buat teman-teman yang suka menulis artikel di blog yang bertema tentang coding. Metode ini juga membuat script atau coding menjadi lebih rapih dan nyaman untuk dipandang oleh pembaca.

Untuk cara memasangnya, kita simak tutorial di bawah ini :

1. Masuk ke akun blogger sobat.

2. Masuk ke menu Edit HTML.

3. Copy syntax dibawah di ini sebelum </head>.

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

4. Copy syntax di bawah ini sebelum </body>.

<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.rawgit.com/Arlina-Design/frame/6c8ec00f/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

5. Kemudian Simpan Tema.

Cara Menggunakan Syntax Highlighter

Untuk cara penggunaan dari metode ini adalah sobat harus memparse atau mengkonversi codingan HTML terlebih dahulu. Sobat bisa memparse atau mengkonversi codingan HTMLnya di sini.

Kemudian conversi codingannya dan kemudian copy, lalu untuk menempatkan codingannya sobat harus membuka / masuk tab HTML pada saat menulis artikelnya. Seperti gambar di bawah ini :

Kemudian pastekan codingan yang sudah dicopy di HTML converter dengan cara seperti di bawah ini :

<pre><code>__TAMBAHKAN KODE CSS/HTML/JAVASCRIPT YANG SUDAH DI KONVERSI DI SINI__</code></pre>

Mungkin hanya segitu yang bisa saya sampaikan, jika masih ada yang salah atau masih ada yang belum mengerti, silahkan sobat bisa melakukan dengan komentar di bawah. Akhir kata saya ucapkan terima kasih.



(Sumber coding: Arlina Design)

Baca Juga