The default Shiki pipeline applies build-time syntax highlighting with a dual github-light / github-dark theme. The features below are opt-in via fence metadata.

Title bar

Line numbers

Highlighted lines

Title + line numbers + highlights combined

Diff with red/green backgrounds

Word-wrap toggle

Long lines in code blocks overflow horizontally by default — the block grows a scrollbar at the bottom. Click the Wrap button in any block's header to soft-wrap long lines onto multiple visual lines instead; click again to restore horizontal scrolling.

Try the Wrap button in the header above ↑ to see the long line collapse into multiple soft-wrapped lines.

Mermaid still works (regression check)

Tabbed code groups

Group adjacent fences into a single tabbed widget by wrapping them in a :::code-group container directive. Tab names come from the [label] token after the language. The mechanism is pure CSS (radio inputs + sibling selectors) — zero JavaScript, zero hydration cost.

When a tab label matches a known package manager, language, or common config filename, an icon appears automatically before the label. Resolution is handled by resolveCodeGroupIcon in src/lib/code-group-icons.ts.

Filename labels also resolve — e.g. tsconfig.json, vite.config.ts, or Dockerfile:

Tabs work across languages too — handy for showing the same algorithm in multiple implementations:

Annotate individual lines with // [!code …] comments. Six markers are supported — focus, diff, highlight, error, warning — using the language's native comment style (// in C-family, # in Python, -- in SQL, etc.):

// [!code focus] dims the rest of the block so the focused subset stands out; hover the block to reveal the dimmed lines. // [!code error] / [!code warning] tint the line with a colored left-border (red / amber). [!code ++] / [!code --] color individual lines without needing a diff-language fence.

Notation comments work in any language — Python:

GitHub-flavored alerts

Add a [!TYPE] marker on the first line of a blockquote to render it as a GitHub-style callout. Five types are supported, each with its own color, icon, and label:

rST equivalents (.. note:: / .. tip:: / .. important:: / .. warning:: / .. caution::) render with matching colors via docutils' admonition directives — same visual treatment across both pipelines.

Explicit plaintext