Markdown Syntax Showcase

This page is a visual reference for Dragon Blog’s Markdown renderer. Every
rendered example is followed by a code block containing the source used to
create it.

Frontmatter

Frontmatter supplies post metadata and is removed before the body is rendered.
The block must be the first thing in the file. title, tldr, description,
date, tags, cover, and locale are the usual post fields.

Markdown

1---
2title: Markdown Syntax Showcase
3tldr: A short summary used on post cards.
4description: A longer description of the post.
5date: 2026-07-28
6tags: markdown,showcase,reference
7cover: /images/noon-theme.png
8locale: en
9---

Optional post fields are also supported.

Markdown

1---
2slug: custom-url-name
3translationKey: shared-key-for-translations
4password: use-a-long-unique-passphrase
5course: rust
6courseOrder: 1
7courseLevel: Beginner
8courseStatus: wip
9courseHours: 2.5
10courseLearningPoints: Ownership | Borrowing | Lifetimes
11---

Headings

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

Markdown

1# Heading level 1
2## Heading level 2
3### Heading level 3
4#### Heading level 4
5##### Heading level 5
6###### Heading level 6

Heading levels 1–3 receive generated id attributes for linking. Duplicate
headings receive numeric suffixes. Setext headings are supported too.

Setext heading level 1

Setext heading level 2

Markdown

1Setext heading level 1
2======================
3
4Setext heading level 2
5----------------------

Paragraphs and line breaks

This is one paragraph with ordinary text.

This is a second paragraph.
This line starts after a hard break made with two trailing spaces.
Because the renderer enables soft breaks, this source line also starts on a new
visual line.

Markdown

1This is one paragraph with ordinary text.
2
3This is a second paragraph.  
4This line starts after a hard break made with two trailing spaces.
5Because the renderer enables soft breaks, this source line also starts on a new
6visual line.

Emphasis and decoration

Italic with asterisks, italic with underscores, bold with asterisks,
bold with underscores, bold italic, and ~~strikethrough~~.

Markdown

1*Italic with asterisks*, _italic with underscores_, **bold with asterisks**,
2__bold with underscores__, ***bold italic***, and ~~strikethrough~~.

Escaping Markdown

*These asterisks are literal* and # this is not a heading.

Markdown

1\*These asterisks are literal\* and \# this is not a heading.

Links and automatic links

Dragon Blog

https://example.com

Plain URLs are linkified automatically: https://example.com/docs

This link uses a reference.

Markdown

