Menggunakan Syntax Highlight untuk Blog

Iyankdesu
1 min readAug 27, 2022

--

Syntax highlight umumnya digunakan pada website dimana kontennya terdapat potongan kode programming, sehingga tampilan kode pada website menjadi berwarna seperti pada text editor dan memudahkan orang yang membacanya.

Untuk melakukannya, dapat dengan menggunakan sebuah framework javascript yaitu hightlight js yang berguna untuk memberikan highlight dengan dukungan banyak jenis bahasa dan tema. Website resminya dapat di akses melalui URL https://highlightjs.org dan untuk tema serta jenis bahasa yang disupportnya dapat diliat demonya di URL https://highlightjs.org/static/demo/.

Instalasi serta dan penggunaannya pun sangat mudah, cukup dengan melakukan copy paste dengan mengikuti dokumentasi yang telah disediakan di website resminya.

Penggunaan

Untuk menggunakan versi pre-build highlight.js dengan 34 support bahasa yang paling sering digunakan dan di hosting di CDN :

Copy paste baris kode berikut kedalam file html website, sebelum tag penutup head.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Setelah selesai maka baris kode yang dibuat dengan tag pre akan diberi syntax highlighting.

--

--