ProsePre

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:

```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:

#API

#Props