1[Dragon Blog](https://example.com "Optional title")
2
3<https://example.com>
4
5Plain URLs are linkified automatically: https://example.com/docs
6
7[This link uses a reference][dragon-reference].
8
9[dragon-reference]: https://example.com "Reference title"

Blockquotes

A blockquote can contain formatted text.

Blockquotes can be nested.

They can contain lists too.

Markdown

1> A blockquote can contain **formatted text**.
2>
3> > Blockquotes can be nested.
4>
5> - They can contain lists too.

Unordered lists

First item
Second item
- Nested item
- Another nested item
Third item

Markdown

1- First item
2- Second item
3  - Nested item
4  - Another nested item
5- Third item

Ordered lists

First item
Second item
3. Nested ordered item
4. Another nested item
Third item

Markdown

11. First item
22. Second item
3   3. Nested ordered item
4   4. Another nested item
55. Third item

An ordered list can start from a different number.

Item four
Item five

Markdown

14. Item four
25. Item five

Thematic break

Text above the rule.

Text below the rule.

Markdown

1Text above the rule.
2
3---
4
5Text below the rule.

Inline code

Use pnpm build to build the site. Markdown characters such as **literal**
remain literal inside inline code, and the rendered code includes a copy button.

Markdown

1Use `pnpm build` to build the site. Markdown characters such as `**literal**`
2remain literal inside inline code, and the rendered code includes a copy button.

Fenced code blocks

example.ts

1type Dragon = {
2    name: string;
3    canFly: boolean;
4};
5
6const toothless: Dragon = { name: "Toothless", canFly: true };

Markdown

1```ts example.ts
2type Dragon = {
3    name: string;
4    canFly: boolean;
5};
6
7const toothless: Dragon = { name: "Toothless", canFly: true };
8```

The filename is optional. Without it, the renderer displays the language name.
Unknown or omitted languages are still highlighted automatically.

Plain Text

1A plain fenced code block.

Markdown

1```plaintext
2A plain fenced code block.
3```

Indented code block

const renderedByMarkdownIt = true;

Markdown

1    const renderedByMarkdownIt = true;

Images

The image title becomes the caption. If the title is omitted, the alt text is
used as the caption. Images support lazy loading, copy-link, and a lightbox.

Dragon Blog day theme — Day theme preview

Markdown

1![Dragon Blog day theme](/images/day-theme.png "Day theme preview")

Markdown

1![Dragon Blog dark theme](/images/dark-theme.png)

Tables

Feature	Syntax	Interactive
Alignment	Colons	No
Overflow scroll	Automatic	Yes
Striped rows	Automatic	No

Markdown

1| Feature | Syntax | Interactive |
2|:--------|:------:|------------:|
3| Alignment | Colons | No |
4| Overflow scroll | Automatic | Yes |
5| Striped rows | Automatic | No |

Raw HTML

Raw HTML is enabled

HTML passes through the renderer, so only use trusted content.

Markdown

1<details>
2<summary>Raw HTML is enabled</summary>
3<p>HTML passes through the renderer, so only use trusted content.</p>
4</details>

Custom syntax

Custom checkboxes

⬜ To do
🟥 Cancelled
🟩 Finished
🟨 In progress
🟦 Planned
🟩 Finished with a sloganShipped on time

Markdown

1- [ ] To do
2- [x] Cancelled
3- [o] Finished
4- [-] In progress
5- [_] Planned
6- [o] Finished with a slogan | Shipped on time

Checkbox lines must be consecutive to form one checklist. A slogan uses a |
with at least one space on both sides.

Spoiler / hidden text

This sentence contains hidden text. Hover to reduce the blur and click to
reveal it. Formatting such as bold hidden text is processed inside.

Markdown

1This sentence contains ||hidden text||. Hover to reduce the blur and click to
2reveal it. Formatting such as ||**bold hidden text**|| is processed inside.

Highlights

Default highlight

Information highlight

Danger highlight

Success highlight

Warning highlight

Note highlight

Markdown

1==Default highlight==
2
3==[info] Information highlight==
4
5==[danger] Danger highlight==
6
7==[success] Success highlight==
8
9==[warn] Warning highlight==
10
11==[note] Note highlight==

Abbreviations

The HTML specification and
CSS control the page. Hover an abbreviation to see its
meaning.

Markdown

1The [HTML:HyperText Markup Language] specification and
2[CSS:Cascading Style Sheets] control the page. Hover an abbreviation to see its
3meaning.

Superscript and subscript

The area is 10 m², water is H₂O, and Einstein wrote E = mc².

Markdown

1The area is 10 m^2^, water is H~2~O, and Einstein wrote E = mc^2^.

Single tildes create subscript, while double tildes create
~~strikethrough~~.

Markdown

1Single tildes create subscript, while double tildes create
2~~strikethrough~~.

Comment / aside

This is a quiet comment or aside line.

Markdown

1-# This is a quiet comment or aside line.

The -# marker must appear at the start of its line.

Admonitions

A custom title

This is a note admonition with Markdown in its body.

Markdown

1:::(note)[A custom title]
2This is a note admonition with **Markdown** in its body.
3:::

Leave the title brackets empty to use the type’s default title.

Info

Use an empty title to display “Info”.

Tip

Tips share the green success styling.

Success

The operation completed successfully.

Warning

warn is normalized to the warning style.

Warning

The full warning type is also supported.

Danger

Something requires immediate attention.

Markdown

1:::(info)[]
2Use an empty title to display “Info”.
3:::
4
5:::(tip)[]
6Tips share the green success styling.
7:::
8
9:::(success)[]
10The operation completed successfully.
11:::
12
13:::(warn)[]
14`warn` is normalized to the warning style.
15:::
16
17:::(warning)[]
18The full `warning` type is also supported.
19:::
20
21:::(danger)[]
22Something requires immediate attention.
23:::

Admonitions may be nested.

Outer admonition

Outer content.

Inner admonition

Nested content.

Markdown

1:::(info)[Outer admonition]
2Outer content.
3
4:::(note)[Inner admonition]
5Nested content.
6:::
7:::

Fold / collapsible content

The fold body supports Markdown, lists, and other rendered content.

First hidden item
Second hidden item

Markdown

1>[info] Click to expand this fold
2The fold body supports **Markdown**, lists, and other rendered content.
3
4- First hidden item
5- Second hidden item
6<<<

Available fold types are info, note, success, warn, danger, and df.
An unknown type falls back to df.

Neutral note content.

Successful content.

Cautionary content.

Dangerous content.

Default cobalt styling.

Markdown

1>[note] Note fold
2Neutral note content.
3<<<
4
5>[success] Success fold
6Successful content.
7<<<
8
9>[warn] Warning fold
10Cautionary content.
11<<<
12
13>[danger] Danger fold
14Dangerous content.
15<<<
16
17>[df] Default fold
18Default cobalt styling.
19<<<

Folds may also be nested.

Outer content.

Inner content.

Markdown

1>[info] Outer fold
2Outer content.
3
4>[note] Inner fold
5Inner content.
6<<<
7<<<

Tabs

Use pnpm from a shell.

Use pnpm from PowerShell.

Use pnpm from Terminal.

Markdown

1[[Operating Systems]]
2[Linux]
3Use `pnpm` from a shell.
4
5[Windows]
6Use `pnpm` from PowerShell.
7
8[macOS]
9Use `pnpm` from Terminal.
10[[end]]

The group name creates the tab group’s ID, every [Label] starts a panel, and
the first panel is active by default.

Split columns

Left column

This content appears on the left.

Middle column

Add more <|> separators to create more columns.

Right column

Columns stack vertically on small screens.

Markdown

1<<
2### Left column
3
4This content appears on the left.
5<|>
6### Middle column
7
8Add more `<|>` separators to create more columns.
9<|>
10### Right column
11
12Columns stack vertically on small screens.
13>>

Combining custom syntax

Custom inline syntax can be combined in the same content block.

Release summary

🟩 Renderer documentationComplete
🟩 Interactive examplesComplete
🟦 More themesPlanned

Remember HTML, use semantic markup,
and keep spoilers such as the surprise ending hidden.

Markdown

1:::(success)[Release summary]
2- [o] Renderer documentation | Complete
3- [o] Interactive examples | Complete
4- [_] More themes | Planned
5
6Remember [HTML:HyperText Markup Language], use ==[success] semantic markup==,
7and keep spoilers such as ||the surprise ending|| hidden.
8:::

Writing Syntax

Markdown Syntax Showcase

Frontmatter

Headings

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

Setext heading level 1

Setext heading level 2

Paragraphs and line breaks

Emphasis and decoration

Escaping Markdown

Links and automatic links

Blockquotes

Unordered lists

Ordered lists

Thematic break

Inline code

Fenced code blocks

Indented code block

Images

Tables

Raw HTML

Custom syntax

Custom checkboxes

Spoiler / hidden text

Highlights

Abbreviations

Superscript and subscript

Comment / aside

Admonitions

Fold / collapsible content

Tabs

Split columns

Left column

Middle column

Right column

Combining custom syntax