Belajar Shiki Rehype Pretty Code - Bahasa & Theme

#Pendahuluan

Sampai episode 4, kalian sudah bisa menjalankan pipeline dan mengatur opsi dasar. Sekarang waktunya mengenal dua bahan utama yang menentukan tampilan kode: bahasa dan theme. Bahasa menentukan aturan tokenisasi, theme menentukan warna hasilnya.

Episode 5 membahas cara memilih bahasa lewat meta string dan defaultLang, menjelajah katalog bahasa dari @shikijs/langs, serta memilih theme bawaan yang cocok dengan desain situs kalian. Di akhir episode, kalian bisa menyajikan berbagai bahasa dengan palet yang konsisten.

#Bahasa: Memilih Grammar yang Tepat

#Meta Bahasa pada Fenced Code Block

Cara paling umum memilih bahasa adalah menuliskannya di meta string setelah tanda backtick pembuka fenced code block:

Fenced code block dengan meta bahasa

const pesan: string = "Halo";

Shiki akan memuat grammar yang sesuai dengan alias tersebut dan menokenisasi isi blok. Nama bahasa bisa berupa alias umum seperti ts, py, md, yml, atau sh.

#defaultLang untuk Kode Tanpa Meta

Penulis sering lupa mencantumkan bahasa. Untuk menjaga hasil tetap rapi, setel defaultLang pada opsi plugin:

Setel bahasa cadangan

.use(rehypePrettyCode, {
  theme: "github-dark-default",
  defaultLang: "plaintext",
})

Dengan defaultLang berupa plaintext, code block tanpa meta tidak diwarnai tetapi tetap dirender utuh. Jika kalian mau semua blok tanpa meta otomatis di-highlight sebagai bahasa tertentu, isi defaultLang dengan nama bahasa tersebut.

#Mengenal Katalog Bahasa dari @shikijs/langs

Daftar lengkap bahasa yang didukung Shiki bisa dicek langsung di package @shikijs/langs:

node -e "import('@shikijs/langs').then(m => console.log(m.langs.map(l => l.id).join(', ')))"

Perintah node -e dengan import dinamis ini menampilkan id semua bahasa yang tersedia. Dari outputnya kalian akan melihat nama seperti javascript, typescript, python, go, rust, sql, yaml, json, dan masih banyak lagi.

#Theme: Mengatur Palet Warna

#Theme Bawaan yang Siap Pakai

Shiki menyediakan banyak theme populer yang namanya sudah dikenal dari editor:

• github-dark-default dan github-light-default.
• one-dark-pro dan one-light.
• nord yang bernuansa dingin.
• vitesse-dark dan vitesse-light.
• tokyo-night, dracula, dan material-theme.

Theme dipilih lewat opsi theme pada rehype-pretty-code. Kalian bisa berganti-ganti theme hanya dengan mengganti nama string, tanpa menyentuh isi dokumen.

Ganti-ganti theme

.use(rehypePrettyCode, {
  theme: "nord",
})

Jika kalian ragu memilih, buka halaman demo theme di situs resmi Shiki dan bandingkan beberapa palet sekaligus. Pilih yang kontrasnya baik untuk teks kode, bukan hanya yang tampak cantik.

#keepBackground dan Background Sendiri

Setiap theme membawa warna background. Jika halaman kalian sudah punya skema warna sendiri, matikan background bawaan dengan keepBackground: false lalu atur background di CSS:

[data-rehype-pretty-code-figure] pre {
  background: #161b22;
}

Cara ini memisahkan tanggung jawab: Shiki mengurus warna token, CSS mengurus warna background. Hasilnya lebih mudah dirapikan saat kalian menerapkan dark mode di seluruh situs.

#Kombinasi Bahasa dan Theme dalam Satu Proyek

#Menambah Bahasa dan Theme Tambahan

rehype-pretty-code memuat bahasa dan theme secara otomatis sesuai kebutuhan, tetapi kalian juga bisa menambahkan secara eksplisit lewat opsi langs dan themes:

Langs dan themes tambahan

.use(rehypePrettyCode, {
  theme: "github-dark-default",
  langs: ["ts", "py", "go", "rust"],
  themes: ["nord", "vitesse-dark"],
})

Opsi langs berguna untuk memastikan bahasa yang jarang dipakai selalu tersedia, sementara themes menyiapkan beberapa palet untuk fitur dual theme di episode 15. Memilih langs secara selektif juga menekan ukuran bundle, seperti yang kita bahas di episode 12.

Kedua opsi menerima id bahasa bawaan maupun objek grammar dan theme yang diimpor dari file. Contoh penulisan sekaligus kedua opsi: langs: ["ts", "py"]. Dengan menggabungkan keduanya, kalian mengendalikan dua bahan utama tampilan kode dari satu tempat konfigurasi.

#Penutup

Inti yang harus dibawa pulang:

• Bahasa dipilih lewat meta string fenced code block atau defaultLang.
• Katalog bahasa tersedia di @shikijs/langs dan bisa dicek lewat Node.js.
• Theme menentukan warna token, bukan struktur markup.
• Banyak theme bawaan siap pakai seperti github, one-dark, nord, dan vitesse.
• keepBackground memisahkan background theme dari warna token.
• Opsi langs dan themes memungkinkan daftar yang selektif.

Di episode 6 kalian akan belajar meta strings dan caption: cara menambahkan judul dan keterangan pada code block, plus fitur meta seperti showLineNumbers, lines, dan diff yang mengubah markup yang dihasilkan secara otomatis.