File Title

Write title="path/to/file" in the metastring and the block's header bar shows that path on the left, next to an icon. The header bar itself is always there. Without a title it falls back to the language's display name, so setting a title replaces that label rather than adding a new row.

Quick Start

Name the file the snippet came from.

export async function createSession() {
  return new SignJWT({}).sign(secret)
}

```typescript title="lib/auth.ts"
export async function createSession() {
  return new SignJWT({}).sign(secret)
}
```

Adding Options

Single quotes work the same as double quotes, and shell languages swap the file glyph for a terminal glyph.

cp .env.example .env.local
npm install
npm run dev

```bash title='scripts/setup-env.sh'
cp .env.example .env.local
npm install
npm run dev
```

Advanced

A title sits happily beside every other option. Here it rides along with a highlighted line, a starting line number, and a word pattern.

export function buildSearchIndex(): SearchItem[] {
  const searchIndex: SearchItem[] = []
  return searchIndex
}

```typescript {2} title="lib/search-index.ts" showLineNumbers=48 /SearchItem/
export function buildSearchIndex(): SearchItem[] {
  const searchIndex: SearchItem[] = []
  return searchIndex
}
```

Options

The parser is deliberately simple, and a few consequences follow from that:

• The value can't be empty. title="" matches nothing, so the block falls back to the language name.
• The value can't contain a quote of either kind, because the first quote after the opening one ends the value.
• Spaces are fine: title="src/my file.ts" reads through to the closing quote.
• Only the first title= in the metastring is used; a second one is ignored.
• There is no way to hide the header bar from MDX. Every fenced block renders one.

What the header bar carries

The bar is a single row with three parts, left to right:

• An icon. bash, sh, shell, zsh, powershell, terminal, and console get a terminal glyph; every other language gets a file glyph.
• The title text, truncated with an ellipsis when the block is too narrow for it.
• The language display name and the copy button, pushed to the right edge.

Inside a code group the title does double duty: it becomes the tab label for that block, which is why every block in a group should carry a distinct one.