Belajar Shiki Rehype Pretty Code - Line Highlighting & Word Highlight

#Pendahuluan

Saat menulis artikel teknis, kalian sering ingin menarik perhatian ke bagian tertentu dari sebuah kode: baris yang baru ditambahkan, fungsi yang bermasalah, atau sebuah token yang menjadi inti penjelasan. Line highlighting dan word highlight adalah alat untuk itu.

Episode 7 membahas dua fitur tersebut secara mendalam: sintaks meta lines, atribut data-highlighted-line beserta styling CSS-nya, lalu data-highlighted-chars untuk menandai karakter atau kata spesifik. Keduanya bekerja tanpa JavaScript tambahan di sisi klien.

#Line Highlighting

#Sintaks Meta lines

Baris yang ingin disorot dipilih lewat meta lines. Nilainya bisa berupa rentang dengan tanda strip atau daftar yang dipisah koma, bahkan keduanya dalam satu instruksi seperti lines={2-4,6} pada baris pembuka.

Contoh blok dengan highlight baris

import { parse } from "./parser";
 
function utama() {
  const data = parse("input");
  const hasil = proses(data);
  return hasil;
}

Instruksi lines={2-4,6} memilih baris 2, 3, 4, dan 6. Baris yang terpilih akan menerima atribut data-highlighted-line pada markup.

#Styling CSS untuk Baris Highlight

Untuk memberi tampilan pada baris yang disorot, targetkan atribut data-highlighted-line di CSS:

[data-highlighted-line] {
  background: rgba(255, 200, 0, 0.1);
  box-shadow: inset 3px 0 0 0 #f5b400;
}

Kombinasi background lembut dan garis di sisi kiri membuat baris yang disorot mudah dikenali tanpa mengganggu keterbacaan token. Sesuaikan warna dengan palet theme yang kalian pakai.

#Menandai Baris Sebagian

Tidak semua highlight harus memenuhi seluruh baris. rehype-pretty-code juga bisa menandai hanya sebagian baris lewat kombinasi dengan meta lain, misalnya highlighted-lines untuk baris penuh dan character highlight untuk bagian tertentu. Teknik ini membuat fokus visual semakin presisi, seperti yang kalian lihat di banyak dokumentasi modern.

#Word dan Character Highlight

#Menandai Karakter Spesifik

Selain baris, kalian bisa menandai karakter atau kata tertentu di dalam kode. rehype-pretty-code memakai meta word dengan pola yang dibatasi tanda slash, misalnya word/{parse}.

Contoh blok dengan highlight kata

function utama() {
  const data = parse("input");
  return proses(data);
}

Token atau teks yang cocok dengan pola akan dibungkus elemen dengan atribut data-highlighted-chars, dan kalian bebas memberi style padanya.

#Styling Word Highlight

[data-highlighted-chars] {
  background: #3b4054;
  border-radius: 4px;
  color: #fff;
}

Dengan styling di atas, kata yang cocok tampak seperti diberi stabilo dengan sudut membulat. Teknik ini sangat berguna ketika kalian menjelaskan satu identitas tertentu di dalam sebuah blok kode yang panjang.

#Kombinasi dengan Fitur Lain

#Menggabungkan Highlight Baris dan Kata

Line highlight dan word highlight bisa dipakai bersamaan dalam satu code block, misalnya lines={1,3} word/{proses}. Highlight baris penuh memberi konteks, sementara character highlight menandai token kunci:

Contoh blok gabungan

import { proses } from "./core";
 
async function jalan() {
  return await proses(data);
}

Di sini baris 1 dan 3 disorot penuh, sementara kata proses ditandai terpisah. Gabungan ini menjaga perhatian pembaca tetap terarah tanpa kehilangan konteks.

#Memeriksa Atribut di DevTools

Setelah merender, gunakan DevTools untuk memeriksa elemen mana saja yang membawa data-highlighted-line dan data-highlighted-chars:

Periksa atribut hasil render

const attr = html.matchAll(/data-highlighted-(line|chars)/g);
console.log([...attr].map((m) => m[0]));

Menjalankan kode pemeriksaan seperti ini membantu kalian memastikan meta yang ditulis benar-benar menghasilkan atribut yang diharapkan, sebelum styling CSS dipasang.

#Penutup

Inti yang harus dibawa pulang:

• Meta lines menerima rentang dan daftar sekaligus, contoh lines={2-4,6}.
• Baris yang disorot memakai atribut data-highlighted-line.
• Styling highlight dikerjakan murni di CSS tanpa JavaScript klien.
• Word highlight memakai meta word/{pola} untuk mencocokkan teks.
• Token yang cocok diberi atribut data-highlighted-chars.
• Line dan word highlight bisa dikombinasikan dalam satu blok.

Di episode 8 kalian akan belajar diff dan anotasi kode: membuat blok diff dengan marker tambah dan hapus, menandai baris penting, serta mengombinasikan diff dengan highlight dan caption untuk menyajikan perubahan kode secara jelas.