Cara Membuat Highlighter Code Box di Blog Jadi Warna-Warni

Diposting pada
Membuat kode box highlighter warna-warni di blog


Highlighter box kode di blog – Apabila kamu seorang blogger yang khususnya blog bertemakan blogging ataupun tentang pemrograman pasti pernah dong membuat tutorial yang mengharuskan kamu menuliskan code di artikel yang kamu buat. Contohnya seperti artikel ini yang dimana nanti mengharuskan kamu untuk mengcopy script atau code yang saya berikan.

Nah supaya script kode tidak berantakan di artikel kamu, sangat dianjurkan memasukkan kode tersebut ke dalam box code dan dapat membuat tampilan artikel kamu jauh lebih rapih. Namun untuk membuat box code sendiri ada beberapa cara atau teknik yang perlu kamu lakukan seperti membungkus kode kedalam <div> ataupun seperti tutorial ini yang menganjurkan membungkus kode kedalam <code>.

Baca juga: Cara Menghilangkan ?m=1 di URL Blog

Mungkin ada beberapa blogger yang sudah menerapkan pembuatan box code dengan dibungkus dengan <code>, namun tampilannya masih kurang keren. Disini saya akan memberitahu kamu bagaimana cara membuat kode box menjadi warna-warni seperti arlina design di blog kamu. Khusus blog dengan platform blogger.com atau sering disebut blogspot.

Kamu mau liat Demo? silahkan lihat pada gambar di atas ataupun box code di bawah ini biar tidak membuat kamu repot juga cuma masalah demo saja hehe.

Baca juga: Cara Membuat Blog Tidak Bisa Dicopas

Cara Membuat Highlighter Kode Box Berwarna di Blog

1. Pertama-tama kamu masuk ke edit html template kamu.
2. Pastikan kamu sudah memasang code jquery. Kalau belum silahkan copy kodenya di bawah ini lalu paste di atas kode </body>.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
3. Setelah dipastikan blog kamu sudah terpasang script jquery, selanjutnya copy kode di bawah ini lalu paste di atas kode </head>.
<style type='text/css'>
/* CSS Highlighter Amtread */
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 copy kode di bawah ini lalu paste di atas kode </body>.
<script type='text/javascript'>
//<![CDATA[
// JS Highlighter Amtread
$('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. Langkah terakhir tinggal kamu save template saja.

Cara Penerapan Script Highlighter Kode Box

Setelah kamu memasang kode-kode tadi dengan benar, langkah selanjutnya kamu tinggal mempelajari untuk cara menerapkan kode box ini ke dalam artikel kamu. Lihat saja gambar di bawah ini. Oh ya gunakan mode HTML untuk penerapan dalam membuat kode box.

Script atau kode yang ingin dimasukkan ke dalam kode box, harap diparse dulu melalui website yang menyediakan html parse. Bila sudah diparse, silahkan kamu masukkan kode tersebut ke kode box di artikel kamu. Oh ya biar lebih cepat, amtread juga menyediakan fitur parse html. Buka disini.

Baca juga: Cara Membuat Night Mode di Blog

Sekian artikel singkat dari amtread.com tentang cara membuat highlighter kode box untuk script di blog dengan platform blogger.com. Semoga tutorial dari amtread kali ini bermanfaat bagi kamu maupun orang lainnya. 

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *