Cara Membuat Syntax Highlighter Di Blog Di Blogger

BangSiagian.id - Pada artikel ini saya akan memberikan tutorial cara membuat syntax highligter di blogger. Sebelumnya kita harus tahu terlebih dahulu apa itu syntax highligter dan apa fungsi .

Pengertian Syntax Highlighter
Syntax Highlighter adalah fitur editor teks yang digunakan untuk pemrograman, contohnya seperti HTML dan kode lainnya. Fitur ini menampilkan teks, terutama kode sumber, dalam berbagai warna dan font sesuai dengan kategori.

Fungsi Syntax Highlighter
Syntax highlighter akan membantu blogger atau programmer untuk membuat potongan kode secara online dengan mudah dengan tampilan yang rapi dan cantik.

Syntax highlighter ini banyak digunakan oleh para blogger yang memiliki blog yang membahas tentang tutorial blog.

Dengan menggunakan syntax highlighter dipostingan tutorial yang berbagi kode HTML/CSS/JS, maka hasilnya akan membuat postingan tertata rapi.

Saat ini sudah banyak pra blogger yang tutorial yang menggunakan syntax highlighter pada postingan tutorial mereka, termasuk blog bangsiagian.id ini.

Sekarang kalau kamu ingin menggunakan syntax highlighter pada blog kamu, lihat langkah-langkah cara membuat syntax highligter di blogger dibawah ini.

1. Login ke blogger
2. Pilih blog yang ingin kamu pasang syntax highlighter
3. Pilih menu tema / thema disisi kiri blog
4. Klik Edit HTML
5. Letakkan kode dibawah ini tepat diatas </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 letakkan kode dibawah ini tepat diatas 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>

Setelah itu klik tombol simpan template (save template)

Cara Membuat Syntax Highlighter di Postingan Blog

1. Klik tombol entri baru
2. Klik tombol HTML di menu postingan
3. Tambah kode dibawah ini didalam postingan.

<pre><code>TAMBAHKAN KODE HTML/CSS/JAVASCRIPT DI SINI</code></pre>

4. Terbitkan postingan
5. Lihat hasilnya

Jika kamu sudah mengikuti langkah-langkah penerapan syntax highlighter di blog diatas dengan benar, maka akan berhasil.

Share This