√ Memasang Kotak Script Kode Highlighter di Blogger

Memasang Kotak Script Kode Highlighter di Blogger

5/14/2020

Syntax highlighter yang dimaksud disini adalah kotak yang nantinya akan dimasukkan beberapa script kode supaya tampilannya lebih menarik dan menyerupai kode editor sungguhan. Jika Sobat merupakan blogger ber-Niche tutorial pastinya akan sering berjumpa dengan kode-kode pemrogragan seperti CSS, HTML, dan JavaScript.

Umumnya kode highlighter memiliki warna-warni pada penulisan kodenya sesuai dengan bahasa kode dituliskan, untuk dapat membuatnya membutuhkan beberapa CSS dan JS didalamnya.

Pada kesempatan kali ini akan saya bagikan cara memasang kotak script highlighter, berikut adalah langkah-langkahnya:

1. Masuk ke dashboard Blogger

2. pilih 'tema'

3. kemudian pilih 'edit HTML'

4. Salin kode CSS berikut ini letakkan di atas kode </head> atau </head>

Sebelum melanjutkan silahkan cek pada template blogger masing-masing apakah sudah terdapat library jquery atau belum. Karena jika tidak menggunakan libary jqiery maka script tidak akan berjalan dengan baik.

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

5. Kemudian salin kode JS berikut ini, dan letakkan tepat di atas </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>

6. selesai, pilih 'save'

Cara penggunaan

Untuk menggunakan syntax highlighter di blog dalam artikel cukup memanggil <pre><code></code></pre>. Perlu di ketahui bahwa Kode ini hanya Berlaku di Tab HTML, bukan di Compose ( Dalam Artikel ).

<pre><code>
Masukkan kodenya di sini
</code></pre>

Perlu dicatat, ketika akan menuliskan kode tag HTML dan script JS, sebaiknya source code haruslah di pharse terlebih dahulu agar tidak menghancurkan tampilan website. Sobat bisa menuju link berikut ini Blogcrowds.

Begitu temen-temen cara memasang kode highlighter di Blogger, selamat mencoba

Teknisi Serba Bisa