Cara Memasang Syntax Highlighter Untuk Kode di Postingan Artikel Blog

Cara Memasang Syntax Highlighter di Halaman Artikel Blog

Teruntuk kamu seorang blogger yang menyajikan konten berisi sebuah script atau kode pasti akan kesulitan dalam menempatkan uraian kode tersebut. Nah kali ini saya akan membagikan bagaimana cara membuat syntax highlighter pada artikel postingan blog.

Sesuai dengan fungsinya syntax highlighter ini akan menjadi sebuah wadah untuk meletakkan dan menempatkan barisan kode kedalam tampilan halaman sebuah blog.

Selain memudahkan pengunjung menentukan letak kode atau script yang diberikan pada sebuah artikel, penggunaan syntax highlighter ini juga dapat memperindah dan membuat tampilan syntax kode tersebut terlihat bagus. dan blog akan terlihat lebih professional.

Ketika syntax highlighter ini telah sukses terpasang pada blog mu maka ketika kamu meletakkan sebuah kode / script akan terlihat seperti dibubuhi sebuah kolom khusus yang berwarna.

Cara kerja dari Syntax highlighter ini hampir mirip dengan blockquote hanya saja terdapat perbedaan pada akumulasi warna teks. namun syntax highlighter ini dinilai lebih efektif dan sangat cocok digunakan dibanding blockquote.

Cara Memasang Syntax Highlighter di Halaman Artikel Blog

1. Login ke blogger, Klik menu Tema > Edit HTML

2. Tambahkan kode CSS dibawah sebelum </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>

3. Kemudian tambahkan kode ini sebelum </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.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>
4. Selanjutnya klik Simpan tema.

Cara Penerapan Syntax Highlighter di Postingan Blog

Setelah memasang beberapa script kode tersebut ke template blog, maka ketika kamu hendak meletakkan atau membagikan kode kedalam postingan blog lakukan seperti cara berikut ini.

1. Buat postingan baru, tambahkan kode berikut pada tab HTML (bukan compose)

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

2. Ganti kode yang ditandai dengan kode HTML/CSS/JAVASCRIPT yang akan kamu bagikan. Khusus untuk kode JAVASCRIPT/HTML silahkan parse terlebih dahulu agar tidak terjadi error dengan Parse HTML for Blogger

3. Berikut contoh penerapan kode nya

<pre><code><h1>
<span>a</span>
<span>r</span>
<span>l</span>
<span>i</span>
<span>n</span>
<span>a</span>
</br>
<span>d</span>
<span>e</span>
<span>s</span>
<span>i</span>
<span>g</span>
<span>n</span>
</h1>
</code></pre>

Itulah bagaimana carai membuat dan memasang syntax highlighter di postingan blog kamu. cukup mudah bukan hanya tinggal menerapkan kode-kode khusus saja. Semoga bermanfaat.

Leave a Reply

Your email address will not be published. Required fields are marked *