Belajar Shiki Rehype Pretty Code - Sejarah, Latar Belakang & Mengapa Membutuhkan Kombinasi Ini

#Pendahuluan

Sebelum belajar cara memakai Shiki dan rehype-pretty-code, kalian perlu tahu kenapa kombinasi ini ada. Syntax highlighting yang tampak sederhana di permukaan ternyata menyimpan masalah panjang: akurasi warna, kecepatan render, ukuran bundle, dan fitur-fitur code block modern seperti line highlighting dan diff.

Episode 1 membawa kalian menyusuri evolusi syntax highlighting — dari regex sederhana, kelahiran TextMate grammar, munculnya Shiki tahun 2018, hingga lahirnya rehype-pretty-code tahun 2022. Di akhir episode, kalian akan mengerti masalah spesifik yang diselesaikan kombinasi ini dan mengapa pendekatan ini menjadi standar di ekosistem konten modern.

#Evolusi Syntax Highlighting

#Era Regex: highlight.js dan Prism

Pendekatan tertua memakai regex untuk mengenali kata kunci. Library seperti highlight.js dan Prism bekerja dengan pola pencocokan teks: jika sebuah kata cocok dengan pola kata kunci bahasa tertentu, kata itu diberi warna. Pendekatan ini ringan dan mudah dipakai, tetapi punya keterbatasan fundamental.

Ilustrasi pendekatan regex

const keywords = ["const", "function", "return"];
const tokens = code.split(/(\s+)/).map((part) =>
  keywords.includes(part) ? `<b>${part}</b>` : part,
);

Masalahnya jelas: regex tidak memahami konteks. Kata function di dalam string literal, komentar, atau template literal akan tetap diwarnai sebagai kata kunci. Akibatnya, highlight yang dihasilkan tidak akurat untuk kode yang kompleks, dan tidak ada garansi kesamaan dengan apa yang kalian lihat di editor.

#TextMate Grammar: Standar VSCode

Terobosan datang dari ekosistem VSCode. Editor ini memakai TextMate grammar — kumpulan aturan berbasis pola yang dipecah menjadi scope (seperti keyword.control, string.quoted, dan entity.name.function). Grammar jauh lebih presisi daripada regex tunggal karena mendukung aturan bersarang dan konteks berlapis.

Konsep kunci yang perlu kalian pegang:

Tokenization: teks kode dipecah menjadi token, masing-masing dengan scope.
Scope: label semantik seperti keyword atau string, bukan warna langsung.
Theme: memetakan scope ke warna tertentu, misalnya scope keyword ke warna ungu.

Pemisahan scope dan theme inilah yang membuat warna bisa berganti-ganti tanpa mengubah aturan grammar.

#Shiki: Lahir dari Kebutuhan Akurasi

Shiki dibuat tahun 2018 oleh Pine Wu dengan nama yang merupakan singkatan dari Syntax Highlighter for Kanji — kode yang terlihat seperti tulisan Kanji di mata orang Jepang. Tujuannya sederhana: membawa tokenisasi VSCode ke dalam kode yang dirender di halaman web.

Seiring waktu, Shiki dirawat oleh Anthony Fu dan komunitas. Tahun 2026, Shiki berada di versi 4.x dengan arsitektur yang dirombak: langs, themes, dan transformers dipisah menjadi package tersendiri seperti @shikijs/langs, @shikijs/themes, dan @shikijs/transformers. Kita akan membedah API baru ini di episode 18 dan 20.

#Masalah yang Diselesaikan Kombinasi Ini

#Akurasi Warna yang Sama dengan Editor

Dengan memakai grammar dan theme yang sama dengan VSCode, Shiki menghasilkan warna yang identik persis dengan yang kalian lihat di editor. Ini bukan sekadar soal estetika: untuk dokumentasi teknis, konsistensi warna membantu pembaca memetakan kode ke pengalaman yang sudah dikenal.

#Tanpa JavaScript di Sisi Klien

Karena Shiki berjalan di build-time (SSG), HTML yang dihasilkan sudah berisi span berwarna. Browser tidak perlu menjalankan JavaScript untuk mewarnai kode. Ini adalah perbedaan besar dari highlight.js dan Prism yang pada banyak setup justru berjalan di sisi klien dan memperlambat halaman.

#Fitur Code Block Modern

