Sebagai seorang blogger yang memberikan tips dan tutorial, tentu saja membutuhkan suatu fitur yang dapat menampilkan koding pada halaman postingan. Mungkin kalian bertanya bagaimana cara menampilkan koding yang ada dalam postingan blog yang kita tempatkan tersusun dengan rapi agar memudahkan kita atau pembaca blog dalam membedakan koding yang ada atau membedakan bahasa pemrograman tertentu.
Untuk mendapatkan hal tersebut kalian hanya cukup menggunakan fitur dari Syntax Highlighter. Syntax Highlighter adalah kode yang digunakan untuk membuat kode HTML, CSS, JavaSript dan bahasa pemrograman lainnya pada postingan blog dapat terlihat berwarna, dengan perubahan warna font sesuai dengan bahasa pemrograman tersebut.
Saya sendiri pun menerapkan dan menggunakan fitur Syntax Highlighter ini agar postingan koding pada blog saya bisa terlihat lebih rapi, kodenya terlihat lebih berwarna, nyaman untuk dilihat dan terlihat lebih profesional. Bagi anda yang tertarik untuk memasangnya berikut ini saya akan membagikan tutorialnya.
Cara Memasang Syntax Highlighter di Blog
1. Masuk kedalam blog anda > pilih Tema > kemudian pilih Edit HTML
2. salin kode ini dan letakkan tepat di atas </body> atau <!--</body>--></body>
3. Jika sudah, selanjutnya letakkan kode ini tepat berada di atas </head>
atau </head><!--<head/>-->
4. Jika sudah selanjutnya pilih Simpan Tema
Cara Menggunakan Syntax Highlighter pada Postingan Blog
1. Buka Postingan anda > pilih Entri Baru > pilih menu HTML bukan Compose
2. Kemudian masukkan kode ini di dalamnya
Sedangkan untuk membuat higlihter atau ingin menandai/ menstabilo kode seperti yang saya terapkan di atas, maka cukup sisipkan kode dibawah ini di dalamnya
Sumber Referensi : Arlina Design
<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>
3. Jika sudah, selanjutnya letakkan kode ini tepat berada di atas </head>
atau </head><!--<head/>-->
<style type='text/css'>
/* Syntax Highlighter Blogger */
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>
4. Jika sudah selanjutnya pilih Simpan Tema
Cara Menggunakan Syntax Highlighter pada Postingan Blog
Jika anda sudah memasang kode tersebut di dalam blog anda, lalu bagaimana untuk menerapkannya kedalam postingan kita, berikut langkah-langkahnya.
2. Kemudian masukkan kode ini di dalamnya
<pre><code>MASUKKAN-KODE-CSS-HTML-ATAU-JAVASCRIPT-DI-SINI</code></pre>Sedangkan untuk membuat higlihter atau ingin menandai/ menstabilo kode seperti yang saya terapkan di atas, maka cukup sisipkan kode dibawah ini di dalamnya
<mark>KODE-YANG-INGIN-DI-STABILO</mark>
Sekarang postingan koding anda terlihat lebih rapih dan profesional bukan. Saya rasa cukup sekian tutorial dari saya mengenai Cara Mudah Memasang Syntax Highlighter Pada Blogger, semoga tutorial ini dapat bermanfaat bagi kita semua.
Sumber Referensi : Arlina Design