Cara Membuat Syntax Highlighter Berwarna Di Blogger

Cara Membuat Syntax Highlighter Berwarna Di Blogger - Syntax highlighter adalah kode stabilo yang biasanya bentuknya berupa kotak yang dimana di dalamnya ada sebuah kode script. Syntax highlighter merupakan fitur editor teks yang biasa digunakan untuk programming, yaitu scripting, atau bahasa markup, seperti HTML. Tidak hanya itu ternyata fitur ini dapat menampilkan teks, terutama pada kode script dalam berbagai warna dan font sesuai dengan kategori. Untuk biasanya syntax highlighter akan menampilkan kode script pada halaman artikel yang sudah kita buat.

Bagi anda yang memiliki topik blog tentang seputar programming atau blogger yang sering menggunakan bahasa markup. Lebih baik anda menggunakan Syntax Highlighter agar mempermudah pengunjung untuk memahami keseluruhan kodenya.

Cara Membuat Syntax Highlighter di Blogger

1. Seperti biasa, pergi ke halaman Dashboard Blogger - >> Template - >> Edit HTML dan temukan kode </head>. Gunakan CTRL-F untuk mencari dengan mudah.

2. Salin dan tempel kode CSS tepat di atas </head>  berikut kode yang telah disediakan di bawah ini.

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

3. Tambahkan kode bawah tepat di atas </body> berikut kodenya

<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. Setelah itu klik Simpan template

Pada tahap ini mungkin sudah cukup karena untuk langkah berikutnya kita menerapkan kode pada postingan sebuah artikel di blog.

Cara Memasang Syntax Highlighter di Artikel Blog

Untuk selanjutnya cukup mudah, seperti biasa yang kita lakukan ketika ingin membuat postingan artikel.

1. Buatlah sebuah artikel yang ingin kita tambahkan syntax highlighter

2. Letakan kode berikut tepat di bagian yang anda inginkan ( klik mode HTML bukan Compose )

<pre><code> Kode HTML, CSS, JavaScript di Sini </code></pre>

3. Selesai, klik publikasikan

Demikian untuk Cara Memasang Syntax Highlighter di Blog, semoga bisa menjadi referensi dan bermanfaat untuk semua. Selamat mencoba!

Baca Juga