Cara Memasang Syntax Highlighter di Postingan Blog

Memasang Syntax Highlighter di blog akan mempercantik tampilan postingan pada blog. Selain itu, dengan memasang Syntax Highlighter di blog juga akan menambah kesan profesional pada blog itu sendiri.

Memasang Syntax Highlighter juga akan membuat pengunjung mudah membaca serta memahami jenis kode yang diberikan oleh penulis yang tentunya menambah kenyamanan para pengunjung blog.

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

Syntax Highlighter hampir mirip dengan blockquote, akan tetapi pada blockquote fitur warna teksnya biasanya hanya satu warna saja dan jika ingin mengubahnya harus dilakukan secara manual, jadi ribet kan.

Intinya simple, dengan memasang Syntax Highlighter di blog akan lebih efektif dalam proses pembuatan maupun pemindahannya daripada menggunakan fitur blockquote.

{tocify} $title={Daftar Isi}

Cara Memasang Syntax Highlighter di Postingan Blog

1. Buka blogger - Template - Edit HTML
2. Terapkan kode berikut tepat diatas kode </head> atau kode </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>{codeBox}

Perhatikan, kode ini akan berfungsi dengan baik jika di blog sudah menambahkan jquery library. Jika belum, tambahkan script berikut sebelum kode </style>

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

3. Kemudian tambahkan kode ini sebelum kode </body> atau </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.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>{codeBox}

4. Simpan template.

Cara Penulisan Syntax Highlighter di Postingan Blog

Setelah menerapkan kode diatas kedalam template blog sobat, simak langkah-langkah berikut untuk penulisannya di postingan. Dalam penulisannya, sobat mesti MENULISKAN DULU kodenya di mode Compose, lalu memberikan kode tambahan melalui mode HTML.

<pre><code>__TAMBAHKAN KODE CSS/HTML/JAVASCRIPT DI SINI__</code></pre>{codeBox}

Ganti kata yang ditandai dengan kode CSS/HTML/JAVASCRIPT.{alertInfo}

Contoh hasil susunan penambahan kode penulisan Syntax Highlighter di mode HTML.

<pre><code>
<h1>
<span>SANTAIBARENG.NET</span>
<span>BERBAGI DAN BELAJAR BERSAMA</span>
<span>BISNIS ONLINE, TEKNOLOGI DAN TUTORIAL BLOG</span>
</h1>
</code></pre>{codeBox}

Kode yang ditandai merupakan letak kode yang nantinya akan sobat tambahkan.{alertInfo}

Selanjutnya, sobat juga bisa mencoba Cara Membuat Widget Mengikuti Scroll atau Sticky Widget pada Blog untuk mempercantik tampilan blog.

Sekian tutorial blogger pemula mengenai Cara Memasang Syntax Highlighter di Postingan Blog. Semoga bermanfaat!