Cara Pasang Syntax Highlighter di Blog Blogger

Buat yang sering main dengan koding pasti hapal dengan yang namanya syntax highlighting.

Dengan syntax highlighting, kode akan tampil lebih apik dan lebih rapih karena masing-masing elemen akan ditandai dengan warna berbeda. Tidak cuma enak dilihat, kode yang ditampilkan menggunakan syntax highlighter juga akan lebih mudah diedit.

Sayang di Blog fitur semacam ini tidak hadir secara default. Untuk pengguna Wordpress hal ini bisa diakali dengan menggunakan plugin syntax highlighter. Lha kalau pengguna Blogger bagaimana?

Untungnya ada cara ampuh untuk menampilkan kode dengan syntax highlighter di blog Blogger. Memang bakal sedikit ribet, tapi yang penting bisa.

Nah, buat lo yang juga maupasang syntax highlighter di blog, silahkan ikuti tutorial ini saja yah!

Untuk melakukannya, kita cuma perlu masuk ke menu EDIT HTML Blogger lalu tempel kode ini di atas tag </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<style type='text/css'>
/* Syntax Highlighter Monokai Sublime */
.post-body pre code, .post-body code{font-family:Consolas,Monaco,&#39;Andale Mono&#39;,monospace;font-size:100%;font-weight:normal;}
.post-body pre{padding:7px;border-radius:4px;background-color:#23241f;word-spacing:normal;word-break:normal;line-height:1.4em!important;}
  pre,pre code{white-space: pre-wrap;}
.hljs {
  display: block;
  overflow-x: auto;
  padding:0 0.5em 0.5em;
margin:0;
  background: #23241f;
max-height:360px;
}

.hljs,
.hljs-tag,
.hljs-subst {
  color: #f8f8f2;
}

.hljs-strong,
.hljs-emphasis {
  color: #a8a8a2;
}

.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link {
  color: #ae81ff;
}

.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {
  color: #a6e22e;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-attr {
  color: #f92672;
}

.hljs-symbol,
.hljs-attribute {
  color: #66d9ef;
}

.hljs-params,
.hljs-class .hljs-title {
  color: #f8f8f2;
}

.hljs-string,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable {
  color: #e6db74;
}

.hljs-comment,
.hljs-deletion,
.hljs-meta {
  color: #75715e;
}
.hljs::-webkit-scrollbar{width:8px;height:25px;}
.hljs::-webkit-scrollbar-thumb
{border-radius:2px; background:rgba(255,255,255,.2)}
</style>

Jika sudah, selanjutnya kita hanya perlu mencari tag </body> atau &lt;!--</body>--&gt;&lt;/body&gt; lalu letakan kode di bawah ini tepat di atas tag tersebut,

<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
hljs.initHighlightingOnLoad();hljs.configure({useBR:false});$("div.code").each(function(e,t){hljs.highlightBlock(t)});
//]]>
</script>

Jika sudah simpan tema.

Cara Menggunakan Syntax Highlighter di Blogger

Untuk menggunakan syntax highlighter yang sudah kita pasang tadi, silahkan ikuti langkah-langkah berikut ini.

Pertama, salin kode yang akan ditampilkan di blog seperti biasa

Kedua, buka mode tulis HTML lalu tambahkan tag berikut ini pada kode yang ingin ditampilkan di blog

<pre><code>

Masukan kode di sini

</code></pre>

Ketiga, agar syntax highlighter bisa menampilkan kode warna dengan lebih baik, lo bisa mengubah tag di atas menjadi seperti contoh berikut ini

<pre><code class="css">

Kode CSS

</code></pre>

Jika sudah, simpan postingan dan lihat sendiri hasilnya.