Cara Membuat Kotak Pembungkus Script Di Postingan Blog

Image by gTheMesh form Pixabay

Sering kali kita mendapati sebuah artikel yang membagikan sebuah script atau kode tidak terlihat rapih dan berantakan yang membuat tampilan postingan atau blog sendiri menjadi friendly.

Sebenarnya cara itu sangat lah mudah jika memakai Syntax Highlighting pada template tersebut, Syntax Highlighting akan membungkus kode-kode tersebut didalam kotak yang akan membuat tampilan rapih dan friendly di blog kita.

Sekedar informasi mengenai Syntax Highlighting merupakan fitur editor text yang digunakan untuk bahasa pemograman, skrip, atau markup seperti HTML Fitur tersebut menampilkan teks pada kode sumber dalam berbagai warna dan font sesuai dengan kategori dan istilah (sumber : wikipedia)

Lantas bagaimana cara menerapkan Syntax Highlighting pada template blog kita, berikut ini cara nya :

Sekedar pemberitahuan kode ini akan bekerja apabila template yang digunakan sudah menerapkan Jquey Library contoh nya adalah : penggunaan Jquery <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

Langkah Pertama #1

Login ke Blog kalian lalu buka Tema > Edit HTML > Cari Kode ini </Head> atau &lt;/head&gt;&lt;!--<head/>--&gt; dengan bantuan CTRL + F dan paste kode berikut ini di atas kode tersebut :

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

Klik simpan dan jangan keluar dahulu pada tampilan edit HTML

Langkah Kedua #2

Kemudian cari kembali kode sebagai berikut ini pada template kalian </body> atau &lt;!--</body>--&gt;&lt;/body&gt; dan copy kode dibawah ini dan pastekan di atas kode tersebut :

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

Lalu simpan tema kalian.

Cara penggunaan Syntax Higlighting ini adalah dengan cara copy code berikut di bawah ini pada saat membuat postingan denga menggunakan Mode HTML

 <pre><code> COPY CODE KAMU DISINI </code></pre> 

Namun sebelum itu kode yang kamu akan tampilkan harus parse terlebih dahulu baru akan terbaca oleh atau tampil pada postingan kalian, kode yang  tidak di parse terlebih dahulu maka tidak akan tampil.

Untuk parse kode CSS, Javascript, HTML dan yang lainnya kalian dapat menggunakan link berikut ini :

https://www.lewatinaja.com/p/tool-parse-html-sederhana.html

Cukup mudah bukan, silahkan bagikan ke sosial media jika kalian menyukai artikel ini dan terimakasih telah berkunjung.