Belajar Shiki Rehype Pretty Code - Inline Code Highlighting

#Pendahuluan

Sampai di sini, highlight hanya berlaku pada fenced code block. Padahal artikel penuh dengan kode inline: nama fungsi, variabel, flag CLI, atau properti yang ditulis di dalam kalimat. Tanpa penanganan khusus, kode inline tampil polos dengan satu warna default.

Episode 9 membahas inline code highlighting: opsi bypassInlineCode, cara menandai bahasa pada kode inline dengan meta, styling hasilnya di CSS, dan strategi menyamakan warna semantik inline dengan code block terkait. Di akhir episode, kalian bisa menulis kalimat yang menyebut fetch dan langsung membuat token tersebut tampil dengan warna yang benar.

#Mengaktifkan Inline Highlighting

#Opsi bypassInlineCode

Secara default, rehype-pretty-code hanya memproses fenced code block dan membiarkan kode inline apa adanya. Untuk menyalakan highlight inline, setel opsi bypassInlineCode menjadi false di konfigurasi plugin:

Aktifkan highlight inline

import rehypePrettyCode from "rehype-pretty-code";
 
const options = {
  theme: "github-dark-default",
  bypassInlineCode: false,
};

Nilai false pada bypassInlineCode membuat plugin ikut memproses elemen <code> inline di dalam paragraf. Setelah ini, kode inline tanpa meta bahasa tetap di-highlight menggunakan bahasa yang ditebak atau defaultLang.

#Memasang Opsi di Pipeline

Gabungkan opsi tersebut ke pipeline unified seperti biasa:

Pipeline dengan opsi inline

unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypePrettyCode, {
    theme: "github-dark-default",
    bypassInlineCode: false,
  })
  .use(rehypeStringify);

Pastikan urutan plugin benar: rehype-pretty-code harus dipasang sebelum rehypeStringify. Setelah pipeline siap, tulis ulang dokumen kalian dan periksa hasilnya di browser.

#Menandai Bahasa pada Kode Inline

#Sintaks Meta di Dalam Backtick

Tanpa penanda bahasa, Shiki menebak bahasa inline berdasarkan konteks dan hasilnya bisa salah. Untuk memastikan, tulis meta bahasa tepat setelah kode di dalam tanda backtick, seperti map pada contoh berikut:

map mengubah array satu per satu, dan proses memanggil fungsi kustom.

Penjelasan singkat itu memastikan token map diwarnai sebagai kata kunci JavaScript dan proses sebagai fungsi. Cara penulisannya langsung di baris yang sama dengan kalimat, tanpa fenced code block.

#Mengapa Penanda Bahasa Penting

Tanpa penanda, kata seperti name bisa diwarnai sebagai properti, variabel, atau string tergantung tebakan Shiki. Dengan penanda eksplisit, warna inline konsisten dengan blok kode di sekitarnya yang memakai bahasa sama. Ini juga menjaga hasil render tetap deterministik saat kalian mengganti theme.

#Styling Inline Code di CSS

#Menargetkan Elemen yang Sudah Di-Highlight

Setelah bypassInlineCode: false, token di dalam kode inline dibungkus span dengan class yang sama seperti di code block. Kalian bisa menargetkan elemen code untuk latar dan radius:

[data-rehype-pretty-code-title] + pre code,
p code {
  background: rgba(110, 118, 129, 0.2);
  border-radius: 6px;
  padding: 0.2em 0.4em;
}

Aturan p code memberi latar lembut pada kode inline di dalam paragraf, sementara token di dalamnya tetap berwarna sesuai theme. Padding kecil membuat highlight terlihat seperti stabilo tanpa mengganggu alur teks.

#Membiarkan Warna Token Dominan

Jangan menimpa warna foreground di elemen code karena itu akan menghapus highlight. Biarkan span token menentukan warna, dan batasi styling pada background, border, dan radius. Prinsip ini sama dengan code block: struktur dari CSS, warna dari theme.

#Menyamakan Semantik Warna

#Bahasa yang Konsisten dalam Satu Bahasan

Saat satu paragraf membahas satu fungsi, gunakan bahasa yang sama untuk kode inline dan code block di dekatnya. Jika blok memakai TypeScript, tulis String.raw di dalam kalimat, bukan String.raw. Konsistensi ini membuat pembaca tidak ragu membaca token.

#Menghindari Inkonsistensi di Halaman

Periksa seluruh halaman setelah render untuk menemukan kode inline yang warnanya aneh karena tebakan bahasa yang keliru. Cari token dengan warna mencurigakan lalu tambahkan penanda bahasa. Langkah ini cepat dan membuat hasil akhir tampak profesional.

#Contoh Penerapan Lengkap

Berikut pipeline akhir dengan inline highlighting aktif beserta theme dan defaultLang:

Konfigurasi lengkap

import rehypePrettyCode from "rehype-pretty-code";
 
const options = {
  theme: "github-dark-default",
  defaultLang: "plaintext",
  bypassInlineCode: false,
};

Dengan defaultLang: "plaintext", kode inline tanpa penanda bahasa tidak diwarnai sama sekali, sehingga token dengan penanda eksplisit justru lebih menonjol. Kalian bisa mengganti nilai ini sesuai kebutuhan gaya tulisan.

#Penutup

Inti yang harus dibawa pulang:

• Kode inline baru di-highlight saat bypassInlineCode disetel false.
• Bahasa kode inline ditandai dengan meta di dalam backtick, contoh proses.
• Token inline memakai class yang sama dengan token di code block.
• Styling inline dibatasi pada background dan radius, bukan warna token.
• Bahasa yang konsisten membuat warna inline selaras dengan blok terkait.
• defaultLang mengontrol kode inline tanpa penanda bahasa.

Di episode 10 kalian akan belajar transformers Shiki: memakai package @shikijs/transformers seperti transformerNotationDiff dan transformerNotationHighlight, serta membuat transformer kustom untuk menambah atau mengubah token dan metadata hasil highlight.