Membuat Widget Script PreCode Syntax Highlighter Blogspot

Cara Membuat Widget Syntax Highlighter Keren di Blogger

Buka Blogger > Template > Edit HTML >
Langkah pertama, kamu harus memberi kode tambahan kedalam template blogger, caranya salin dulu kode CSS dibawah ini agar tulisannya berwarna.

Letakan kode di bawah ini, di atas kode ]]></b:skin> atau </style>

.hljs{display:block;overflow-x:auto;padding:.5em;background:#333;line-height: 1.3em!important;color:#fff}
.hljs span{font-family:Consolas,Monaco,'Andale Mono',monospace!important;font-weight:400}
.hljs-name,.hljs-strong{font-weight:bold}
.hljs-code,.hljs-emphasis{font-style:italic}
.hljs-tag{color:#62c8f3}
.hljs-selector-class,.hljs-selector-id,.hljs-template-variable,.hljs-variable{color:#ade5fc}
.hljs-bullet,.hljs-string{color:#a2fca2}
.hljs-attribute,.hljs-built_in,.hljs-builtin-name,.hljs-quote,.hljs-section,.hljs-title,.hljs-type{color:#ffa}
.hljs-bullet,.hljs-number,.hljs-symbol{color:#d36363}
.hljs-keyword,.hljs-literal,.hljs-selector-tag{color:#fcc28c}
.hljs-code,.hljs-comment,.hljs-deletion{color:#888}
.hljs-link,.hljs-regexp{color:#c6b4f0}
.hljs-meta{color:#fc9b9b}
.hljs-deletion{background-color:#fc9b9b;color:#333}
.hljs-addition{background-color:#a2fca2;color:#333}
.hljs a{color:inherit}
.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}

Langkah terakhir copy kode di bawah ini , paste di atas kode </head>

<script rel='stylesheet' src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
    <b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;index&quot;}'>
 &lt;/div&gt;
 </b:if>  

Kemudian Simpan.
Demikian cara membuat widget kode precode highlighter di blogspot. Semoga sukses.