Cara Membuat Kotak Pembungkus Kode (Syntax Highlighter) di Postingan Blog

 

ARDINTORO |dot| COM - Syntax Highlighter merupakan fitur editor text yang di gunakan dalam bahasa pemograman skrip atau markah seperti JavaScript, HTML, CSS, dengan tampilan yang berwarna dalam format teks. Syntax Highlighter sangat baik di gunakan dalam postingan untuk memudahkan dalam pengeditan.

 

Di kesempatan kali ini saya ingin berbagi tutorial cara membuat kotak pembungkus kode script dengan menggunakan Syntax Highlighter. Dengan mengunakan kotak pembungkus ini, tampilanya blog menjadi lebih rapi dan juga friendly. Sebenarnya ini adalah artikel ke 2 yang memiliki tema sama yang pernah saya buat, artikel yang pertama adalah Cara Membuat Kotak Kode HTML atau CSS pada Postingan Blog. Silahkan Sobat pilih saja sesuai dengan keinginan dan tentunya harus di sesuaikan dengan karakter blog Sobat.

 

Sekedar info. Kode ini hanya bisa bekerja bila Sobat sudah mengunakan template yang menerapkan Jquey Library, contohnya adalah: "Jquery <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>". Di pasaran sudah banyak kok template-template yang mengunakan Jquey Library misalnya, VioMagz, Evo Magz, Vio Toko, Igniplex dll.

Untuk mengaplikasikan kotak pembungkus Syntax Highlighter ada 3 tahap. Sobat harus memasang dengan teliti, tahap demi tahap agar nggak terjadi error. Baik langung saja untuk memasangnya ikuti langkah-langkah berikut ini.

Langkah Pertama

Silahkan Sobat masuk di blog masing-masing, lalu buka Tema > Edit HTML (sebelum Kalian Edit HTML sebaiknya cadangkan dulu template atau tema. Agar bila terjadi error saat memasang kode mudah untuk di pulihkan). 

 

Selanjutnya cari kode berikut </head> atau &lt;/head&gt;&lt;!--<head/>--&gt untuk memudahkan pencarian sebaiknya gunakan CTRL+F. Bila sudah ketemu kodenya, silahkan copy kode di bawah ini dan paste tepat di atas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt dan klik simpan, tetapi jangan keluar dulu dari tampilan Edit HTML.


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

Langkah Kedua

Dilangkah kedua silahkan kembali Sobat cari kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; untuk memudahkan pencarian silahkan tekan CTRL+F. Bila sudah ketemu silahkan copy kode di bawah ini dan paste tepat di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; dan jangan lupa klik simpan.

 

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

Langkah Ketiga

Poin ketiga adalah langkah untuk memanggil kotak kode Syntax Highlighter di dalam postingan. Caranya Sobat copy kode di bawah ini dan paste di dalam postingan, pada saat membuat atau memasukkan kode harus dengan metode "Tampilan HTML".

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

 

Silahkan gati "COPY CODE DISINI" dengan code Sobat. Namun agar nggak terjadi error saat menampilkan kode di postingan, sebaiknya Sobat "Parse" terlebih dahulu kode script-nya. Untuk parse kode CSS, Javascript, HTML dan yang lainnya, silahkan melalui situs DISINI.

 

Baca Juga: Cara Membuat Tombol Demo dan Download di Blog

Ternyata mudah dalam membuat kotak pembungkus kode script dengan menggunakan Syntax Highlighter. Sobat bisa mempraktekkan tahap demi tahap agar berhasil, bila ada yang belum mengerti silahkan bertanya di kolom komentar, terimakasih.

Share :