ReferencePipelineEvergreenupdated 2026.086 min read
Reference · the Markdown pipeline, performed

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.

4 parts · every switch this site turns on · the guard's rejections listed at the end

PART IText

§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.

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):

VariantClassQuote-syntax keywordsBorderGroundDefault titleTypical use
notecalloutnote info赭 ochre --color-accent3math ground --color-math-bgNoteneutral side notes
intuitioncallout intuitiontip intuition hint黛 teal --color-accent2math groundIntuitionanalogies that build intuition
warncallout warnwarn warning caution danger石 burnt orange --color-accent8% accent mixWarningheads-up before risky steps
systemcallout systemimportant system紫 violet --color-accent48% violet mixImportantsystem-level conventions
abstractcallout abstractabstract summary quotefaint ink --color-ink-faintsoft surface --color-bg-softAbstractchapter-opening summaries
badcallout bad(raw HTML only)石 burnt orange10% accent mixrecorded 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.

PART IICallouts and math

§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):

Note
A neutral aside. The unmodified .callout class is exactly this.

Intuition
Teal left edge, for paragraphs about how to think of it rather than what it is.

Warning
Burnt-orange left edge over an 8% accent ground — appears before the step that can go wrong.

System
Violet left edge, for system-level conventions: understand why it exists before changing it.

Abstract
Faint-ink edge on the soft surface, for the quick overview at a chapter's head.

Bad
Records mistakes and rejected implementations. Without this variant, the fact that something is wrong gets lost silently.

§2.2Math

Inline formulas sit in the text: optical depth reads τ=κρds\tau = \int \kappa \rho \, \mathrm{d}s. 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:

01x2dx=13\int_0^1 x^2 \, \mathrm{d}x = \frac{1}{3}

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.

PART IIICode and diagrams

§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:

pipeline.py
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
yaml
site:
  markdown:
    numbering: chapters
    math: true
    codeFrame: true
    mermaid: true
    callouts: true
    wikilinks: true
  styles:
    - astro-inkstone/styles/tokens.css
    - astro-inkstone/styles/base.css

Dual-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

PART IVThe guard

§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 just 3, 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

  1. Footnotes render at the page foot with back-links, styled by the content layer.

Titles, sections and body text, in this language.
    ↑↓ · Enter · Escastro-inkstone