Cara Membuat Syntax Highlighter di Postingan Blog

Pernah dengar istilah Syntax Highlighter sebelumnya? Atau sudah tahu tapi bingung bagaimana cara memasang Syntax Highlighter di postingan blog?

Jadi, fungsi Syntax Highlighter adalah salah satu Script yang berfungsi membuat kode menjadi warna-warni di dalam artikel blog (BlogPosting / SinglePost).

Contohnya seperti ini:

Kodenya berwarna-warni, kan? Inilah yang dinamakan Syntax Highlighter for Blogger.

Fungsi Syntax Highlighter lainnya yaitu sebagai pembeda antara isi artikel dengan kode, agar pembaca tidak bingung, dan agar pembaca merasa nyaman dengan cara penyajian konten blog yang kita lakukan.

Cara Membuat Syntax Highlighter di Postingan Blog

Pertama, tambahkan dulu kode di bawah ini - di atas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

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

Selanjutnya tambahkan kode di bawah ini, di atas kode </body> atau &lt;!--</body>--&gt;&lt;/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.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>

Terakhir silakan ketuk Save Template karena kita sudah mengubah isi Template Blogger.

Cara Memasang Syntax Highlighter di Artikel Blog

Cara memasangnya cukup mudah, seperti biasa... Silakan pilih menu penulisan yang awalnya Compose, beralih ke mode HTML.

Selanjutnya, tambahkan kode sepert ini:

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

Jika Mengalami Error...

Perhatikan. Apabila teks Syntax Highlighter tidak muncul, biasanya itu disebabkan adanya kode jQuery yang belum terpasang.

Simpan kode di bawah ini:

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

Di atas kode:

</head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

Lalu ketuk tombol Save Template. Ok silakan dicoba dan lihat hasilnya.

Sumber: https://www.arlinadzgn.com/2018/06/cara-memasang-syntax-highlighter-di-blogger.html