Jika kalian memiliki blog tutorial yang berkaitan dengan programmer, Syntax Highlighter bukanlah hal baru untuk kalian.
Syntax Highlighter merupakan sebuah fitur dari text editor yang digunakan untuk menulis bahasa programmer baik itu berupa script, markup HTML, css, php dan sebagainya.
Namun fitur ini memiliki kelebihan dalam menulis kode program, yaitu kode yang ditulis akan berwana-warna. Begitu pula dengan font yang digunakan bisa disesuaikan.
Membuat syntax highlighter bisa diterapkan pada blog blogger.
Memasang kode warna-warni pada blogger dengan Syntax Highlighter
Kenny tidak membagikan tutorial memasang Syntax Highlighter dari awal, kalian bisa melihat di postingan artikel sebelumnya.
Lihat Juga : Membuat Syntax Highlighter Blogger dengan CSS Mudah
Lihat Juga : Menulis Kode Script Di Postingan Blog
Jika kalian telah memasang Syntax Highlighter pada blog kalian, kalian bisa memulai merias tampilan warna pada Syntax Highlighter dengan mengikuti tutorial menambahkan warna pada Syntax Highlighter dibawah.
1. Log in Blogger
2. Klik Tema > Edit HTML
3. Copy kode dibawah ini dan pastekan tepat diatas tag </body>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/agate.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
4. Done
Cara menggunakan Syntax Highlighter berwarna ini bisa kalian ikuti tutorialnya dibawah.
Menggunakan Syntax Highlighter Berwarna pada blog
1. Buat Post / Artikel
2. Masuk Mode HTML
3. Saat akan menambahkan source kode program kalan gunakan tag seperti dibawah
<pre><code>
<!-- Pastekan kode yang akan dibuat menjadi berwarna disini -->
</code></pre>
4. Done
Catatan : Cara Menggunakan Syntax Highlighter Berwarna pada blog diatas digunakan apabila kalian belum memasang Syntax Highlighter yang lain seperti membuat Syntax Highlighter.
Lalu bagaimana jika ingin mengganti warna-warna pada Syntax Highlighter ini.
Kalian bisa menggantinya dengan ubah link CSS dari script Syntax Highlighternya. Seperti dibawah.
Ini CSS default dari highlightjs.org
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/>
Diganti dengan Style CSS yang lain
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/darcula.min.css"/>
Kalian bisa melihat-lihat style CSS apa saja dengan demo dari highlightjs.org disini.
Selesai sudah tutorial membuat kode program berwarnna pada blog. Semoga dapat membantu memberi warna pada blog kalian.
Terima kasih telah berkunjung.