Line Highlighting

Put a brace list after the language and those lines get a tinted background and a 2px accent bar down the left edge. The list takes single line numbers, ranges written with a hyphen, or any combination of the two.

Quick Start

One number, one highlighted line.

interface User {
  id: string
  name: string
}

```typescript {3}
interface User {
  id: string
  name: string
}
```

Adding Options

A hyphen makes a range, and the range is inclusive at both ends.

interface User {
  id: string
  name: string
  email: string
  role: 'admin' | 'user'
}

```typescript {2-4}
interface User {
  id: string
  name: string
  email: string
  role: 'admin' | 'user'
}
```

Advanced

Mix numbers and ranges in one list, and add spaces wherever they help you read it. {1, 3 - 5, 8} parses exactly like {1,3-5,8}.

type Status = 'active' | 'inactive'
 
export interface User {
  id: string
  name: string
  email: string
  status: Status
}

```typescript {1, 3 - 5, 8} title="models/user.ts"
type Status = 'active' | 'inactive'
 
export interface User {
  id: string
  name: string
  email: string
  status: Status
}
```

Options

Rules the parser follows

• Numbers are physical line positions inside the fence, counted from 1. A starting offset from showLineNumbers=N changes the printed number but not the index you write here.
• Ranges run low to high. {5-3} highlights nothing, because the range is read as "from 5 up to 3".
• Numbers past the end of the block are dropped silently, so trimming a snippet never breaks the page.
• Only the first brace group in the metastring is read. In {2} {4}, line 2 is highlighted and {4} is ignored — write {2,4} instead.
• Blank lines count. An empty line inside the fence takes a number and can be highlighted like any other.
• Highlighting composes with everything else on the fence: a title, a line offset, a word pattern, diff markers, and expandable all apply at the same time.

How it looks

A highlighted row gets the accent-muted background and a 2px accent bar on its left edge, and the tint stretches the full width of the block so it reads as a band rather than a box. On a block with the numbered gutter the band starts before the number, which keeps the row unbroken from the very left edge.