Belajar Shiki Rehype Pretty Code - Pre-Requisites Skill & Setup Environment

#Pendahuluan

Selamat datang di series Belajar Shiki Rehype Pretty Code! Series ini akan membawa kalian menguasai Shiki dan rehype-pretty-code — kombinasi yang membuat code block di blog atau dokumentasi MD/MDX tampil dengan syntax highlighting akurat seperti di editor, lengkap dengan line highlighting, diff, title, caption, dan banyak lagi. Total ada 23 episode yang tersusun dari enam fase.

Tapi sebelum menyentuh kedua library ini, ada beberapa skill dasar dan perangkat lunak yang wajib kalian miliki. Mengapa prasyarat ini penting? Karena Shiki bukan sekadar highlighter regex sederhana. Dia menggunakan TextMate grammar dan Oniguruma WASM untuk menokenisasi kode — dan rehype-pretty-code bekerja di dalam pipeline unified yang membangun pohon AST. Kalau konsep ini belum jelas, semua langkah berikutnya akan terasa seperti kotak hitam.

Episode 0 ini adalah peta jalan kalian: kita akan memastikan skill dasar, menyiapkan project konten, menginstall shiki dan rehype-pretty-code, lalu memverifikasi bahwa pipeline pertama berjalan. Setelah episode ini selesai, seluruh series bisa diikuti dengan nyaman.

#Skill Dasar yang Wajib Dikuasai

#Node.js dan Package Manager

Shiki dan rehype-pretty-code adalah package JavaScript yang berjalan di Node.js, jadi kalian wajib nyaman dengan Node.js versi 18 ke atas dan minimal satu package manager: npm, bun, atau pnpm. Kalian juga harus paham dasar ESM (import dan export), karena kedua library ini bersifat ESM-only.

node --version
npm --version

Output node --version harus menampilkan versi 18 atau lebih baru. Series ini memakai npm karena paling universal, tapi semua perintah bisa dipetakan ke bun atau pnpm tanpa masalah.

#Markdown, MDX, dan Konsep AST

rehype-pretty-code bekerja pada file Markdown dan MDX. Kalian perlu memahami sintaks dasar Markdown seperti heading, list, link, dan terutama fenced code block. MDX menambahkan kemampuan menulis komponen JSX di dalam Markdown — konsep ini penting karena beberapa framework konten (misalnya Next.js dengan @next/mdx) memproses MDX lewat pipeline rehype.

Selain itu, kalian harus paham konsep AST (Abstract Syntax Tree). Di dunia HTML, pohon ini disebut HAST. Saat remark mengurai Markdown, hasilnya berupa pohon MDAST. remark-rehype mengubahnya menjadi HAST, lalu plugin-plugin rehype (termasuk rehype-pretty-code) memanipulasi pohon tersebut sebelum diubah menjadi string HTML.

#Alur unified, remark, dan rehype

Inti seluruh series ini adalah pipeline unified. Alurnya selalu sama: parse → transform → stringify.

markdown → remark-parse → MDAST → remark-rehype → HAST → rehype plugins → rehype-stringify → HTML

Shiki bekerja sebagai mesin highlight di dalam salah satu plugin rehype tersebut, dan rehype-pretty-code menyediakan lapisan yang mengubah node <pre> dan <code> menjadi <figure> yang kaya fitur. Pahami gambar besar ini sebelum masuk ke kode.

#Perangkat Lunak yang Perlu Disiapkan

#Project Konten Minimal

Kalian bisa mengikuti series ini dengan project apa pun: Next.js MDX, Astro, VitePress, atau project unified langsung seperti yang kita buat di episode 3. Untuk episode 0, cukup buat direktori project kosong:

mkdir code-block-project
cd code-block-project
npm init -y

Perintah npm init -y membuat package.json dengan konfigurasi default. Kalian perlu menambahkan "type": "module" agar project memakai ESM — langkah wajib karena kedua library yang kita pakai bersifat ESM-only.

#Menginstall Shiki dan rehype-pretty-code

