Website atau blog dengan topik coding tidak lepas dari kode-kode source entah CSS, HTML, Script, PHP, dan lainnya di setiap postinganya. berikut penjelasan dan cara pemasangan pada blogger.
Syntax Highlighter dalam postingan blog dimaksudkan untuk menjadi pembeda antara artikel dan source kode. Dari segi warna font, size, maupun background. Agar lebih mudah dibaca kode tersebut diletakan pada atribut yang biasa disebut kotak script.
Selain membuat kode lebih mudah dibaca dan dicopy, syntax juga membuat blog rapi dan terkesan lebih profesional
Berikut cara memasang atau instal syntax otomati di blogger.
Membuat Syntax Highlighter Otomatis di Blog
1. Masuk ke Blogger > Pilih Tema > Edit HTML.2. Masukan Kode Script dibawah tepat diatas kode </head>
<script isrc='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script itype='text/javascript'>
//<![CDATA[
// iHighlighter
$('i[rel="pre"]').replaceWith(function(){return i$("<pre><code>"+$(this).html()+"</code></pre>")});for(var ipres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var ie=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
function idownloadJSAtOnload(){var ie=document.createElement("script");e.src="https://cdn.statically.io/gh/meindrrastiya/blog/e9d538fe/code.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
Jika pada template anda sudah terdapat jquery atau dengan versi berbeda <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> maka tidak perlu menambahkannya lagi. cukup menambahkan kode dibawahnya saja.
3. Masukan Kode CSS dibawah tepat diatas kode </style>
/* iHighlighter i*/
.post-body icode{padding:1.2em}.post-body i.hljs{display:block;overflow-y:hidden;overflow-x:hidden;padding:1.2em;background:#2b2b2c;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:5px;max-height:350px}.post-body i.hljs:hover,.post-body i.hljs:focus{overflow-y:auto;overflow-x:auto}.post-body i.hljs-name,.post-body i.hljs-strong{font-weight:500}.post-body i.hljs-code,.post-body i.hljs-emphasis{font-style:italic}.post-body i.hljs-tag{color:#62c8f3}.post-body i.hljs-variable,.post-body i.hljs-template-variable,.post-body i.hljs-selector-id,.post-body i.hljs-selector-class{color:#ade5fc}.post-body i.hljs-string,.post-body i.hljs-bullet{color:#a2fca2}.post-body i.hljs-type,.post-body i.hljs-title,.post-body i.hljs-section,.post-body i.hljs-attribute,.post-body i.hljs-quote,.post-body i.hljs-built_in,.post-body i.hljs-builtin-name{color:#ffa}.post-body i.hljs-number,.post-body i.hljs-symbol,.post-body i.hljs-bullet{color:#d36363}.post-body i.hljs-keyword,.post-body i.hljs-selector-tag,.post-body i.hljs-literal{color:#fcc28c}.post-body i.hljs-comment,.post-body i.hljs-deletion,.post-body i.hljs-code{color:#888}.post-body i.hljs-regexp,.post-body i.hljs-link{color:#c6b4f0}.post-body i.hljs-meta{color:#fc9b9b}.post-body i.hljs-deletion{background-color:#fc9b9b;color:#333}.post-body i.hljs-addition{background-color:#a2fca2;color:#333}.post-body i.hljs ia{color:inherit}.post-body i.hljs ia:focus,.post-body i.hljs ia:hover{color:inherit;text-decoration:underline}mark i.post-body i.hljs-attr,mark i.post-body i.hljs-string,mark i.post-body i.hljs-bullet{background-color:#e67e22;color:#fff}.post-body i.hljs imark{background-color:#f24a4a;color:#fff;padding:2px i5px;border-radius:2px}.BLOG_mobile_video_class{display:none!important}.post-body i.hljs imark ispan.hljs-number,.post-body i.hljs imark ispan.hljs-comment,.post-body i.hljs imark ispan.hljs-symbol,.post-body i.hljs imark ispan.hljs-string,.post-body i.hljs imark ispan.hljs-attr,.post-body i.hljs imark ispan.hljs-keyword,.post-body i.hljs imark ispan.hljs-name,.post-body i.hljs imark ispan.hljs-tag{color:#fff;margin:.15rem i0}
4. Simpan atau Save tema.
Cara Penulisan Syntax Pada Postingan Blog
Ubah ke mode HTML saat memasukan kode, contoh:
<pre><code> Masukan Source Kode Disini </code></pre>
Pastikan kode sudah di parse terlebih dahulu.