Markdown lab
This lab shows source and actual reader output. The examples are documentation, not automatic commands, approvals or task records. Build a disposable copy to compare your changes; editor preview is not identical to final reader rendering.
What the engine renders
| Feature | Owner |
|---|---|
| Core Markdown | markdown-it |
| Bare links | Linkification |
| Punctuation | Typographer |
| Code color | Highlight.js or escaped text |
| Heading links | Anchor plugin |
| Tables | Markdown parser |
| Footnotes | Footnote plugin |
| Task boxes | Task-list plugin |
| Five alerts | V2 build plugin |
| Diagrams | Browser-local Mermaid |
| Raw HTML | Off unless owner enables it |
This is not MDX, math support, an application runtime or a plugin compatibility promise. Markdown syntax explains boundaries; Frontmatter explains YAML/route metadata.
Headings and text
## Inspect one task
Use **strong text** for the consequence, *emphasis* for a short distinction,
and `literal-value` for exact input. A normal paragraph gives context.
Inspect one task
Use strong text for the consequence, emphasis for a short distinction, and literal-value for exact input. A normal paragraph gives context.
The rendered example uses H3 to avoid adding a second H2 with this page’s own section title. H2-H4 become search sections. On-this-page rail uses H2 only; H1/H5/H6 do not create heading search entries. Copy actual generated permalink rather than guessing fragments, especially repeated or non-Latin headings.
Lists and quotations
1. Confirm the target.
2. Read the response.
- Check the HTTP status.
- Check the actual content.
> A status code alone does not identify the intended document.
- Confirm the target.
- Read the response.
- Check the HTTP status.
- Check the actual content.
A status code alone does not identify the intended document.
Indent nested items consistently and inspect actual grouping. A quoted paragraph is authored content, not independently verified advice or authorization.
Copyable code
node --version
npm --version
These read installed tool versions. Node must be 24+ for this pin; npm must be available. They do not install dependencies or change your environment.
Use a language label for supported highlighting. Unknown languages remain escaped code. Code Copy copies block text, not header/button. It does not run the command. Clipboard support and secure context still matter; select manually when it fails. Long code has its own horizontal scroll rather than authoring the whole page wider.
To show a fenced block inside a Markdown source example, use a longer outer fence:
```bash
node --version
```
Comparison table
| Action | Changes |
| --- | --- |
| Save | Server source |
| Build | Generated output |
| Deploy | Reader host |
| Action | Changes |
|---|---|
| Save | Server source |
| Build | Generated output |
| Deploy | Reader host |
Use short cells and prose for full procedures. Pinned styling does not make every wide table fit phones. Recompose many columns/long tokens without losing qualifications. Check 320/390 widths and longest rows. A comparison is not a substitute for expected result and recovery.
Five alert types
> [!NOTE]
> A useful aside.
> [!TIP]
> A simpler checked approach.
> [!IMPORTANT]
> Preserve the prerequisite.
> [!WARNING]
> Build recreates its selected output; keep source outside it.
> [!CAUTION]
> Stop when the target path is uncertain.
NOTE A useful aside.
TIP A simpler checked approach.
IMPORTANT Preserve the prerequisite.
WARNING Build recreates its selected output; keep source outside it.
CAUTION Stop when the target path is uncertain.
Names are matched case-insensitively at the start of blockquote inline content. Unknown markers do not create new alert types. Text must state the consequence; color/icon is supporting presentation. Inspect multiline/nested quotations before release. Alerts do not require raw HTML.
Task boxes
- [x] Source reviewed.
- [ ] Release after approval.
- Source reviewed.
- Release after approval.
Boxes are disabled rendered document content. Checked state is author-entered, not evidence of actual review and not a reader’s saved task status. Track real work/approval outside the page.
Footnote reference and return
Local libraries do not make remote images local.[^network]
[^network]: Authored remote images contact their own hosts.
Local libraries do not make remote images local.[1]
Follow the rendered reference and return link. Keep essential instructions in main prose; footnotes are supporting detail. Editor preview does not load all reader footnote/task plugins, so preview mismatch does not prove final build lacks the feature.
Links and image source
[First site](/start/first-site/)

First site is a real handbook route. An image requires actual reviewed bytes at its served path; this code sample does not certify a particular screenshot filename. Use descriptive alt text and normal prose, not only tiny image labels. Root-relative authored links need deployment-prefix review.
Bare URL example: https://docs.example.com is fictional, not your live reader address. Linkification does not certify its destination or permission. Links and media covers remote requests, downloads and correct target verification.
A real diagram
flowchart TD Save[Save intended source] --> Build[Build output] Build --> Review[Review reader] Review --> Deploy[Deploy reviewed files]
The required workflow is Save, Build, Review, Deploy. Arrows are not background automation. Editor Publish changes local output; external deployment remains separate. This prose also makes the diagram’s conclusion searchable because diagram source is stripped from search text.
Mermaid 12.1.0 is bundled locally and loads lazily. Build creates source container, not rendered SVG. Inspect actual diagram in both themes and phone layout. V2 has no built-in diagram zoom/fullscreen controls. Mermaid diagrams gives failure checks and accessible-text requirements.
Raw HTML boundary
<strong>This is HTML source to inspect, not permission to enable HTML.</strong>
A code fence remains literal even when HTML is enabled. Ordinary raw HTML is disabled by default; only owner file configuration with boolean allowRawHtml: true enables it. Browser writers cannot toggle that policy. This is not a general HTML sanitizer or a reason to trust imported content. Prefer supported Markdown.
Complete the lab
| Check | Evidence |
|---|---|
| Headings | Actual IDs and search targets |
| Code | Exact clipboard text or clear failure |
| Table | Phone-readable comparison |
| Alerts | Five intended titles and text |
| Tasks | Disabled checked/unchecked boxes |
| Footnote | Reference and return reach real targets |
| Link/media | Intended destination/bytes/audience |
| Diagram | Actual SVG plus equivalent prose |
| Themes | Legible light/dark content |
A local rendering check is not grammar certification for all Mermaid types, real Safari testing, universal accessibility or production-host verification. Record what you actually checked; do not turn a green build into those broader claims.
Authored remote images contact their own hosts. ↩︎