Cara membuat syntax highlighter di Blogger

Devanart- Oke kali ini Dvanart akan memberikan tutorial tentang Cara membuat syntax highlighter di Blogger. Sebelum kita lanjut ke tutorial nya kamu harud tau terlebih dahulu aoa itu syntax highlighter dan fungsinya untuk apa?.

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 dan tampilan menjadi rapih dan cantik.

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

Dengan kita mennggunakan syntax highlighter dipostingan tutorial yang berbagi kode HTML/CSS/JS, maka hasil akan membuat setiap postingan kita menjadi rata dan rapih.

Saat ini sudah banyak para blogger yang memberikan tutorial yang menggunakan syntax highlighter pada postingan tutorial mereka, termasuk blog saya dvanart.

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

1. Login ke blogger

2. Pilih blog yang akan kamu pasang syntax highlighter

3. Pilih menu tema/theme disisi kiri blog

4. Klik Edit HTML

5. Letakan kode dibawah ini tepat di atas </head> atau <!--</head>-- atau ></head>


<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 letakan kode dibawah ini tepat diatas kode </body> atau </body>


<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 save template ( save template )

Cara Membuat Syntax Highlighter di Postingan Blogger

1. Klik tombol entri baru

2. Tambah kode dibawah ini dalam postingan