Pernahkah kau melihat postingan Blog/Website yang menyertakan kode-kode dalam warna yang berbeda-beda..?
Terlihat lebih Elegan dan Menarik, itulah yang terlintas dipikiran saya. Ingin rasanya, menciptakan menyerupai kode-kode 😋 yang bewarna menyerupai itu.
Nah, Bila kau ber-kecimpung dalam Dunia Programmer, niscaya tak absurd lagi dengan Syntax Highlighter.
#APA itu Syntax Highlighter ??
Syntax Highlighter yakni fitur dari Teks Editor yang dipakai untuk bahasa Pemograman, Script, atau Markup menyerupai HTML.Jadi, kegunaannya kurang lebih menyerupai Pulpen Stabilo ✏ untuk memperlihatkan 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 aba-aba 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 aba-aba 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 ketika ini dari highlightjs ialah 9.12.0.
2. Selesai deh 😄 kini tinggal uji coba. Buat Postingan gres di Blog kalian dan Copy Paste aba-aba yang ingin diberi warna dalam Mode Compose.
3. Lalu ubah Mode ke HTML. Kemudian apit aba-aba tersebut dengan tag <pre><code> .....kodenya....</pre></code>
INFO : Tag <pre> dan <code> wajib digunakan, alasannya yakni fungsi <pre> untuk Menampilkan sesuai dengan yang kita ketik. Sedangkan <code> untuk Menampilkan aba-aba 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 aba-aba berwarna di Blog dengan Highlight.js. Sampai jumpa di Tutorial berikutnya 😙
Syntax Highlighter
Tutorial Blogging
2. Selesai deh 😄 kini tinggal uji coba. Buat Postingan gres di Blog kalian dan Copy Paste aba-aba yang ingin diberi warna dalam Mode Compose.
3. Lalu ubah Mode ke HTML. Kemudian apit aba-aba tersebut dengan tag <pre><code> .....kodenya....</pre></code>
INFO : Tag <pre> dan <code> wajib digunakan, alasannya yakni fungsi <pre> untuk Menampilkan sesuai dengan yang kita ketik. Sedangkan <code> untuk Menampilkan aba-aba 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 aba-aba berwarna di Blog dengan Highlight.js. Sampai jumpa di Tutorial berikutnya 😙
Belum ada Komentar untuk "2 Cara Menciptakan Instruksi Warna-Warni Di Blog Dengan Syntax Highlighter"
Posting Komentar
Catatan Untuk Para Jejaker