Belajar Shiki Rehype Pretty Code - Fitur Stabil Terbaru (Shiki 4 & rehype-pretty-code 0.14)

#Pendahuluan

Ekosistem terus bergerak, dan akhir tahun 2025 menandai perubahan besar: Shiki 4.x merombak API inti, sementara rehype-pretty-code 0.14.x menyesuaikan diri dan menambah dukungan fitur baru. Mengetahui apa yang berubah membuat kalian bisa migrasi tanpa tersandung.

Episode 20 merangkum fitur stabil terbaru: perombakan API highlighter dan opsi engine, metadata token ThemedToken.type, pemisahan langs, themes, dan transformers menjadi package tersendiri, serta peningkatan pada rehype-pretty-code seperti perbaikan inline character highlighting dan dukungan ESM penuh.

#Lanskap Versi 2026

#Shiki 4.x dan rehype-pretty-code 0.14.x

Shiki 4.x dirilis pada awal 2026 dengan arsitektur yang dirombak dari versi 3.x. Package utama shiki kini memakai engine berbasis WebAssembly dan mengekspos API yang lebih eksplisit. Sementara itu, rehype-pretty-code 0.14.x menambahkan dukungan penuh untuk Shiki 4 setelah sebelumnya mendukung Shiki 1.x sampai 3.x.

Keduanya kini berjalan dengan ESM penuh. Kalian perlu "type": "module" pada package atau ekstensi .mjs saat memakai keduanya di Node.js, dan Next.js memakai next.config.mjs untuk konfigurasi MDX.

#Memverifikasi Versi Terpasang

Sebelum migrasi, pastikan versi yang kalian pakai:

node -p "require('./node_modules/shiki/package.json').version"

Perintah ini membaca versi persis dari file package yang terpasang, lebih akurat daripada klaim dokumentasi. Bandingkan dengan versi terbaru di registry menggunakan npm view shiki version.

#Perombakan API Highlighter

#Opsi Engine yang Eksplisit

Di Shiki 4, pembuatan highlighter memerlukan engine yang jelas. Kalian memilih Oniguruma atau JavaScript engine:

Highlighter di Shiki 4

import { createHighlighter } from "shiki";
import { createOnigurumaEngine } from "@shikijs/engine-oniguruma";
 
const highlighter = await createHighlighter({
  langs: ["typescript"],
  themes: ["github-dark-default"],
  engine: createOnigurumaEngine(),
});

Opsi engine menjadi bagian dari kontrak API, bukan detail internal. Ini memberi kendali penuh kepada library integrator sekaligus memudahkan pengujian dengan engine yang berbeda.

#Fungsi dan Shorthand yang Disederhanakan

API pendek seperti codeToHtml dan createHighlighterCore tetap tersedia, namun semua jalur kini berbagi kontrak yang sama. Fungsi yang sudah usang seperti getHighlighter digantikan createHighlighter, dan pola singleton dipusatkan pada getSingletonHighlighter. Konsistensi ini membuat migrasi kode antar versi lebih mudah diprediksi.

#ThemedToken.type

#Metadata Semantik pada Token

Salah satu penambahan penting di Shiki 4 adalah properti ThemedToken.type pada token. Selain content dan color, setiap token kini membawa klasifikasi semantik seperti keyword, string, atau comment. Data ini membuka pintu untuk transformasi yang lebih cerdas:

Baca tipe token

const result = await highlighter.codeToTokens(
  "const x = 1;",
  { lang: "typescript", theme: "github-dark-default" },
);
 
for (const line of result.tokens) {
  for (const token of line) {
    if (token.type === "keyword") {
      console.log(token.content);
    }
  }
}

Dengan token.type, kalian bisa memfilter token berdasarkan perannya, bukan teksnya. Ini jauh lebih andal daripada mencocokkan string secara manual untuk kebutuhan seperti anotasi atau analisis statis.

#Manfaat untuk Tools

Bagi pembuat tooling, metadata ini memungkinkan fitur yang sebelumnya sulit: menandai semua keyword dengan gaya khusus, mengekspor token ke format lain dengan semantik lengkap, atau membangun test yang memverifikasi warna per kategori. Transformers Shiki juga memanfaatkan metadata ini untuk fitur word highlight yang lebih presisi.

#Pemisahan Package

#langs, themes, dan transformers

Sejak v4, bahasa, theme, dan transformer bukan lagi satu bundle monolitik. Kalian mengimpor per package:

npm i @shikijs/langs @shikijs/themes @shikijs/transformers

Setiap package bertanggung jawab pada satu domain: @shikijs/langs untuk grammar, @shikijs/themes untuk palet warna, dan @shikijs/transformers untuk transformasi token. Pemisahan ini membuat bundle kecil dan memungkinkan penambahan grammar tanpa menyentuh theme.

#Dampak pada Konfigurasi

Konfigurasi rehype-pretty-code kini bisa merujuk id bahasa dan theme tanpa import tambahan karena bundle sudah memuat referensi. Untuk kontrol penuh, kalian mengimpor modul spesifik seperti @shikijs/themes/nord langsung. Pola ini sudah kalian praktikkan di episode 12.

#Fitur Baru rehype-pretty-code 0.14

#Dukungan Shiki 4 dan ESM Penuh

rehype-pretty-code 0.14.x berjalan sebagai package ESM murni dan men-delegate mesin highlight ke Shiki 4. Migrasi dari 0.13 biasanya hanya membutuhkan update dependency karena opsi inti seperti theme, keepBackground, dan defaultLang tidak berubah. Pastikan file konfigurasi kalian memakai ESM agar import berjalan mulus.

#Perbaikan Inline Character Highlighting

Versi 0.14 memperbaiki character highlighting pada kode inline. Masalah di versi lama di mana highlight karakter inline tidak konsisten dengan blok kini ditangani lebih baik. Kalian bisa menandai token spesifik di dalam kalimat dengan hasil yang sama seperti di code block.

npm view rehype-pretty-code version

Perintah ini memastikan kalian berada di rilis 0.14 terbaru sebelum memakai fitur tersebut.

#Penutup

Inti yang harus dibawa pulang:

• Shiki 4.x merombak API highlighter dengan opsi engine yang eksplisit.
• ThemedToken.type membawa metadata semantik untuk tiap token.
• langs, themes, dan transformers dipisah menjadi package tersendiri.
• rehype-pretty-code 0.14.x mendukung Shiki 4 dengan ESM penuh.
• Inline character highlighting diperbaiki di rilis 0.14.
• Verifikasi versi dengan npm view sebelum memakai fitur baru.

Di episode 21 kalian akan menyusun production-ready configuration: merangkai konfigurasi akhir dengan transformers, dual themes, langs terpilih, styling CSS lengkap, pipeline SSG, serta strategi CI/CD dan maintenance untuk upgrade dependency yang terkontrol.