Cara Membuat Syntax Highlighter Di Postingan Blogger - WESTOIKU

  Syntax Highlighter

Dalam pembuatan syntax highlighter pada postingan..

" Untuk anda pengguna blogspot harus menambahkan kode ke dalam template nya melalui edit html..

Karna dalam flatform blogspot belum mendukung fitur syntax highlighter..jadi kita harus menambahkan beberapa kode CSS dan JavaScript..

Memasang Syntax Highlighter Di Blog

Merupakan salah satu upaya untuk menjadikan postingan artikel kita terlihat lebih cantik dan keren..

Juga mudah di lihat oleh pengguna...

'' ini sangat cocok untuk blog yang membahas tentang koding atau bahasa pemrogram html..

Cara pasang syntax highlighter di postingan blog sebenarnya tidak terlalu sulit..

Anda bisa mengikuti tutorial ini,,jadi simak dengan baik agar tidak terjadi kesalahan..

Bagi yang suka dengan syntax highlighter 

Ini..

Bisa mengikuti langkah langkah berikut..

Berikut Cara Pasang Syntax Highlighter Di Blog

Catatan :

Sebelum Melakukan Pemasangan Syntax Highlighter di blogspot,,

Alangkah Baiknya Anda MemBackUp Dulu Template Anda,,Apabila Terjadi Kesalahan Anda Bisa Memulihkanya Dengan Mudah.

Silahkan Masuk Menu Edit Html Blog ;

Pastekan kode ini di atas kode </head>

Ok , salin code;

ini code nya gaes..

<style type='text/css'>
/* Syntax Highlighter Monokai Sublime */
.post-body pre code, .post-body code{font-family:Consolas,Monaco,&#39;Andale Mono&#39;,monospace;font-size:100%;font-weight:normal;}
.post-body pre{padding:7px;border-radius:4px;background-color:#23241f;word-spacing:normal;word-break:normal;line-height:1.4em!important;}
  pre,pre code{white-space: pre-wrap;}
.hljs {
  display: block;
  overflow-x: auto;
  padding:0 0.5em 0.5em;
margin:0;
  background: #23241f;
max-height:360px;
}

.hljs,
.hljs-tag,
.hljs-subst {
  color: #f8f8f2;
}

.hljs-strong,
.hljs-emphasis {
  color: #a8a8a2;
}

.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link {
  color: #ae81ff;
}

.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {
  color: #a6e22e;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-attr {
  color: #f92672;
}

.hljs-symbol,
.hljs-attribute {
  color: #66d9ef;
}

.hljs-params,
.hljs-class .hljs-title {
  color: #f8f8f2;
}

.hljs-string,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable {
  color: #e6db74;
}

.hljs-comment,
.hljs-deletion,
.hljs-meta {
  color: #75715e;
}
.hljs::-webkit-scrollbar{width:8px;height:25px;}
.hljs::-webkit-scrollbar-thumb
{border-radius:2px; background:rgba(255,255,255,.2)}
</style>

selanjutnya cari code </body>

Taruh di atasnya..

ini code nya gaes..

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js" type="text/javascript"/>
<script type='text/javascript'>
//<![CDATA[
hljs.initHighlightingOnLoad();hljs.configure({useBR:false});$("div.code").each(function(e,t){hljs.highlightBlock(t)});
//]]>
</script>

Terakhir Klik Simpan !!!

Cara Menggunakan Syntax Highlighter Di Postingan Blog..

Untuk penggunaanya menulislah seperti biasa..

Lalu untuk menaruh codenya seperti ini..

Ubah dari Compose ke Html

<pre><code>

Taruh code CSS/JavaScript/PHP posisi disini

</code></pre>