Code tabs
2 minutes read
Code tabs group several code blocks under one set of labels, so the same example can show npm, pnpm, and yarn without taking three times the height. Without JavaScript every block stays visible under its title; the island turns the titles into a WAI-ARIA tab list.
Syntax
A container directive whose body is one or more fenced code blocks:
:::code-tabs{labels='["npm","pnpm"]'}
```bash
npm install mizzen
```
```bash
pnpm add mizzen
```
:::Options
| Name | Type | Default | What it does |
|---|---|---|---|
labels |
JSON array of strings | the block's position | One label per block, in order: '["npm","pnpm"]'. |
id |
string | code-tabs |
Prefix for the group's element ids. Give each group on a page its own id. |
The value of labels is JSON, so use single quotes around it in the directive and double quotes inside. A missing or empty label reads as the block's position.
Example
npm
npm install mizzenpnpm
pnpm add mizzenNotes
- The tab list starts
hidden; without JavaScript the panels stack, each under its label. - Arrow keys move between tabs,
HomeandEndgo to the ends, and the arrows follow the reading direction in right-to-left pages. - Choosing a label in one group switches every group on the page that offers it, and the choice is remembered on later pages.
- A chosen label is also written to
?lang=in the address bar, replacing the current history entry, so a copied URL reopens that example in every group that offers it. Other query parameters and any unrelated fragment stay as they were. - A fragment that points into a closed panel — a heading inside one, or the panel itself — opens that panel on load and whenever the fragment changes. The reader is not scrolled twice when the panel was already visible.
- The blocks are plain fenced code inside the group; the
codecomponent does not run inside code tabs yet, so the tabs show the fence without Shiki colors.