Learn Shiki Rehype Pretty Code - Line Highlighting & Word Highlight

#Introduction

When writing technical articles, you often want to draw attention to a specific part of the code: a newly added line, a problematic function, or a single token that is the crux of the explanation. Line highlighting and word highlight are the tools for that.

Episode 7 covers these two features in depth: the lines meta syntax, the data-highlighted-line attribute along with its CSS styling, then data-highlighted-chars for marking specific characters or words. Both work without extra client-side JavaScript.

#Line Highlighting

#The lines Meta Syntax

The lines you want to highlight are selected via the lines meta. Its value can be a range with a dash or a comma-separated list, even both in one instruction like lines={2-4,6} on the opening line.

Example block with line highlighting

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

The lines={2-4,6} instruction selects lines 2, 3, 4, and 6. Selected lines receive the data-highlighted-line attribute on the markup.

#CSS Styling for Highlighted Lines

To style highlighted lines, target the data-highlighted-line attribute in CSS:

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

The combination of a soft background and a left-side bar makes highlighted lines easy to spot without disturbing token readability. Adjust the colors to match the theme palette you use.

#Marking Partial Lines

Not every highlight has to fill the entire line. rehype-pretty-code can also mark only part of a line through a combination with other meta, for example highlighted-lines for full lines and character highlighting for specific sections. This technique makes visual focus even more precise, as you see in many modern documentation sites.

#Word and Character Highlighting

#Marking Specific Characters

Besides lines, you can mark specific characters or words inside the code. rehype-pretty-code uses the word meta with a slash-delimited pattern, for example word/{parse}.

Example block with word highlighting

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

Tokens or text matching the pattern are wrapped in an element with the data-highlighted-chars attribute, and you're free to style it.

#Styling Word Highlight

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

With the styling above, matching words look like they've been highlighted with a marker with rounded corners. This technique is very useful when you explain a single identifier inside a long code block.

#Combining with Other Features

#Combining Line and Word Highlighting

Line highlighting and word highlighting can be used together in a single code block, for example lines={1,3} word/{proses}. Full-line highlighting gives context, while character highlighting marks the key token:

Example of a combined block

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

Here lines 1 and 3 are fully highlighted, while the word proses is marked separately. This combination keeps the reader's attention directed without losing context.

#Checking Attributes in DevTools

After rendering, use DevTools to inspect which elements carry data-highlighted-line and data-highlighted-chars:

Inspect rendered attributes

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

Running inspection code like this helps you confirm that the meta you wrote really produces the expected attributes, before the CSS styling is applied.

#Conclusion

Key takeaways:

• The lines meta accepts ranges and lists at once, e.g., lines={2-4,6}.
• Highlighted lines use the data-highlighted-line attribute.
• Highlight styling is done purely in CSS without client JavaScript.
• Word highlighting uses the word/{pattern} meta to match text.
• Matching tokens get the data-highlighted-chars attribute.
• Line and word highlighting can be combined in a single block.

In episode 8 you'll learn diff and code annotations: creating diff blocks with add and remove markers, marking important lines, and combining diff with highlighting and captions to present code changes clearly.