Belajar Shiki Rehype Pretty Code - Production-Ready Configuration

#Pendahuluan

Di episode-episode sebelumnya kalian mempelajari fitur secara terpisah. Sekarang saatnya menggabungkan semuanya menjadi satu konfigurasi yang siap produksi: plugins, transformers, dual themes, langs terpilih, styling CSS, dan pipeline build yang konsisten.

Episode 21 menyusun production-ready configuration: konfigurasi akhir rehype-pretty-code, styling CSS yang lengkap untuk semua elemen code block, pipeline build SSG, serta praktik CI/CD dan maintenance untuk menjaga sistem tetap stabil saat dependency di-upgrade.

#Konfigurasi Final

#Menggabungkan Semua Opsi

Konfigurasi produksi menggabungkan transformers, dual themes, dan daftar langs yang selektif:

Konfigurasi produksi

import {
  transformerNotationDiff,
  transformerNotationHighlight,
} from "@shikijs/transformers";
 
const rehypePrettyCodeOptions = {
  theme: {
    dark: "github-dark-default",
    light: "github-light-default",
  },
  defaultLang: "plaintext",
  keepBackground: false,
  langs: ["ts", "tsx", "js", "css", "html", "json", "bash"],
  transformers: [
    transformerNotationDiff(),
    transformerNotationHighlight(),
  ],
};

Daftar langs dibatasi pada bahasa yang benar-benar muncul di konten, theme memakai dual themes dari episode 15, dan transformers menambah notasi diff serta highlight. Konfigurasi ini menjadi satu-satunya sumber kebenaran untuk seluruh halaman.

#Memasang di Pipeline

Daftarkan konfigurasi pada pipeline yang dipakai semua konten:

Pipeline produksi

unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypePrettyCode, rehypePrettyCodeOptions)
  .use(rehypeSanitize)
  .use(rehypeStringify);

Urutan plugin mengikuti prinsip episode 17: highlight sebelum sanitasi, sanitasi sebelum stringify. Pipeline ini dipakai sekali di konfigurasi build, bukan per halaman, agar perilakunya konsisten.

#Styling CSS Lengkap

#Menyiapkan Semua Elemen

Code block produksi butuh styling untuk title, baris highlight, diff, dan background. Contoh berikut merangkumnya dalam satu aturan:

[data-rehype-pretty-code-figure] {
  position: relative;
}
 
[data-rehype-pretty-code-figure] pre {
  background: #ffffff;
  border-radius: 8px;
  overflow-x: auto;
}
 
[data-rehype-pretty-code-figure] span {
  color: var(--shiki-light);
}
 
[data-rehype-pretty-code-figure] [data-highlighted-line] {
  background: rgba(255, 200, 0, 0.12);
}
 
@media (prefers-color-scheme: dark) {
  [data-rehype-pretty-code-figure] pre {
    background: #0d1117;
  }
 
  [data-rehype-pretty-code-figure] span {
    color: var(--shiki-dark);
  }
}

Aturan ini menangani background untuk dua mode, warna token lewat CSS variables, dan highlight baris. Tambahkan styling data-added-line dan data-removed-line dari episode 8 untuk menyempurnakan diff.

#Memisahkan File Styling

Simpan styling di file CSS terpisah agar tidak bercampur dengan logika komponen. Pada Next.js, cukup import file tersebut di layout atau file global. Pemisahan ini memudahkan penggantian palet tanpa menyentuh kode komponen.

#Pipeline Build SSG

#Menjamin Konsistensi Build

Pastikan build berjalan deterministik: hasil yang sama untuk input yang sama. Setiap dokumen melewati pipeline yang sama, dan aset statis diproduksi di build-time. Sebelum merge ke produksi, jalankan build lengkap:

bun run build

Perintah ini menjalankan build konten lalu build Next.js secara berurutan dengan bun run build. Jika build gagal, pipeline CI ikut gagal sehingga masalah terdeteksi sebelum menyentuh pengguna.

#Snapshot Output sebagai Jaring Pengaman

Snapshot output HTML dari beberapa halaman kunci mencegah perubahan visual tak terduga. Simpan snapshot setelah build dan bandingkan di setiap perubahan. Jika snapshot berubah, periksa apakah itu perubahan yang disengaja. Ini menjaring regresi halus yang tidak muncul sebagai error.

#CI/CD dan Maintenance

#Upgrade Dependency Terkontrol

Jangan langsung memakai versi terbaru tanpa pengujian. Tinjau changelog terlebih dahulu, lalu lakukan upgrade pada branch terpisah dan jalankan build serta snapshot:

bun add shiki@^4 rehype-pretty-code@^0.14

Setelah upgrade, jalankan seluruh pengujian dan bandingkan snapshot. Batasi dependency dengan range yang sempit agar update tak disengaja tidak merusak hasil render.

#Monitoring Build dan Bundle

Pantau durasi build dan ukuran bundle di setiap rilis. Kenaikan tajam menandakan grammar atau aset baru yang tidak disengaja masuk ke bundle. Integrasikan peringatan ukuran ke pipeline CI sehingga regresi performa terdeteksi sejak awal.

#Penutup

Inti yang harus dibawa pulang:

• Konfigurasi produksi menggabungkan transformers, dual themes, dan langs selektif.
• Pipeline dipasang sekali di build agar perilaku konsisten.
• Styling lengkap menangani background, warna token, highlight, dan diff.
• Build SSG berjalan deterministik dan divalidasi di CI.
• Snapshot output mencegah regresi visual yang tak terduga.
• Upgrade dependency dilakukan bertahap dengan pengujian dan monitoring.

Di episode 22 kalian akan menutup series dengan ekosistem alternatif dan refleksi akhir: membandingkan Shiki dengan highlight.js, Prism, dan lowlight, serta rekap perjalanan dari episode 0 sampai 21 menjadi checklist code block production-grade.