Dengan package.json siap, install dua library utama:

npm install shiki rehype-pretty-code

Proses ini juga akan menarik dependensi pendukung seperti @shikijs/engine-oniguruma yang memuat Oniguruma WASM, dan hast-util-* yang dipakai rehype-pretty-code untuk memanipulasi HAST. Tunggu sampai selesai, lalu verifikasi versi:

npm list shiki rehype-pretty-code

Pastikan shiki sudah di versi 4.x dan rehype-pretty-code di versi 0.14.x. Versi terbaru per penulisan series ini adalah Shiki v4.3.1 dan rehype-pretty-code v0.14.4 — perbarui bila perlu dengan npm view shiki version untuk cek versi terkini di registry.

#Browser Devtools untuk Memeriksa Output HTML

Sebagian besar episode series ini akan memeriksa hasil HTML yang dihasilkan pipeline. Karena rehype-pretty-code menghasilkan elemen seperti <figure>, <pre>, <code>, dan <span> dengan data attributes, kalian wajib bisa membaca browser devtools (tab Elements pada Chrome atau Firefox). Buka halaman yang berisi code block, klik kanan pada kode, pilih Inspect, lalu perhatikan atribut seperti data-line, data-highlighted-line, dan data-rehype-pretty-code-figure. Kebiasaan ini akan menyelamatkan kalian saat debugging di episode 19.

#Verifikasi Environment

Sebelum lanjut ke episode 1, jalankan verifikasi cepat dengan membuat file check.mjs di root project:

Verifikasi pertama pipeline

import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypePrettyCode from "rehype-pretty-code";
import rehypeStringify from "rehype-stringify";
 
const result = await unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypePrettyCode, { theme: "github-dark-default" })
  .use(rehypeStringify)
  .process("```ts\nconst x: number = 1;\n```");
 
console.log(String(result));

Jalankan dengan node check.mjs. Jika tidak ada error dan output berisi tag <figure> dengan atribut data-rehype-pretty-code-figure, environment kalian sudah siap. Catatan penting: remark-parse, remark-rehype, dan rehype-stringify perlu diinstall terlebih dahulu dengan npm install remark-parse remark-rehype rehype-stringify.

#Ringkasan Skill yang Harus Dikuasai

Rangkuman prasyarat yang sudah kalian siapkan di episode 0:

• Node.js 18+ dengan kebiasaan memakai package manager dan ESM.
• Markdown dan MDX sebagai format konten yang akan diproses.
• Konsep AST dan HAST serta alur parse, transform, stringify.
• shiki dan rehype-pretty-code terinstall dengan versi terbaru.
• unified, remark-parse, remark-rehype, rehype-stringify siap dipakai.
• Browser devtools sebagai alat inspeksi output HTML.

Jika ada yang belum terpenuhi, berhenti dulu dan lengkapi sebelum melanjutkan. Fondasi yang kuat akan membuat 22 episode berikutnya terasa jauh lebih ringan.

#Penutup

Inti yang harus dibawa pulang:

• Shiki memakai TextMate grammar, bukan regex sederhana: kuasai dulu konsep tokenisasi.
• rehype-pretty-code bekerja di dalam pipeline unified yang berbasis AST.
• Kedua library ESM-only: pastikan project memakai import dan export.
• Verifikasi pertama: install, jalankan pipeline minimal, dan cek output <figure>.
• Browser devtools adalah senjata utama untuk memahami output HTML.

Di episode 1 selanjutnya kita akan membahas sejarah, latar belakang, dan mengapa membutuhkan kombinasi Shiki dan rehype-pretty-code — dari evolusi syntax highlighting berbasis regex, kelahiran Shiki tahun 2018 oleh Pine Wu, hingga lahirnya rehype-pretty-code tahun 2022 oleh Atomiks untuk menutup kekosongan fitur code block di pipeline rehype. Pastikan environment kalian sudah siap, karena perjalanan Belajar Shiki Rehype Pretty Code baru saja dimulai!