1 menit baca

Menulis parser Markdown kustom untuk portofolio

Kenapa saya pilih menulis parser Markdown sendiri ketimbang memakai remark/rehype, dan bagaimana strukturnya.

Salah satu pilihan paling kontroversial di portofolio ini: menulis parser Markdown sendiri. Saya akan jelaskan kenapa, dan apa trade-off-nya.

Kenapa tidak pakai remark?

remark itu hebat. Tapi untuk konten yang saya tulis—paragraf, list, code block, link, sedikit blockquote—saya hanya pakai 10% dari fiturnya. Sisanya hanya menambah berat bundle.

Pendekatan

Parser saya melalui dua tahap:

  1. Tokenisasi line-based untuk block (heading, list, code fence, blockquote, hr).
  2. Single-pass inline parser untuk emphasis, strong, code inline, link.

ts const HEADINGRE = /^(#{1,6})\s+(.+?)\s#\s*$/; const FENCERE = /^(\w+)?\s*$/; `

Trade-off

  • ✅ Bundle parser ~5KB, di-tree-shake habis di klien (semua di server).
  • ✅ Saya paham setiap baris kodenya—bisa di-debug kapan pun.
  • ⛔ Tidak mendukung tabel, footnote, atau image syntax. Itu di-track sebagai roadmap Q1 2027.

Filosofi proyek: tulis sebanyak yang dipahami, tidak lebih.

Highlighter

Highlighter juga ditulis sendiri—regex-based, mengenal subset bahasa yang saya butuhkan: TS/TSX, JSON, CSS, HTML, shell. Lebih dari cukup untuk konten teknis singkat.