Home / Snippets / Typography /
Highlight specific line
For tutorials, highlight the one line that matters. Use a data-line attribute and a subtle background/outline—no JS required.
.card {border: 1px solid var(--card-border);border-radius: var(--radius-lg);background: var(--card);}
Quick implementation
/* Highlight line 3 */
.line[data-line="3"] {
background: oklch(0.62 0.18 255 / 0.18);
outline: 1px solid oklch(0.62 0.18 255 / 0.30);
border-radius: 0.5rem;
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer building documentation code blocks.
Goal: Highlight specific lines in a code block using CSS only.
Technical constraints:
- Render each line in a wrapper element (e.g. <span class=\"line\" data-line=\"3\">...).
- Use CSS to target a specific data-line value and add a subtle background + outline.
- Keep the highlight readable in dark mode and not too bright.
- Use a monospaced font and stable line-height.
Framework variant (pick one):
A) Vanilla HTML/CSS.
B) MDX/React: component that wraps lines and takes highlightLines=[3,5,9].
Edge cases to handle:
- Long lines: keep horizontal scrolling working.
- Multiple highlighted lines: allow a list of data-line values or an attribute.
- Copying code: ensure highlights don’t change copy output (keep text unchanged).
Return HTML + CSS.Why this matters in 2026
Tutorials are more effective when readers can instantly locate the one change that matters. Line highlighting also reduces cognitive load when scanning diffs or config snippets.
The logic
CSS can’t directly address “line 3” inside a plain <pre>, so the trick is structural: wrap each line and attach metadata (like data-line). Then highlighting becomes a simple selector.
Accessibility & performance
Highlights should not be the only cue. Keep contrast high and don’t rely solely on color if the highlight conveys meaning. Performance is fine for small snippets; for huge blocks, prefer server-side generation rather than doing line-splitting at runtime.