Components

Each page says when to use the component, how to write it in a post, and what it looks like. The examples run in a frame with only this system’s CSS, and follow the light or dark theme of these docs.

Component	In a post	What it does
Admonition	:::tip and four more, :::details	Pulls one point out of the reading flow
Spoiler	:spoiler[...], :::spoiler	Covers an answer until the reader asks for it
Abbreviation	:term[...]{note="..."}	Gives a term a one-line explanation
Steps	:::steps	Numbers a procedure
CodeBlock	A code fence	Shows code with its filename, line numbers and copy
TableScroll	A Markdown table	Lets a wide table scroll
OptionGroup	:::code-group	Shows one of several flavours of an instruction
FileTree	:::file-tree	Shows part of a project’s structure
Figure	An image on a line of its own	Shows an image with a caption, zoom and a placeholder
ImageGrid	:::gallery	Shows several images in a grid
VideoEmbed	::video	Plays a Bilibili, YouTube, AcFun or Vimeo video once the reader presses play
MathBlock	$...$, $$...$$	Shows a formula, typeset at build time
Mermaid	A mermaid code fence	Draws a diagram in a DiagramFrame
Links	Headings and links	Puts a # link beside headings and marks links to other sites
Fields	::::fields	Lists options with their types, defaults and descriptions
GitHubCard	::github	Shows a GitHub repository as a card