Syntax Highlighter Untuk Semua Jenis Template

Syntax Highlighter Untuk Semua Jenis Template

Hallo semua, pada halaman ini saya akan membagikan cara membuat membuat syntax highlighter dengan penggunaan universal, artinya bisa digunakan di semua jenis template.

Syntax highlighter adalah text editor yang menyoroti penulisan kode markup seperti HTML, CSS, dan JavaScript pada halaman web untuk mempermudah pengunjung mengenali keseluruhan kodenya.

Syntax Highlighter Untuk Semua Jenis Template

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

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>

Sekian pembahasan kali ini, jika ada yang ingin ditanyakan jangan ragu untuk menuliskannya pada kolom komentar. Baca juga artikel lainnya untuk mendapatkan tutorial seputar blogger.