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 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.Fitur ini menampilkan teks, terutama Source Code dalam banyak sekali warna dan font sesuai dengan kategori sehingga memudahkan penulisan dalam bahasa terstruktur menyerupai Bahasa Pemograman.
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