Belajar Shiki Rehype Pretty Code - Meta Strings & Caption

#Pendahuluan

Di balik kesederhanaan fenced code block ada kekuatan tersembunyi: meta string. Baris setelah tanda backtick pembuka bisa berisi instruksi seperti judul, caption, penomoran baris, rentang highlight, hingga mode diff. rehype-pretty-code membaca instruksi ini dan menerjemahkannya menjadi struktur HTML.

Episode 6 membedah cara kerja meta string dan caption: format penulisannya, cara plugin mem-parse-nya, serta pengaruhnya terhadap markup yang dihasilkan. Setelah episode ini, kalian akan melihat fenced code block sebagai pintu masuk ke fitur-fitur visual yang luar biasa.

#Apa Itu Meta String

#Format Dasar title dan caption

Meta string adalah teks yang mengikuti bahasa pada baris pembuka fenced code block. Formatnya mirip atribut HTML. Dua yang paling sering dipakai adalah title dan caption. Untuk menambahkan keduanya, tulis pada baris pembuka seperti title="app.ts" caption="Kode entry point aplikasi".

Kode dengan title dan caption

console.log("mulai");

Ketika title ada, rehype-pretty-code menambahkan elemen judul di atas <pre>. Sedangkan caption ditampilkan di bawah blok. Judul biasanya berisi nama file, sementara caption menjelaskan konteks kode untuk pembaca.

#Bagaimana Plugin Mem-Parse Meta

rehype-pretty-code memecah meta string dengan aturan yang mirip parsing atribut: pasangan kunci="nilai" untuk nilai yang mengandung spasi, dan token tunggal untuk fitur tanpa nilai seperti diff atau showLineNumbers. Kalian bisa menggabungkan beberapa instruksi dalam satu baris meta, misalnya showLineNumbers bersama title dan caption.

Kode dengan showLineNumbers

export function today(): string {
  return new Date().toISOString();
}

Urutan instruksi tidak terlalu penting. Yang menentukan hasil adalah kehadiran instruksi itu sendiri, bukan posisinya di baris meta.

#Fitur Meta yang Paling Sering Dipakai

#showLineNumbers: Menampilkan Nomor Baris

Instruksi showLineNumbers memunculkan nomor di tiap baris. Ketika aktif, elemen <code> mendapat atribut data-line-numbers.

Dengan showLineNumbers

const daftar = [1, 2, 3];
const total = daftar.reduce((a, b) => a + b, 0);
console.log(total);

Nomor baris sangat membantu saat kalian membahas bagian-bagian tertentu dari sebuah kode di teks artikel, misalnya menyebut "lihat baris 3".

#lines: Rentang Highlight

Instruksi lines menentukan baris yang di-highlight. Sintaksnya memakai kurung kurawal dan bisa menerima rentang atau daftar yang dipisah koma, seperti lines={2,4-6} pada baris pembuka.

Kode dengan baris yang disorot

function hitung(a: number, b: number): number {
  const hasil = a + b;
  if (hasil > 10) {
    console.log("besar");
  }
  return hasil;
}

Baris yang terpilih akan ditandai dengan atribut data-highlighted-line pada markup. Ini adalah fondasi untuk fitur line highlighting yang dibedah penuh di episode 7.

#diff: Menandai Perubahan

Instruksi diff mengaktifkan mode perbandingan. Kalian lalu menandai baris yang ditambah atau dihapus dengan marker // + dan // - pada baris itu sendiri.

Kode dengan marker diff

const a = 1;
const b = 2;
// +console.log(a + b);
// -console.log(a * b);

rehype-pretty-code menerjemahkan marker ini menjadi atribut seperti data-added-line dan data-removed-line yang siap diberi warna hijau dan merah di CSS. Diff akan kita perdalam di episode 8.

#Pengaruh Meta terhadap Markup

#Dari Meta Menjadi Data Attributes

Semua instruksi meta berujung pada data attributes di markup akhir. Berikut petanya:

• title menambah elemen <figcaption> atau div judul di dalam <figure>.
• caption menambah elemen caption di bawah blok.
• showLineNumbers menambah data-line-numbers pada <code>.
• lines menambah data-highlighted-line pada baris terpilih.
• diff menambah data-changed-line, data-added-line, atau data-removed-line.

Karena semua berbasis atribut, styling tidak memerlukan class tambahan. Kalian cukup menargetkan atribut di CSS.

#Memeriksa Markup di DevTools

Cara terbaik memahami pengaruh meta adalah memeriksa hasilnya langsung:

node highlight.mjs

Filter baris yang di-highlight

const baris = html
  .split("\n")
  .filter((line) => line.includes("data-highlighted-line"));
console.log(baris.join("\n"));

Dengan memfilter baris yang mengandung data-highlighted-line, kalian bisa memastikan bahwa meta lines benar-benar diterjemahkan ke markup. Teknik pemeriksaan seperti ini akan sering kalian pakai untuk debugging.

#Penutup

Inti yang harus dibawa pulang:

• Meta string mengikuti bahasa pada baris pembuka fenced code block.
• title dan caption memberi konteks visual pada blok kode.
• showLineNumbers memunculkan nomor baris lewat atribut data-line-numbers.
• lines memilih baris untuk highlight dengan atribut data-highlighted-line.
• diff mengaktifkan marker penambahan dan penghapusan baris.
• Semua instruksi meta diterjemahkan menjadi data attributes yang siap di-styling.

Di episode 7 kalian akan fokus pada line highlighting dan word highlight: kombinasi rentang seperti lines={2-4,6}, styling CSS untuk data-highlighted-line, serta cara menandai kata atau karakter spesifik dengan data-highlighted-chars.