Kitchen sink
Every element of this site's Markdown pipeline performs once on this page: inline marks, wikilinks, tables that turn into cards, callouts in three spellings, math, code frames, diagrams, emoji shortcodes, GFM extras — and the reading time in the strip above is the pipeline's too. That the page builds at all is the demonstration: the content guard rejects every malformed spelling listed at the end, so what you see is what the dialect accepts. Two switches this site leaves off — the sections numbering preset and the base sub-path prefix — are described in the guide.
§1.1Inline marks
Emphasis parsing is CJK-friendly: bold closes even against Chinese punctuation — **报文。**同时 renders as 报文。同时, not as literal asterisks. Italic, strikethrough and inline code work as usual; with the gemoji switch a shortcode such as :sparkles: renders as ✨. Characters inside inline code take part in no parsing, so backticks are the safe way to show syntax: **, $…$ and > [!note] all appear literally. To show an asterisk in prose, escape it — *like this* stays plain.
§1.2Wikilinks
With the wikilinks switch on, [[double-bracket]] links resolve against the note collection the way a wiki expects: by id (design-tokens), by alias (boundaries reaches the note whose id is three-way-split), with a label (the getting-started guide), and with an anchor (checks#the-render-layer-probe). A target that resolves to nothing renders as a marked dead link instead of failing the build — and the engine's check-wikilinks CLI reports it in CI, where link rot belongs.
§1.3Tables: scroll when wide, cards when narrow
A table of six or more columns should reflow one row per card in a narrow container, instead of squeezing each cell to two characters. This seven-column table is both the callout-variant cheat sheet and a live test of that reflow (shrink the window to phone width):
| Variant | Class | Quote-syntax keywords | Border | Ground | Default title | Typical use |
|---|---|---|---|---|---|---|
| note | callout | note info | 赭 ochre --color-accent3 | math ground --color-math-bg | Note | neutral side notes |
| intuition | callout intuition | tip intuition hint | 黛 teal --color-accent2 | math ground | Intuition | analogies that build intuition |
| warn | callout warn | warn warning caution danger | 石 burnt orange --color-accent | 8% accent mix | Warning | heads-up before risky steps |
| system | callout system | important system | 紫 violet --color-accent4 | 8% violet mix | Important | system-level conventions |
| abstract | callout abstract | abstract summary quote | faint ink --color-ink-faint | soft surface --color-bg-soft | Abstract | chapter-opening summaries |
| bad | callout bad | (raw HTML only) | 石 burnt orange | 10% accent mix | — | recorded mistakes, rejected designs |
Default titles are English; a site swaps the whole set through siteMarkdown's calloutLabels option, e.g. calloutLabels: { tip: '直觉 · Intuition' }. A title written in the quote syntax (> [!tip] My title) always wins.
§2.1Callouts: three spellings
First, the Obsidian/GitHub quote syntax (available with callouts: true, works in plain Markdown files too):
Obsidian's fold marker is honoured — > [!note]- renders collapsed, > [!note]+ open:
A folded note
Click the title to open it. Folded callouts render as <details> with the title as their <summary>.
Second, the package component in MDX (astro-inkstone/components/Callout.astro, imported by path). Without a title it shows the variant's default label, the same one the quote syntax uses:
Third, raw HTML, all six variants in one pass (matching base.css's .callout rules one-to-one):
.callout class is exactly this.§2.2Math
Inline formulas sit in the text: optical depth reads . Display math takes the three-line form ($$ on its own lines) — the guard rejects the single-line form, which would silently render as a small inline formula:
The formula ground is deliberately a different paper from the body's, and swaps with the theme. Incidentally, escape dollar prices in prose: this coffee costs $3.
§3.1Code frames
A fence with title="…" gets a file-name title bar; the copy button in the corner is site-wide. [!code ++] / [!code --] line annotations render as diff grounds:
def build_pipeline(opts):
plugins = [remark_math]
plugins = [remark_gemoji, remark_math]
return assemble(plugins, guard=opts.guard)A frame marked collapse starts folded and only takes space when opened — right for long config files:
inkstone.example.yamlExpandCollapse
site:
markdown:
numbering: chapters
math: true
codeFrame: true
mermaid: true
callouts: true
wikilinks: true
styles:
- astro-inkstone/styles/tokens.css
- astro-inkstone/styles/base.cssDual-theme highlighting comes from shiki emitting both color sets at once; base.css picks one by data-theme in a single place — no specificity tug-of-war.
§3.2Mermaid diagrams
A ```mermaid fence leaves only a placeholder at build time; the renderer loads dynamically only on pages that carry a diagram (pages without one pay nothing), and re-renders when the theme flips:
flowchart LR A["astro-inkbrush<br/>engine: editing / dialect / guard"] --> C["your site<br/>identity / routing / deploy"] B["astro-inkstone<br/>paper: tokens / styles / pipeline"] --> C A -. one shared dialect .-> B
§3.3GFM extras
Task lists and footnotes ride along with GFM:
- tokens imported
- base.css imported
- identity palette overridden
A claim worth sourcing gets a footnote.1
§4.1What the guard rejects on this page
That this page builds is itself the demonstration that everything above is well-formed. These spellings would fail the build on the spot (try one, then npm run build):
- an emphasis marker that cannot pair, like a
**left unclosed at a line's end; - single-line
$$x$$(use the three-line form); - hand-numbered headings — writing this section's heading as
## 9. What the guard…would collide with the build-time numbering and get flagged; - MDX evaluating your prose braces:
{0,1,2,3}would render as just3, so the guard demands the escaped form {0,1,2,3}; - a formula KaTeX cannot render (the guard re-renders every formula in strict mode instead of letting red error text ship).
Footnotes
-
Footnotes render at the page foot with back-links, styled by the content layer. ↩