2 Cara Menciptakan Instruksi Warna-Warni Di Blog Dengan Syntax Highlighter
Pernahkah kau melihat postingan Blog/Website yang menyertakan kode-kode dalam warna yang berbeda-beda..?
Yaps,..! Biasanya sanggup anda temukan pada situs yang membahas Tutorial Coding/Programming.
Terlihat lebih Elegan dan Menarik, itulah yang terlintas dipikiran saya. Ingin rasanya, menciptakan ibarat kode-kode 😋 yang bewarna ibarat itu.
Nah, Bila kau ber-kecimpung dalam Dunia Programmer, niscaya tak abnormal lagi dengan Syntax Highlighter.
#APA itu Syntax Highlighter ??
Syntax Highlighter ialah fitur dari Teks Editor yang dipakai untuk bahasa Pemograman, Script, atau Markup ibarat HTML.Fitur ini menampilkan teks, terutama Source Code dalam banyak sekali warna dan font sesuai dengan kategori sehingga memudahkan penulisan dalam bahasa terstruktur ibarat Bahasa Pemograman.
Jadi, kegunaannya kurang lebih ibarat Pulpen Stabilo ✏ untuk menunjukkan tanda di sebuah goresan pena tertentu dengan warna.
BACA JUGA : Gokil! Buat Halaman ABOUT ala Chatting di Blog
Cara Membuat Kode Berwarna dengan Syntax Highlighter
Untuk menciptakan instruksi bewarna tersebut, ada 2 cara yaitu Membuat sendiri dengan CSS atau Memasang script pada template Blog/Website kalian.
NAMUN, Tutorial kali ini aku hanya akan membahas bagaimana Cara Memasang Syntax Highlighter di Blog memakai Highlight.js. Berikut langkah-langkahnya :
1. Copy instruksi di bawah ini, dan Paste ke Template Blog kalian. Disarankan untuk meletakkan sempurna 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 dikala ini dari highlightjs ialah 9.12.0.
2. Selesai deh 😄 kini tinggal uji coba. Buat Postingan gres di Blog kalian dan Copy Paste instruksi yang ingin diberi warna dalam Mode Compose.
3. Lalu ubah Mode ke HTML. Kemudian apit instruksi tersebut dengan tag <pre><code> .....kodenya....</pre></code>
INFO : Tag <pre> dan <code> wajib digunakan, alasannya ialah fungsi <pre> untuk Menampilkan sesuai dengan yang kita ketik. Sedangkan <code> untuk Menampilkan instruksi Pemograman.
4. Sekarang coba Publikasikan/Pratinjau postingan kalian dan lihat hasilnya.
5. Bila ingin mengganti/mengubah warna kode, kalian sanggup coba demonya DISINI. Sedangkan untuk mengubahnya, cukup ganti nama Style CSS dari Script CSS yang tadi.
Contoh pake Style CSS default :
Itulah Tutorial bagaimana menciptakan instruksi berwarna di Blog dengan Highlight.js. Sampai jumpa di Tutorial berikutnya 😙
2. Selesai deh 😄 kini tinggal uji coba. Buat Postingan gres di Blog kalian dan Copy Paste instruksi yang ingin diberi warna dalam Mode Compose.
3. Lalu ubah Mode ke HTML. Kemudian apit instruksi tersebut dengan tag <pre><code> .....kodenya....</pre></code>
INFO : Tag <pre> dan <code> wajib digunakan, alasannya ialah fungsi <pre> untuk Menampilkan sesuai dengan yang kita ketik. Sedangkan <code> untuk Menampilkan instruksi Pemograman.
4. Sekarang coba Publikasikan/Pratinjau postingan kalian dan lihat hasilnya.
5. Bila ingin mengganti/mengubah warna kode, kalian sanggup 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 menciptakan instruksi berwarna di Blog dengan Highlight.js. Sampai jumpa di Tutorial berikutnya 😙