Cara Membuat Syntax Highlighter untuk Pasang Kode Html,CSS & Javascript Di Postingan Blog

Cara Membuat Syntax Highlighter untuk Pasang Kode Html,CSS & Javascript Di Postingan Blog

Oke pada kesempatan kali ini saya kan kasih tutorial bagaimana cara membuat syntatax higlight di blog yang biasanya para para blogger memggunakan untuk paste kan coding dari html, css atau pun lainyaa agar terlihat profesional,

Dengan menggunaka Syntax Highlighter pastinya membuat blog kita menjadi lebih mantap, keren dan para pengunjungnya pun juga merasa nyaman dan terlihat sangat professinonal

Syntax Highlighter merupakan fitur khusus pada proses pemindahan kode bahasa pemprograman tertentu dengan tulisan, warna texk, dan sama perses seperti kita menulis program di visualcode atau sablinetext

Oke langsung saja tutorial cara memasang Syntax Highlighter untuk blogspot:

1. Pertama, Login Blogger > Pilih Blog > Klik Menu Tema Dan klik Tombol Edit HTML > Tambahkan CSS DI BAWAH INI Sebelom </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>

Kemudian Tambahkan kode berikut Sebelom </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>

Setelah itu Save tema anda.

Selanjutnya Penulisan Syntax Highlighter Pada Post Blog anda.

Oke setelah anda menambahkan kode tadi di blog sobat selanjutnya anda buka postingan baru lalu masuk ke mode HTML di Postingan.

<pre><code>__TAMBAHKAN KODE CSS/HTML/JAVASCRIPT DI SINI__</code></pre>

Ganti Kode Yang Di tandai Merah Tersebut dengan kode Html,CSS,Javascript,

Oya jangan lupa Untuk Kode CSS,HTML,JAVASCRIPT. Silahkan Parse Corvet Terlebih dahulu Dengan ADS CONVERTE,  Agar Code anda Tadi Terlihat Di postingan blog anda

Demikian Tips Kali ini mengenai Cara membuat Syntax Highlighter untuk Pasang Kode HTML, CSS semoga bermanfaat. Terima Kasih.