Skip to content
Diagrams, chess, math

Diagrams, chess, math

All three are opt-in integration options — nothing is shipped to the client unless a page actually uses it.

Mermaid diagrams

blogTheme({ mermaid: true })

A fenced ```mermaid code block becomes a diagram, rendered client-side. Set mermaid: "prerender" to render diagrams to static SVG at build time instead (needs Chromium — browser-actions/setup-chrome in CI); pages fall back to client-side rendering if prerendering fails.

Chess positions (FEN)

blogTheme({ chess: true, chessEngine: true })

A fenced ```fen code block with a FEN string renders to an SVG chess board at build time — no client-side library, no JavaScript, just for the diagram. chessEngine: true additionally ships Stockfish (WASM) for interactive boards where you explicitly opt in per-board.

Math (KaTeX)

blogTheme({ math: true })

Standard $inline$ and $$block$$ LaTeX math, rendered with KaTeX.

Callouts

GitHub-style callouts work out of the box, no option needed — a blockquote starting with [!TYPE] becomes a styled <aside>:

> [!NOTE]
> Something worth calling out.

Supported types: note, tip, important, warning, caution.