Cara Mudah Membuat Syntax Highlighter untuk Blogger


Cara Membuat Syntax Highlighter untuk Blogger - Ketika kalian sering membaca tutorial tentang HTML, CSS, maupun Javascript untuk mendalami ilmu coding kalian khususnya yang akan diaplikasikan di dunia blogging, maka kalian akan sering melihat script yang dimasukan dalam sebuah kotak dengan huruf yang berwarna-warna. 

Nah, maksud dari warna-warna kode yang berbeda itu juga akan memberikan kesan colorful seperti mempercantik tampilan dan juga mempermudah para audien untuk mengenali kode yang ditampilkan tergolong pada katergori apa.

Fitur Syntax Highlighter biasanya dipakai oleh para para situs tutorial blogger terkenal seperti kompiajaib, arlinadzgn dan masih banyak lagi.

Tetapi, tidak ada salahnya juga jika kalian yang membaca artikel ini ( termasuk saya ) untuk menerapkannya bukan? bukan untuk gengsi, profesionalitas tetapi untuk pantas-pantas saja ketika sewaktu-waktu kita akan membagikan tutorial berkedok script.

Contoh Syntax Highlighter :


Bukankah kalian sering melihatnya? apalagi jika kalian sering mengoprek template pada blogger. Nah, itulah yang dinamakan dengan Syntax Highlighter atau bisa kita anggap sebagai wadah atau kotak script.

Pengertian Syntax Highlighter

Syntax Highlighter adalah sebuah fitur yang secara khusus untuk mengatasi pemindahan kode bahasa pemrograman tertentu dengan warna teks, tulisan. komposisi, posisi yang serupa dengan yang ada pada kode bahasa pemrograman itu sendiri yang dimaksudkan untuk dipindahkan alias disalin dalam bentuk lain agar lebih mudah dibaca dan dipahami.

Memiliki mekanisme kerja yang hampir sama dengan blockquote, hanya saja, blockquote hanya menawarkan satu warna saja sehingga kurang relavan jika digunakan untuk menuliskan kode, bukan begitu? untuk itulah ada fitur yang secara custom kita bisa tambahkan untuk membantu menulis bahasa pemrograman didalam blog kita. Lalu, bagaimana cara memasangnya?

Cara Memasang Syntax Highlighter

1. Pertama, tentunya kalian harus login ke blogger menggunakan akun kalian dong

2. Pilih blog yang akan dipasang > pilih menu Tema dan klik tombol Edit HTML

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

4. Kemudian, tambahkan kode dibawah ini tepas diatas 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://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>

5. Selesai, sekarang kalian bisa menyimpan perubahan template kalian.

Penerapan Syntax Highlighter

Nah, pasti ada kode pemanggil khusus dong untuk menerapkannya. Penerapannya sangat mudah, ketika kalian ingin menggunakan kotak script ini, beralihlah dari compose menuju HTML dan masukkan kode dibawah.



<pre><code>_KODE_</code></pre>

Nah, gimana sobat? mudah bukan? Tetapi perlu diingat, untuk kode berjenis HTML/Javascript, kalian harus memparsenya terlebih dahulu yang bisa kalian lakukan di HTML CONVERTER

sumber kode : https://www.arlinadzgn.com/2018/06/cara-memasang-syntax-highlighter-di-blogger.html

Ada alasan kenapa saya membagikan ulang di blog saya. Yang pertama adalah untuk sekedar menyebarluaskan dan yang kedua adalah untuk dokumentasi saya sendiri agar ketika saya ingin memasang di blog saya, saya tidak perlu searching atau mengunjungi blog lain.

Nah, mungkin cukup sekian artikel kali ini, semoga bermanfaat dan apabila terdapat salah kata, mohon dimaafkan. Terima kasih.

Subscribe to receive free email updates: