Skip to content Skip to sidebar Skip to footer

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

Cara Membuat Kotak Kode Script di Postingan Blog
 
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/[email protected]/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.
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.

4 comments for "Cara Membuat Kotak Pembungkus Kode (Syntax Highlighter) di Postingan Blog"

  1. keren .....
    bermanfaat..... thank you for sharing

    ReplyDelete
  2. Bermanfaat banget.
    Terjawab sudah disini penasaranku caranya membuat kotak layar berwarna untuk kode html.
    Thanks for sharing, mas.

    ReplyDelete
  3. Bermanfaat sekali, Mas
    meski klo saya pasti auto pusing liat javascript, html, css. lemah akutu. hihihi...

    ReplyDelete

Jika ada yang Ingin Anda Tanyakan Terkait Artikel di atas Silahkan Bertanya Melalui Kolom Komentar Berikut ini, dengan Ketentuan :

1. Berkomentarlah dengan Sopan (No Spam, Sara dan Rasis).
2. Komentar di Moderasi. Bila berkomentar nggak sesuai dengan kebijakan Blogger maka nggak di terbitkan!.
3. Centang kotak Notify Me / Beri Tahu Saya untuk mendapatkan notifikasi komentar.
4. Happy Blogging 🙂.