Every fenced code block on the site, and the component that turns a mermaid fence
into a diagram.

## What it adds

The card around the code — the filename, an icon for its language, and a copy
button — plus optional line numbers.

## Languages

Every language Shiki ships is highlighted, and every alias it knows along with
them: `ts` and `typescript`, `py` and `python`, `yml` and `console` all colour
the same. Nothing to configure — the layer lists them all, and an own `langs`
entry is added to that list rather than replacing it.

A name Shiki does not know falls back to plain text. It warns while you develop
and says nothing in a production build, so a typo like ````pyhton```` ships as
grey text without failing anything.

Four aliases are the exception, for a reason no list can fix: `c++`, `c#`, `f#`
and `文言` cannot be a package subpath, so the grammar behind them is reached by
its own name — write `cpp`, `csharp`, `fsharp` or `wenyan`.

## Line numbers

Opt-in per fence, written in its meta:

`````md
```ts line-numbers
```
`````

Not on by default: most snippets in documentation are four lines long and a
gutter of numbers next to them is noise. The numbers are drawn by a CSS counter,
so a reader copying the block gets the code and not the numbering.

## Shiki annotations

Two work on the fence itself beyond the four Content ships:

| Written                | Does                        |
| :--------------------- | :-------------------------- |
| ```` ```ts {2,4-6} ```` | Highlights those lines      |
| ```` ```ts /useDuxtConfig/ ```` | Highlights that word |

## API

### Props

| Prop       | Type     | Notes                                |
| :--------- | :------- | :----------------------------------- |
| `code`     | `string` | The raw source, for the copy button  |
| `language` | `string` | From the fence                       |
| `filename` | `string` | From the fence's `[…]`               |