Syntax Test

This page is a fully-fledged syntax check: it exercises every markdown feature the renderer supports, gathered in one place so we can eyeball the output. If something renders wrong here, it renders wrong everywhere.

Headings

The title above is an h1; the remaining levels follow.

Third-level heading

Fourth-level heading

Text formatting

A paragraph with bold, italic, bold italic, inline code, strikethrough and a link. This sentence runs a little longer so we can check the line height and how comfortably the text wraps once it reaches the edge of the column and continues onto the next line.

Links

Every flavour of link, to check colour, underline and hover states:

• Inline link: Documentation Page
• Reference-style link: [reference link][ref] (defined once, reused)
• Angle-bracket autolink: <https://documentation.page/>
• Email autolink: <[email protected]>
• Bare URLs in text are not auto-linked, so wrap them: <https://documentation.page/documentation>
• Relative link to another page: the Configuration page
• Link to a heading on another page: jump to name
• Link wrapping inline code: package.json
• Link wrapping bold text: important link
• A link that is long enough to wrap across more than one line so we can confirm the underline follows the text correctly as it breaks onto a second line mid-sentence.

A linked image (click through):

[ref]: https://documentation.page/

Lists

Unordered, with nesting:

• First item
• Second item
  • Nested one
  • Nested two
• Third item

Ordered:

1. Step one
2. Step two
3. Step three

Code

Inline const answer = 42, then fenced blocks in a few languages:

// JavaScript
const greet = (name) => `Hello, ${name}!`;
console.log(greet("world"));

// TSX
type Props = { name: string };
export const Hello = ({ name }: Props) => <h1>Hi {name}</h1>;

{
  "name": "documentation-page",
  "nested": { "list": [1, 2, 3], "flag": true }
}

A plain, unhighlighted code block.

Headings inside a code block must render literally, and must not affect the real document:

# Not a real heading
## Also not real

Math

Inline math like {E}={m}{{c}}^2 and {{a}}^2+{{b}}^2={{c}}^2 flows within the text, subscripts and all: {{x}}_1,{{x}}_2,\dots ,{{x}}_{{n}}. Display math is centered on its own line:

Tables

Blockquotes

A single-line quote.

A second paragraph, with formatting inside.

Alerts

Note

Useful information the reader should know.

Tip

A helpful tip.

Important

Key information worth highlighting.

Warning

Something to be careful about.

Caution

The negative consequences of an action.

Details

Hidden content, revealed on toggle, with code, and a short list:

• one
• two

</details>

Horizontal rule

Above the rule.

Below the rule.