~ WE WALK IN THE DARK, TO SERVE THE LIGHT ~
Beranda
Blogger

Membuat Syntax Highlighter Cantik dengan Prism.js

Pelajari cara membuat syntax highlighter keren dengan tema dark mode menggunakan Prism.js. Ikuti panduan mudah ini untuk meningkatkan tampilan.
Hai, para Ngenez! Kalau kamu suka bikin blog atau project yang membutuhkan tampilan kode yang cakep dan rapi, Prism.js adalah pilihan yang wajib dicoba. Kita nggak cuma bakal belajar cara setup Prism.js, tapi juga kasih sentuhan personal touch kayak custom padding biar lebih estetis. Yuk, langsung aja!
Membuat Syntax Highlighter Cantik dengan Prism.js

✨ Apa Itu Prism.js?

Prism.js adalah library lightweight buat nge-highlight syntax kode di halaman web. Dia simpel, cepat, dan support banyak bahasa pemrograman. Jadi cocok banget buat ditanam di blog kamu yang penuh tutorial atau artikel teknis.

🎯 Langkah-Langkah Membuat Syntax Highlighter

1. Persiapan File

Pertama, kamu perlu download atau link file Prism.js dan Prism.css.
Tapi kita akan menggunakan CDN biar lebih praktis:
  • Tambahkan kode ini tepat dibawah <head> HTML-mu:
    • <!-- Prism CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css"/>
<!-- Prism JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>

    Untuk Tema yang lain bisa di Cek Disini

    2. Tambahkan Block Code di HTML

    Gunakan tag <pre> dan <code> untuk menampilkan kode. Misalnya, kamu mau nge-highlight kode JavaScript: 
    <pre>
  <code class="language-javascript">
    [KODE HTML/CSS/JAVASCRIPT KAMU DISINI]
  </code>
</pre>
    Tambahin class language-[bahasa] sesuai kebutuhan. Prism bakal otomatis nge-highlight syntax-nya.
    Contoh:
  • Untuk HTML : <code class="language-html">
  • Untuk CSS : <code class="language-css">
  • Untuk Javascript : <code class="language-javascript">

    • Untuk Kode HTML, kamu harus parse dulu struktur kodenya Disini!

    3. Custom Padding Biar Lebih Manis

    Kadang default style-nya Prism terlihat agak kaku, jadi kita tambahin custom padding. Caranya gampang:
    Tambahkan CSS sebelum kode </style>: 
      pre {
  background: #f4f4f4; /* Warna latar */
  padding: 20px;      /* Custom padding */
  border-radius: 8px; /* Bikin pojok melengkung */
  overflow: auto;     /* Supaya bisa scroll */
  font-size: 16px;    /* Bikin teks lebih nyaman dilihat */
}
    Penjelasan:
  • background: Biar warnanya lebih adem.
  • padding: Tambahin ruang biar kode nggak nempel pinggir.
  • border-radius: Biar ada kesan elegan.
  • overflow: Biar kode panjang nggak bikin layout berantakan.

    • 4. Tambahkan Plugin (Opsional)

    Prism punya banyak plugin buat nambah fitur keren kayak line numbers.
    Contoh, kalau mau nambah nomor baris:
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"/>

    Update HTML:
    Tambahin class line-numbers di tag <pre>: 
    
<pre class="line-numbers">
  <code class="language-javascript">
    [KODE HTML/CSS/JAVASCRIPT KAMU DISINI]
  </code>
</pre>

    🚀 Hasil Akhir

    Setelah semuanya selesai, buka file HTML kamu di browser. Voila! Syntax highlight-nya bakal tampil cakep. Dan yang paling penting, kode kamu bakal lebih reader-friendly.

    💡 Tips Tambahan

  • Minify File: Gunakan versi minified buat performa lebih optimal.
  • Custom Tema: Kalau mau lebih personal, modifikasi CSS Prism sesuai gaya blog kamu.


    • DEMO SYNTAX HIGHLIGHTER



    Gampang kan? Sekarang nggak ada alasan lagi buat kode tampil monoton di blogmu. Yuk, cobain langsung! 😊
    Seseorang yang nggak tahu mau ngapain lagi... :) Karena udah di titik tergalau karena cinta selalu di tolak. :(