📜 Bedah Skrip markdown.js

Tingkatkan Tampilan Markdown & Kode di Halaman HTML Kamu!

Ilustrasi Kode Markdown dan HTML

Apa Sih markdown.js Itu? 🤔

Gampangnya, markdown.js ini kayak asisten pribadi buat halaman web kamu. Tugasnya simpel tapi keren: nyulap tulisan bergaya Markdown (kayak yang biasa kamu pakai di GitHub atau chat) dan blok kode pemrograman biar tampil lebih cakep dan rapi di browser.

Jadi, kalau kamu nulis tebal atau *miring* langsung di paragraf HTML, skrip ini bakal otomatis mengubahnya jadi tag <strong> dan <em>. Begitu juga buat heading, link, list, bahkan blok kode, biar warnanya sesuai sintaks bahasa pemrograman.

Yang lebih asyik, skrip ini pinter! Dia cuma bakal ngunduh pustaka tambahan (namanya highlight.js) kalau di halaman kamu emang ada blok kode yang perlu diwarnai. Hemat kuota, kan? 😉

🚀 Mau Coba Periksa Kodenya?

Kamu bisa lihat dan ambil kode lengkap skrip markdown.js ini langsung dari repositori GitHub:

Lihat markdown.js di GitHub

Tinggal salin kodenya atau tautkan langsung ke file tersebut di halaman HTML kamu.

Gimana Cara Kerjanya? ⚙️

Skrip ini bekerja dalam beberapa langkah cerdas pas halaman web kamu dimuat:

  1. Cek Kebutuhan Warna Kode (ensureHighlightJS):

    Pertama, dia ngecek dulu, "Eh, ada pustaka buat warnain kode (hljs) belum di halaman ini?".

    • Kalau udah ada, syukurlah, lanjut!
    • Kalau belum ada, dia bakal otomatis 'manggil' pustaka highlight.js dan tema CSS-nya (pakai gaya GitHub Dark ✨) dari internet (CDN). Dia bakal nungguin sampai pustaka ini siap pakai.
  2. Sulap Markdown Jadi HTML (convertInlineMarkdown):

    Ini bagian intinya. Dia punya 'mantra-mantra' (pakai *regular expression) buat ngenalin sintaks Markdown yang umum:

    • # sampai ###### jadi heading <h1> sampai <h6>.
    • > Kutipan jadi <blockquote>.
    • Tebal, *Miring*, dan `Kode Inline` jadi tag HTML yang sesuai (<strong>, <em>, <code>).
    • [Teks Link](url) jadi link <a href="..."> yang otomatis buka di tab baru.
    • List - Item jadi <ul><li>...</li></ul> (untuk list sederhana).
    • Blok kode ```...``` atau ```js ... ``` diubah jadi struktur <pre><code class="language-js">...</code></pre>. Bahasa kodenya (kalau ada) bakal dicatat buat pewarnaan nanti.
    • Tabel Markdown sederhana juga coba diubah jadi tabel HTML (<table>).
  3. Cari Target & Terapkan Sulap (enhanceMarkdown):

    Skrip ini tidak sembarangan nyulap. Dia cuma nyari elemen-elemen tertentu:

    • Paragraf (<p>)
    • Item list (<li>)
    • Kutipan (<blockquote>)
    • Elemen apapun yang kamu tandai dengan kelas .markdown atau .markdown-body.

    Tapi, kalau kamu tidak mau satu elemen disentuh (misalnya, kamu sengaja mau nampilin teks Markdown mentah), tinggal kasih aja kelas no-md di elemen itu. Skrip ini bakal nurut dan melewatinya.

  4. Warnai Blok Kode (enhanceCodeBlocks):

    Setelah Markdown diubah, skrip ini nyari semua blok kode (<pre><code>). Dengan bantuan highlight.js yang tadi udah disiapin, tiap blok kode bakal diwarnai sesuai bahasa pemrogramannya (kalau dikenali dari kelasnya, misal language-javascript).

  5. Mulai Aksi! (Event Listener):

    Semua langkah di atas baru dijalankan kalau struktur dasar halaman HTML kamu udah siap (DOMContentLoaded). Ini biar tidak ganggu proses loading halaman.

✨ Fitur Kerennya Apa Aja?

  • Otomatis Jalan: Tinggal pasang, dia kerja sendiri pas halaman dibuka.
  • Markdown Jadi Kece: Tulisan Markdown kamu langsung tampil rapi sebagai HTML.
  • Kode Jadi Warna-warni: Blok kode lebih enak dibaca pakai syntax highlighting.
  • Pinter Hemat Kuota: Cuma ngunduh highlight.js kalau beneran ada kode di halaman.
  • Tidak Sembarangan: Cuma ngubah isi elemen target (p, li, blockquote, .markdown, .markdown-body).
  • Bisa Di-skip: Tambahin kelas no-md kalau tidak mau elemen tertentu diubah.
  • Tidak Bikin Lemot: Proses muat highlight.js dibikin asinkron biar tidak ganggu.

Intinya, markdown.js ini solusi praktis buat bikin halaman web yang nyampur HTML, Markdown, dan kode jadi lebih enak dilihat, tanpa perlu pusing mikirin build tools di server.