Cara Membuat Syntax Highlighter Untuk Semua Jenis Template

Halo semua! di artikel ini, saya akan membagikan cara membuat syntax highlighter universal, yang bisa digunakan di semua jenis template Blogger, termasuk template standar maupun custom.

Apa Itu Syntax Highlighter?

Syntax highlighter adalah fitur yang menampilkan potongan kode dengan penanda warna atau format tertentu, seperti pada HTML, CSS, JavaScript, dan bahasa pemrograman lainnya. Ini sangat membantu pembaca agar lebih mudah memahami struktur kode yang kamu bagikan di blog.

Lankah-Langkah Membuat Syntax Highlighter di Blogger

Buka dashboard blogger > tema > edit html lalu salin css di bawah ini dan tempelkan diatas kode ]]></b:skin> atau </style>

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}

Selanjutnya salin javascript dibawah ini dan letakan diatas </body>

<script>
//<![CDATA[
$('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>

Pastikan template yang kamu gunakan sudah menggunakan jQuery berikut ini

<script async="async" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"/>

Jika sudah ada langsung aja simpan dan sebaliknya jika belum silahkan ditambahkan.

Cara Menggunakan Syntax Highlighter

Sama seperti penulisan syntax pada umumnya yaitu, parse terlebih dahulu kode script yang akan digunakan lalu bungkus kode script yang telah di parse dengan tag syntax highlighter seperti berikut:

<pre><code>Kode sript disini...</code></pre>

Selain itu kalian juga bisa menambahkan class pada tag pre untuk memberikan keterangan dari kode yang kalian bagikan, berikut contohnya:

<pre class='html'><code>untuk jenis kode html<code></pre>

<pre class='css'><code>untuk jenis kode css</code></pre>

<pre class='js'><code>untuk jenis kode javascript</code></pre>

Penutup

Itulah cara membuat syntax highlighter universal untuk Blogger, yang bisa kamu gunakan di semua jenis template. Dengan highlight kode yang jelas dan rapi, blog kamu akan terlihat lebih profesional — apalagi jika kamu sering membagikan tutorial coding.

Kalau ada yang ingin ditanyakan, silakan tulis di kolom komentar. Dan jangan lupa baca artikel lainnya untuk menambah pengetahuan kamu seputar blogging dan desain blog.