Cara Membuat Syntax Highlighter Untuk Penempatan Kode Pada Postingan Blog

Santos el Salam

7 Februari 2021

Saya kira anda yang mengunjungi postingan ini kebanyakan sudah tahu apa itu Syntax highlighter dan sedang mencari tahu cara membuatnya. Penggunaan fitur ini memang jamak dijumpai pada situs atau blog yang banyak membahas seputar tutorial blogging untuk meletakkan kode-kode dalam postingannya. Nama dari fitur ini memang keren sehingga tidak heran sebagian dari kita mungkin baru tahu kalau namanya Syntax highlighter. 

Mungkin anda bertanya-tanya mengapa blog saya ini tidak menggunakan fitur ini padahal blog ini juga kadang membahas tutorial blogging yang berisi kode-kode html?. Ya, saya memang sampai saat ini belum berminat memasangnya sehingga masih pakai cara manual atau menggunakan fitur blockquote untuk penempatan kode-kode tersebut. Meski begitu, saya tertarik mempelajari pemasangan Syntax highlighter ini dan hendak berbagi tutorial cara memasangnya pada artikel ini. 

Syntax Highlighter merupakan fitur khusus yang berfungsi untuk penempatan kode-kode pemrograman tertentu agar pengunjung lebih mudah dalam membaca atau mempelajarinya. Dengan fitur ini, pengunjung pun akan lebih mudah saat hendak mengcopy kode-kode seperti CSS, HTML, atau Javascript karena tampilannya memang berbeda dengan teks tulisan biasa pada postingan. Biasanya fitur ini juga membuat kode tersebut menjadi warna-warni sehingga tampak lebih menarik. 

Ada banyak cara tentang cara pembuatan fitur syntax highlighter ini. Salah satunya yaitu seperti tutorial di bawah ini. Jika anda hendak mengikuti tutorial ini, maka tampilannya nanti akan seperti screenshot berikut ini:

Bagaimana cara membuatnya?. Cara pemasangannya cukup mudah. Silahkan ikuti langkah-langkah di bawah ini. 

 

1. Buka akun blogger anda.

2. Pilih menu thema dan klik edit html.

3. Agar fitur ini dapat bekerja dengan baik, pastikan di template anda sudah terpasang kode jquery. Jika belum ada, silahkan copy kode di bawah ini dan letakkan di atas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

4. Selanjutnya salin kode di bawah ini dan letakkan juga di atas kode </head>

<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. Terakhir, salin kode berikut ini dan letakkan di atas kode </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.rawgit.com/Arlina-Design/frame/6c8ec00f/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;

//]]>

</script>

6. Simpan kembali template anda. 

Cara Penulisan Syntax Highlighter di Postingan

Ketika hendak menggunakan fitur ini untuk postingan anda, maka silahkan masuk edit postingan dan buka menggunakan mode html. Selanjutnya gunakan format berikut ini untuk cara penulisannya:

<pre> <code> __TAMBAHKAN KODE CSS/HTML/JAVASCRIPT DI SINI__ </code></pre>

Silahkan ganti kalimat yang ditandai warna merah di atas dengan kode Css, Html, atau kode Javascript yang hendak anda tambahkan. Jangan lupa parse terlebih dulu kode-kode tersebut sebelum menambahkannya. Misalnya anda bisa gunakan situs Blogcrowds untuk memparsenya. 

Setelah postingan rampung dan kode sudah ditambahkan pada Syntax Highlighternya, silahkan publish postingan dan anda bisa lihat hasilnya. 

Keren bukan?. Demikianlah tutorial tentang cara memasang Syntax highlighter untuk penempatan kode pada postingan Blog. Semoga bermanfaat.

Labels: Blogging

Thanks for reading Cara Membuat Syntax Highlighter Untuk Penempatan Kode Pada Postingan Blog. Please share...!

Facebook

Twitter