Cara Memasang Syntax Highlighter di Blog
Ketika menulis sebuah artikel yang berkaitan dengan pemrograman tentunya kita akan sering berurusan dengan kode yang kompleks atau panjang, tanpa syntax highlighter kode akan sulit dibaca dan dipahami oleh pembaca. Oleh karena itu sebaiknya menggunakan library yang dapat memperapikan dan mempercantik tampilan kode pada blog kita. Sebelum itu, berikut pengertian mengenai syntax highlighter.
Pengertian Syntax Highlighter
Syntax Highlighter adalah sebuah library atau pustaka yang berfungsi mengubah tampilan teks biasa ke tampilan dalam format kode pemrograman dengan mengubah teks, warna, dan posisi teks sesuai dengan kode sebuah bahasa pemrograman sehingga ketika kode dicopy ke tulisan lain maka akan lebih mudah dibaca dan dipahami.
Selain menampilkan teks dalam format kode pemrograman, syntax highlighter juga dimakusdkan agar pembaca lebih nyaman dalam membaca kode yang ditampilkan dan membuat blog terasa lebih menarik dengan adanya fitur ini.
Pada tutorial kali ini saya akan menggunakan library highlighter.js berikut langkah-langkahnya.
Cara Memasang Syntax Highlighter di Blog
1. Login Blogger > Template > Klik Edit HTML
2. Letakkan Kode Ini Sebelum Tag </head>
<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js'/>
<script>hljs.highlightAll();</script>
3. Simpan Perubahan
Cara Penulisan Syntax Highlighter
Untuk menggunakan syntax highlighter yang telah dipasang sebelumnya pada postingan blog, selalu gunakan tag HTML di bawah ini pada source code baik itu JS, CSS, HTML, atau syntax bahasa pemrograman lainnya.
<pre>
<code>
Syntax kode program
</code>
</pre>Demikian cara memasang syntax highlighter di blog, semoga tulisan ini bermanfaat dan membantu kamu semua.
