Pernahkah kamu melihat postingan Blog/Website yang menyertakan kode-kode dalam warna yang berbeda-beda..?
Yaps,..! Biasanya dapat anda temukan pada situs yang membahas Tutorial Coding/Programming.
Terlihat lebih Elegan dan Menarik, itulah yang terlintas dipikiran saya. Ingin rasanya, membuat seperti kode-kode đ yang bewarna seperti itu.
Nah, Bila kamu ber-kecimpung dalam Dunia Programmer, pasti tak asing lagi dengan Syntax Highlighter.
#APA itu Syntax Highlighter ??
Syntax Highlighter adalah fitur dari Teks Editor yang digunakan untuk bahasa Pemograman, Script, atau Markup seperti HTML.Fitur ini menampilkan teks, terutama Source Code dalam berbagai warna dan font sesuai dengan kategori sehingga memudahkan penulisan dalam bahasa terstruktur seperti Bahasa Pemograman.
Jadi, kegunaannya kurang lebih seperti Pulpen Stabilo ✏ untuk memberikan tanda di sebuah tulisan tertentu dengan warna.
BACA JUGA : Gokil! Buat Halaman ABOUT ala Chatting di Blog
Cara Membuat Kode Berwarna dengan Syntax Highlighter
Untuk membuat kode bewarna tersebut, ada 2 cara yaitu Membuat sendiri dengan CSS atau Memasang script pada template Blog/Website kalian.
NAMUN, Tutorial kali ini saya hanya akan membahas bagaimana Cara Memasang Syntax Highlighter di Blog menggunakan Highlight.js. Berikut langkah-langkahnya :
1. Copy kode di bawah ini, dan Paste ke Template Blog kalian. Disarankan untuk meletakkan 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>
INFO : Versi terbaru saat ini dari highlightjs ialah 9.12.0.
2. Selesai deh đ sekarang tinggal uji coba. Buat Postingan baru di Blog kalian dan Copy Paste kode yang ingin diberi warna dalam Mode Compose.
3. Lalu ubah Mode ke HTML. Kemudian apit kode tersebut dengan tag <pre><code> .....kodenya....</pre></code>
INFO : Tag <pre> dan <code> wajib digunakan, karena fungsi <pre> untuk Menampilkan sesuai dengan yang kita ketik. Sedangkan <code> untuk Menampilkan kode Pemograman.
4. Sekarang coba Publikasikan/Pratinjau postingan kalian dan lihat hasilnya.
5. Bila ingin mengganti/mengubah warna kode, kalian bisa coba demonya DISINI. Sedangkan untuk mengubahnya, cukup ganti nama Style CSS dari Script CSS yang tadi.
Contoh pake Style CSS default :
Itulah Tutorial bagaimana membuat kode berwarna di Blog dengan Highlight.js. Sampai jumpa di Tutorial berikutnya đ
2. Selesai deh đ sekarang tinggal uji coba. Buat Postingan baru di Blog kalian dan Copy Paste kode yang ingin diberi warna dalam Mode Compose.
3. Lalu ubah Mode ke HTML. Kemudian apit kode tersebut dengan tag <pre><code> .....kodenya....</pre></code>
INFO : Tag <pre> dan <code> wajib digunakan, karena fungsi <pre> untuk Menampilkan sesuai dengan yang kita ketik. Sedangkan <code> untuk Menampilkan kode Pemograman.
4. Sekarang coba Publikasikan/Pratinjau postingan kalian dan lihat hasilnya.
5. Bila ingin mengganti/mengubah warna kode, kalian bisa coba demonya DISINI. Sedangkan untuk mengubahnya, cukup ganti nama Style CSS dari Script CSS yang tadi.
Contoh pake Style CSS default :
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/darcula.min.css"/>Itulah Tutorial bagaimana membuat kode berwarna di Blog dengan Highlight.js. Sampai jumpa di Tutorial berikutnya đ