Cara Membuat dan Memasang Syntax Highlighter di Blogger

Penggunaan Syntax Highlighter di blogger adalah salah satu hal yang dapat mempercantik tampilan blog. Selain membuat tampilan blog menjadi lebih cantik dan terkesan prosefional, pemasangan syntax highlighter juga dapat mempermudah pengunjung dalam membaca jenis kode yang tertulis.

Cara Membuat dan Memasang Syntax Highlighter di Blogger

Apa Itu Syntax Highlighter ?

Syntax Highlighter adalah fitur khusus text editor yang menyoroti penulisan berbagai jenis bahasa pemrograman untuk mempermudah dalam membaca atau mempelajarinya. Kode bahasa yang disoroti syntax highlighter akan sama persis dengan kode bahasa pemrograman itu sendiri, mulai dari tulisan, warna teks, dan posisi teks.

Bagaimana Cara kerja Syntax Highlighter ?

Sebenarnya cara kerja dari syntax highlighter hampir sama dengan blockquote. Akan tetapi yang membedakan antara keduanya yakni untuk warna teks pada fitur blockquote hanya ada satu warna saja dan untuk merubahnya harus dilakukan secara manual. Sedangkan pada fitur syntax highlighter, teks yang ada didalam kode pemrograman akan otomatis mempunyai warna yang berbeda sesuai bahasa pemrograman itu sendiri. Itulah mengapa jika memasang syntax highlighter dapat membuat kode pemrograman menjadi warna-warni.
Efek dari memasang Syntax Highlighter yaitu pengunjung akan merasa lebih nyaman dalam membaca isi artikel blog. Oleh karena itu, Syntax Highlighter ini sangat cocok untuk dipasang pada blog dengan niche tutorial blogging yang selalu menyisipkan kode CSS, HTML, Javascript, maupun Jquery dalam postingannya.

Cara Memasang Syntax Highlighter di Blogger

Sebelum memasang Syntax Highlighter pastikan didalam blog sudah ditambahkan jquery library. Berikut ini adalah contoh jquery library.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

1. Pertama login ke akun Blogger kalian.

2. Setelah itu pilih Tema > Edit HTML.

3. Kemudian tambahkan kode CSS dibawah ini diatas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;.

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

Cara Membuat dan Memasang Syntax Highlighter di Blogger

4. Selanjutnya tambahkan kode berikut sebelum kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;.

<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://rawcdn.githack.com/muhamadmiftahul/Kang-Tutorial/444c1f0475610932f0a3c26085be19076b3d930c/highlighter.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

Cara Membuat dan Memasang Syntax Highlighter di Blogger

5. Setelah itu simpan tema.

Cara Menggunakan Syntax Highlighter di Postingan Blog

Ketika sedang menulis artikel dan akan menyisipkan kode script (CSS, HTML, atau javascript) pastikan kode tersebut diparse terlebih dahulu agar dapat aktif dan berfungsi dengan semestinya.
Setelah itu ubah dari mode Compose ke mode HTML dan untuk memanggil syntax highlighter gunakan markup HTML dengan format seperti dibawah ini.

<pre><code>
Letakkan Script Disini (HTML, CSS, Javascript)
</code></pre>

Cara Membuat dan Memasang Syntax Highlighter di Blogger
Contoh Penulisan dengan Syntax Highlighter
Untuk melihat contoh hasilnya silahkan klik Demo.


Demikian artikel tentang bagaimana Cara Membuat dan Memasang Syntax Highlighter di Blogger. Semoga berhasil diterapkan di blog kalian dan apabila ada yang ingin ditanyakan silahkan tulis di kolom komentar. Terimakasih dan selamat mencoba.

Artikel Terkait

Buka Komentar
Tutup Komentar

Belum ada Komentar untuk "Cara Membuat dan Memasang Syntax Highlighter di Blogger"

Posting Komentar

Jika ada yang masih kurang jelas, silahkan untuk bertanya pada kolom komentar di bawah ini atau dengan menghubungi kami di halaman kontak.

1. Centang kotak Notify me/Beri tahu saya untuk mendapatkan notifikasi komentar.
2. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel