Markdown Features
Built-in and opt-in markdown pipeline features provided by zfb.
zfb's markdown pipeline provides a set of Core features that are always active, plus a set of Opt-in features that you enable individually in zfb.config.ts under markdown.features.
Core features
These 7 features are always active — no configuration required.
| Feature | Description |
|---|---|
| CJK Friendly | Improves spacing and line-breaking for CJK (Chinese, Japanese, Korean) prose. |
| Heading Links | Adds anchor links to h2+ headings for direct deep-linking. |
| Code Title | Renders a filename/title bar above fenced code blocks when title="…" is set. |
| Resolve Links | Resolves relative .mdx/.md links to clean doc URLs. |
| Strip .md Extension | Strips .md/.mdx from internal link hrefs in the final output. |
| Syntax Highlighting | Build-time semantic class highlighting mapped to the active color scheme. |
| Directives Registry | The generic :::name directive engine — maps directive syntax to JSX components. The admonition vocabulary is registered separately as a recipe. |
Opt-in features
These 14 features are opt-in at the zfb engine level — each is disabled unless explicitly configured, mostly under markdown.features.* (External Links and Image Enlarge use a differently-shaped key instead). This showcase doesn't hand-configure markdown itself, though: the zudoDoc({...}) preset pre-enables most of the markdown.features.* entries below out of the box — see each feature's own page for its exact preset default. A bare defineConfig({ markdown: { features: {...} } }) bypasses zudoDoc() entirely and discards everything else the preset wires (collections, chrome, code highlighting, and more), so always start from zudoDoc({...}) and extend its markdown block instead.
| Feature | Config key | Description |
|---|---|---|
| External Links | markdown.externalLinks | Adds target/rel to outbound links when enabled. Off by default — content-body links get no automatic visual indicator either way. |
| Admonitions Preset | directives | Registers the admonition vocabulary (note/tip/warning/danger/info/caution/details) via the directives map. |
| Mermaid | mermaid | Renders ```mermaid fences as diagrams via the client-side Mermaid library. |
| Image Enlarge | settings.imageEnlarge | Wraps images in a <figure> that expands them on click. Userland setting — the built-in markdown.features key was removed at next.18. |
| Heading Marker TOC | headingMarkerToc | Attaches per-heading anchor markers and feeds the TOC island. |
| GitHub Alerts | githubAlerts | Converts > [!NOTE]/[!TIP]/[!WARNING]/[!IMPORTANT]/[!CAUTION] blockquotes to admonition markup. |
| Reading Time | readingTime | Computes estimated reading time and exposes it as page-level metadata. |
| Code Enrichment | codeEnrichment | Adds diff/line/word-highlight decorations to already-highlighted code blocks. The title bar is a separate, always-on core feature (see Code Title), and the copy/wrap buttons are added to every code block regardless of whether this feature is enabled. |
| Code Tabs | codeTabs | Renders :::code-group directives as tabbed code panels via <CodeGroup>. |
| Ruby | ruby | Adds ruby annotation support ({base}^{ruby} syntax). |
| TOC Export | tocExport | Exports the page table-of-contents as an export const toc named export. |
| Image Dimensions | imageDimensions | Injects width/height attributes on images from disk metadata at build time. |
| Link Validation | linkValidation | Validates internal links at build time and warns (or errors) on broken references. |
| Transclude | transclude | Embeds the content of another file via :::include{file="…"}. Disabled in zudo-doc (transclude renderer not yet wired). |
Other pipeline knobs
zfb also exposes markdown.gfm (fine-grained GitHub-Flavored-Markdown construct toggles) and markdown.hardBreaks (converts every soft line break to <br>) as top-level markdown config keys. Neither is part of the Core/Opt-in census above. markdown.hardBreaks isn't configured in this project's zfb.config.ts, but the zudoDoc({...}) preset does set markdown.gfm: { taskListItem: true, footnoteDefinition: true } by default, so GFM task lists and footnotes render for real instead of as literal [ ] / [^1] text.