Shiki sendiri hanya menangani tokenisasi. Fitur seperti line highlighting, diff, title, dan word highlight datang dari rehype-pretty-code yang membaca meta string pada fenced code block:

Cek versi di registry

npm view shiki version
npm view rehype-pretty-code version

Perintah npm view shiki version menampilkan versi terbaru dari registry. Ini cara tercepat untuk memastikan fitur yang kita bahas masih berlaku.

#Mengapa Shiki dan rehype-pretty-code Digabung

Keduanya saling melengkapi di pipeline konten:

Shiki menyediakan mesin highlight: tokenisasi TextMate, Oniguruma WASM, dan pemetaan theme.
rehype-pretty-code menyediakan pengalaman code block: mengubah node <pre> dan <code> menjadi <figure> dengan title, caption, data attributes untuk line dan word highlighting, serta inline code highlighting.

Bayangkan Shiki sebagai mesin dan rehype-pretty-code sebagai dashboard. Mesin menghasilkan warna yang akurat, sementara dashboard memudahkan kalian mengemudikan fitur-fitur lanjutan lewat meta string Markdown.

Keduanya bertemu di satu pipeline

unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypePrettyCode, {
    theme: "github-dark-default",
    transformers: [transformerNotationDiff()],
  })
  .use(rehypeStringify);

Di pipeline di atas, rehypePrettyCode(options) memakai Shiki di dalamnya dan menambah lapisan fitur. Kombinasi inilah yang akan kita bangun langkah demi langkah di seluruh series ini. Sebelum melangkah, pastikan kalian memahami bahwa urutan plugin dalam pipeline adalah bagian dari konfigurasi itu sendiri, bukan detail kecil.

#Posisi di Ekosistem Konten

Kombinasi ini kini menjadi pilihan utama di banyak framework konten. Next.js, Astro, SvelteKit, dan VitePress semuanya mendukung plugin rehype, sehingga rehype-pretty-code bisa dipasang dengan pola yang hampir sama. Di episode 11 kita akan melihat perbedaan kecil antar framework, tapi inti pipeline-nya selalu identik.

Terlepas dari framework, kemampuan ini berdiri di atas ekosistem unified yang stabil dan terdokumentasi baik. Selama sebuah framework menerima plugin rehype, kalian bisa yakin bahwa investasi belajar di series ini tetap berguna.

Pilihan ini juga masuk akal secara filosofi: konten tetap Markdown sederhana, dan kompleksitas highlight disembunyikan di lapisan transformasi. Penulis menulis fenced code block biasa dengan meta string; pembaca mendapatkan HTML yang sudah jadi, tanpa JavaScript tambahan.

Satu catatan penting: kombinasi Shiki dan rehype-pretty-code tidak menuntut kalian meninggalkan alat yang sudah ada. highlight.js atau Prism yang terpasang di proyek lama bisa tetap dipakai; pendekatan ini hanya menawarkan standar yang lebih tinggi dalam akurasi dan fitur. Bila kalian ingin mulai mempraktikkannya, langkah pertama adalah menyiapkan proyek konten dengan Node.js dan package manager yang berfungsi, persis seperti yang dijelaskan di episode berikutnya.

#Penutup

Inti yang harus dibawa pulang:

Syntax highlighting berevolusi dari regex (highlight.js, Prism) menjadi TextMate grammar.
Shiki lahir tahun 2018 oleh Pine Wu untuk membawa tokenisasi VSCode ke web.
Shiki memisahkan grammar, scope, dan theme sehingga warna akurat seperti editor.
rehype-pretty-code lahir tahun 2022 untuk menambahkan fitur code block di pipeline rehype.
Shiki adalah mesin, rehype-pretty-code adalah lapisan pengalaman pengguna.
Kombinasi ini berjalan di build-time, jadi tanpa JavaScript di sisi klien.

Di episode 2 selanjutnya kita akan membedah konsep dasar dan arsitektur utama — bagaimana Shiki menokenisasi kode dengan Oniguruma WASM, bagaimana rehype-pretty-code mengubah node <pre> dan <code> menjadi <figure> dengan data attributes, serta komponen-komponen utama seperti createHighlighter, @shikijs/transformers, @shikijs/langs, dan @shikijs/themes. Siapkan pemahaman kalian tentang pipeline, karena ini fondasi dari semua episode berikutnya.