Memasang Syntax Highlighter Otomatis Di Blogger Dengan Mudah

Memasang Syntax Highlighter Otomatis Di Blogger Dengan Mudah
AksesBlog.com -  Syntax Highlighter ini berguna untuk mempercantik tampilan dari kode-kode yang kita tampilkan di dalam postingan baik itu Css, Javascript, HTML maupun yang lainnya. Biasanya ini digunakan untuk blog yang membagikan tutorial seputar blogging.

Tampilannya menjadi lebih berwarna dan tentunya akan membuat para pembaca menjadi lebih nyaman ketika membaca artikel yang kita suguhkan.

Memasang Syntax Highlighter Di Blog

Memasangnya di blog itu sangatlah mudah karena hanya perlu beberapa langkah saja, pertama dan yang terpenting adalah copy seluruh kode dibawah ini tepat sebelum kode </body> pada blog kamu :
<script src = '//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>
Setelah itu kamu hanya perlu memasang style dari Syntax Highlighter tersebut dengan cara menambahakan kode CSS berikut ini didalam stylesheet pada template kamu :
/* HIGHLIGHT */
pre{margin:1.3em 0;white-space:pre;word-wrap:normal;overflow:auto;color:#84999b}
code{font-family:Monospace,Consolas,Monaco,'Andale Mono','Courier New',Courier;line-height:1.6em;color:#009688;font-size:12px}
pre code{display:block;padding:.5em;color:#839496}
::selection{background:#1066b9;color:white}
::-moz-selection{background:#1066b9;color:white}
.centered{text-align:center}
.highlight{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
.hljs{display:block;overflow-x:auto;padding:15px;background:#f9fcfc;color:black}
.xml .hljs-meta{color:#c0c0c0}
.hljs-comment,.hljs-quote{color:#007400}
.hljs-tag,.hljs-attribute,.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-name{color:#aa0d91}
.hljs-variable,.hljs-template-variable{color:#3F6E74}
.hljs-code,.hljs-string,.hljs-meta-string{color:#c41a16}
.hljs-regexp,.hljs-link{color:#0E0EFF}
.hljs-title,.hljs-symbol,.hljs-bullet,.hljs-number{color:#1c00cf}
.hljs-section,.hljs-meta{color:#643820}
.hljs-class .hljs-title,.hljs-type,.hljs-built_in,.hljs-builtin-name,.hljs-params{color:#5c2699}
.hljs-attr{color:#836C28}
.hljs-subst{color:#000}
.hljs-formula{background-color:#eee;font-style:italic}
.hljs-addition{background-color:#baeeba}
.hljs-deletion{background-color:#ffc8bd}
.hljs-selector-id,.hljs-selector-class{color:#9b703f}
.hljs-doctag,.hljs-strong{font-weight:bold}
.hljs-emphasis{font-style:italic}
Style CSS tersebut sudah saya modifikasi, jika kamu ingin style yang lain kamu bisa mengambil dan mencobanya sendiri pada link berikut :
https://github.com/highlightjs/highlight.js/tree/master/src/styles
Jika sudah semua kamu bisa menyimpan perubahannya.

Cara Penggunaan Syntax Highlighter Otomatis

Untuk memanggil style dari Syntax Highlighter ini, kamu perlu menggunakan kode pemanggil <pre><code> dan penutup </code></pre> atau akan tampak seperti berikut :
<pre><code> 
Kode css, javascript, maupun jquery letakkan disini
</pre></code>
Kamu bisa menggunakan Menu HTML (bukan compose) yang ada ketika kamu ingin membuat sebuah postingan di blog, dan jangan lupa juga kode-kodenya untuk di parse terlebih dahalu agar bisa terbaca dengan baik.
Referensi : https://www.bungfrangki.com/2015/07/membuat-syntax-highlighter-otomatis-di-blogger.html

0 Response to "Memasang Syntax Highlighter Otomatis Di Blogger Dengan Mudah"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel