Cara Memasang Syntax Highlighter Seperti Sublime Text

Memasang Syntax Highlighter di Blogger merupakan salah satu upaya untuk mempercantik tampilan blog. Utamanya blog yang membahas koding atau bahasa pemrograman. Dengan Syntax Highlighting, tampilan kode menjadi berwarna-warni dan tersusun rapih, berdasarkan kategori kode.

Sayangnya di platform Blogger fitur Syntax Highlighter ini tidak hadir secara default. Yang ada hanyalah Blockquote. Yang jika diatur sedemikian rupa menggunakan CSS, hanya akan menampilkan satu-kesatuan warna, pada saat kita memblok kode pemrograman dengan Blockquote.

Namun begitu, kita bisa memasang Syntax Highlighter di Blogger dengan mudahnya. Menariknya, bagi yang suka dengan style Syntax Highlighter seperti software Sublime Text 3, Anda bisa terapkan dengan beberapa langkah berikut ini.

Cara Pasang Syntax Highlighting Seperti Sublime Text 

Silahkan masu ke Edit HTML Blogger. Letakkan kode di bawah ini di atas kode </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>

Selanjutnya, cari kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; lalu tambahkan kode berikut di atas kode tadi:

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

Setelah itu, Simpan Tema.

Result

Cara Menggunakan Syntax Highlighter di Postingan Blog

Mula-mula, letakkan kodenya di tab Compose. Setelah itu silahkan klik tab HTML. Lalu edit kodenya seperti ini:

<pre><code>

Kode CSS/JavaScript/PHP posisinya disini

</code></pre>

Perhatikan langkah-langkahnya pada gambar berikut:

Lalu seperti ini:

Catatan:
Mengapa harus meletakkan kode di tab Compose terlebih dahulu? Agar kode berupa JavaScript, jQuery, PHP, JSON, HTML dan lainnya akan di convert secara otomatis. Jadi Anda tidak butuh lagi HTML Converter untuk mengkonversi kode.

Penulisan Syntax Highlighter Lebih Lanjut

Setidaknya terdapat lebih dari 30 kategori atau jenis kode yang bisa Anda sesuaikan saat menulis dengan Syntax Highlighter.

Mulai dari Apache, Bash, CoffeeScript, C++, C#, CSS, Diff, Go, HTTP, TOML (INI), Java, JavaScript, JSON (JSON with Comments), Kotlin, Less, Lua, Makefile, Markdown, Nginx, Objective-C, Perl, PHP, plaintext, Properties, Python, Ruby, Rust, SCSS, Shell Session, SQL, Swift, TypeScript, HTML, XML, dan YAML.

Hanya saja yang sering kita lihat dan gunakan adalah CSS, JavaScript, HTML dan PHP.

Nah, biar Syntax Highlighter menampilkan variasi pewarnaan pada kode dengan lebih spesifik, Anda bisa buat formatnya seperti ini:

<pre><code class="css">

Kode CSS disini

</code></pre>

Atau:

<pre><code class="javascript">

Kode JavaScript disini

</code></pre>

Atau:

<pre><code class="html">

Kode HTML disini

</code></pre>

Atau:

<pre><code class="php">

Kode PHP disini

</code></pre>

Dan seterusnya.

Segitu dulu tutorial kali ini. Jika ada pertanyaan, mari berjumpa pada kolom komentar di bawah. Semoga bermanfaat!

Masih terkait: Membuat Syntax Highlighter Otomatis Terbaru di Blogger