Saat membuat blog atau dokumentasi teknis, menampilkan potongan kode dengan tampilan yang rapi, memiliki penomoran baris (line number), dan warna sintaks (syntax highlight) sangat membantu pembaca memahami isi kode dengan lebih mudah. Artikel ini akan membahas cara membuat box kode yang menarik dan interaktif menggunakan PrismJS, salah satu library syntax highlighting populer.
Mengapa Perlu Syntax Highlight?
Memudahkan pembacaan kode: Warna berbeda membantu membedakan keyword, variabel, dan struktur kode.
Lebih profesional: Tampilan yang rapi menunjukkan kualitas dokumentasi atau blog kamu.
Interaktif dan enak dilihat: Menarik minat pembaca untuk mengeksplorasi kode lebih lanjut.
Cara Membuat Box Kode dengan PrismJS
1. Sertakan Library PrismJS
Kamu bisa memasukkan CSS dan JavaScript Prism dari CDN. Tempatkan di dalam tag <head>:
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet" />2. Gunakan Tag <pre> dan <code>
Buat elemen <pre> dan <code> dengan class sesuai bahasa yang digunakan. Tambahkan juga class line-numbers untuk penomoran baris:
<pre class="line-numbers">
<code class="language-javascript">
// Contoh JavaScript
function halo(nama) {
console.log("Halo, " + nama);
}
halo("Dunia");
</code>
</pre>3. Hasilnya
Box kode kamu akan tampil seperti berikut, lengkap dengan syntax highlight dan nomor baris (pastikan halaman sudah memuat PrismJS):
// Contoh JavaScript
function halo(nama) {
console.log("Halo, " + nama);
}
halo("Dunia");
Tips Tambahan
Gunakan PrismJS.com untuk memilih bahasa dan plugin sesuai kebutuhan.
Bisa digabung dengan tema dark mode agar tampilan blog kamu lebih modern.
Jika menggunakan CMS seperti Blogger atau WordPress, pastikan script dimuat di halaman tempat kode ditampilkan.
Kesimpulan
Dengan menggunakan PrismJS, kamu bisa membuat tampilan potongan kode yang lebih profesional dan mudah dibaca oleh pengunjung. Syntax highlight dan line number adalah fitur penting untuk blog bertema pemrograman, dokumentasi API, atau catatan belajar coding.