Beranda
Blogging

Cara Membuat Kotak Script Syntax Highlighter Di Postingan Blog

Cara Membuat Kotak Script Syntax Highlighter Di Postingan Blog
Masrizki.eu.org - Kali ini saya akan memberikan tutorial Cara Membuat Kotak Script Syntax Highlighter Di Postingan Blog, untuk apa fungsinya memasang kotak script syntax highlighter ini?.

Fungsi dari kotak script syntax highlighter sendiri iyalah untuk menaruh sebuah script-script agar terlihat lebih rapih dan responsive, cocok nih buat sobat-sobat blogger yang nice nya lebih ke arah coding atau pemrograman dan yang lainnya.
Oke baik sob tanpa panjang lebar lagi di sini langsung saja kita ke tutorial nya di bawahIni.

CATATAN:

Jika template yang sedang sobat gunakan belum memiliki kode jQuery maka pasangkan terlebih dahulu kode di bawah ini, jika sudah ada lewati saja langkah-langkah ini.

Untuk penempatan kode nya sobat pergi ke menu tema lalu edit html setelah itu cari kode </head> untuk mempermudah menemukan nya, di keyboard sobat klik CTRL+F jika sudah ketemu pastekan kode di bawah ini tepat di atas kode </head>.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Cara Membuat Kotak Script Syntax Highlighter

1. Login terlebih dahulu ke akun blogger sobat, lalu pergi ke bagian Tema> Edit Html> lalu cari kode </head> pastekan kode di bawah ini tepat di atas kode </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>
2. Langkah kedua sobat cari kode </body> lalu sobat copy dan pastekan kode di bawah ini tepat di atas kode </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>
3. Dan terakhir simpan / save tema, untuk menggunakan nya saat sobat membuat postingan baru dan ingin menempatkan kotak script nya di bagian yang sobat inginkan tinggal sobat ubah dari mode penulis menjadi mode html, lalu copy kode di bawah ini setelah itu paste di bagian yang sobat inginkan. 
<pre><code> SCRIPT SOBAT DISINI </code></pre>
Jangan lupa setelah kode penutup </pre> berikan code <br/> jika sobat masih ingin melanjutkan menulis artikel sobat.

Agar berfungsi dengan baik, sebaiknya sobat parse html terlebih dahulu kode yang ingin sobat isikan untuk tools parse html nya silahkan sobat kunjungi website nya DISINI.

Sekian untuk tutorial Cara Membuat Kotak Script Syntax Highlighter Di Postingan Blog, semoga bermanfaat bagi para sobat-sobat blogger jika ada yang ingin sobat tanyakan silahkan tanya melalui komentar insyaallah akan secepatnya saya tanggapi terimakasih.

Posting Komentar