Markdown All-Elements Test Article

This is a dedicated Markdown all-elements test article for the current blog. Its purpose is not to argue for a topic, but to cover as many supported rendering cases as possible: basic Markdown, GFM extensions, native HTML mixed into Markdown, and the site’s own callout / note / timeline / tabs / button / label styling shells.

Basic text and inline elements

This paragraph includes italic, bold, bold italic, ~~strikethrough~~, inline code, and highlighted text.

You can also test superscript and subscript: E = mc², H₂O, and an abbreviation with a tooltip: HTML.

Here are several link styles:

inline link: Astro official site
autolink: https://github.com/withastro/astro
email link: mailto:test@example.com
reference-style link: reference link example
in-page anchor link: jump to code blocks
in-page section link: jump to image and caption tests
internal article link: open the local archive article
self-reference link: return to the article marker

For keyboard input, this site can also display Ctrl + K.

Heading levels

This is a level-three heading

The block below exists mainly to confirm spacing, typography rhythm, and the right-side TOC behavior.

This is a level-four heading

Level-four headings are useful for checking whether the hierarchy remains readable as the size scales down.

This is a level-five heading

This one is rarely needed in normal writing, but it belongs in a full rendering test.

This is a level-six heading

The point here is simply to confirm that even the deepest built-in heading level still behaves sensibly.

Lists, nested lists, and task lists

Unordered list:

First item
Second item
- nested child item
- another nested child item
Third item

Ordered list:

Step one: confirm frontmatter is valid
Step two: confirm the route is generated
Step three: confirm the visual system stays intact

Task list:

GFM task lists render correctly
GFM tables render correctly
Footnotes render correctly
KaTeX math rendering is active

Quotes, rules, and escaping

This is a standard blockquote.

It can include multiple paragraphs, emphasis, and inline code.

This is a second blockquote, just to verify consecutive quote spacing.

A horizontal rule follows:

Escaping examples:

*this is not italic*, # this is not a heading, and `this is not inline code`.

Tables

Column	Alignment	Example
Left	`:---`	Alpha
Center	`:---:`	Beta
Right	`---:`	42

Code blocks

TypeScript

1
type ArticleSection = {
2
  title: string;
3
  enabled: boolean;
4
  tags?: string[];
5
};
6

7
const section: ArticleSection = {
8
  title: 'Markdown Playground',
9
  enabled: true,
10
  tags: ['gfm', 'callout', 'timeline'],
11
};
12

13
console.log(section);

Bash

1
pnpm dev
2
pnpm build
3
pnpm preview

JSON

1
{
2
  "title": "Markdown Playground",
3
  "lang": "en",
4
  "features": ["table", "footnote", "html", "callout"]
5
}

Diff

1
old theme color
2
new blue editorial system

Mathematics

This section is dedicated to verifying that KaTeX is actually active in the article pipeline.

Inline math examples: $E = mc^2$ , $f(x)=\sin x + \cos x$ , and $\alpha,\beta,\gamma \in \mathbb{R}$ .

Display math:

\int_0^1 x^2\,dx = \left[\frac{x^3}{3}\right]_0^1 = \frac{1}{3}

Aligned equations:

\begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\ \nabla \cdot \mathbf{B} &= 0 \\ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \end{aligned}

Piecewise function:

f(x) = \begin{cases} x^2, & x \ge 0 \\ -x, & x < 0 \end{cases}

Matrix example:

A = \begin{bmatrix} 1 & 2 & 3 \\ 0 & 1 & 4 \\ 0 & 0 & 1 \end{bmatrix}

Here is one more notation pattern that feels closer to an academic paper: the Gaussian density $p(x)=\frac{1}{\sqrt{2\pi\sigma^2}}\exp\left(-\frac{(x-\mu)^2}{2\sigma^2}\right)$ followed by a standalone likelihood objective:

\mathcal{L}(\theta) = \sum_{i=1}^{N} \log p_\theta \left(y_i \mid x_i\right)

Images, captions, reference-style images, and native details

The image below exists to confirm default Markdown image rendering:

Cloud sunset demo image

Markdown also supports reference-style image syntax:

Reference-style image test

If you want an image that also acts as a link, you can wrap it in an anchor:

Standard Markdown does not natively define figure captions, so the reliable fallback is usually figure + figcaption in raw HTML:

Cloud sunset figure with caption test — Figure 1. A native HTML figure / figcaption example used to confirm that captions can live inside the current article styling system.

Here is one footnote reference¹, followed by a second footnote², so the footnote block can be tested under multiple entries.

Click to expand a native details / summary example

This disclosure block does not depend on an extra plugin. It uses native HTML and is useful for FAQ content, appendix notes, or optional explanations.

If the goal is simply to confirm expand/collapse behavior, this example is enough.

Callout / Note blocks

The blocks below are meant to test the note styles already defined in the theme.

Info Callout

This is an information-style callout using the note info modern class combination, plus an icon variant.

Success Callout

This kind of block works well for completed steps, recommendations, or verified outcomes.

Warning Callout

A useful reminder: styling alone does not guarantee a native feature. Math is now enabled through KaTeX, but automatic figure numbering and bibliography management still need extra tooling or conventions.

Danger Callout

If you later want to test more aggressive raw HTML, custom embeds, or complex widgets, it is safer to place them in a dedicated playground article.

Labels and buttons

Inline label styles:

Blue Green Orange Purple

And button styles:

Jump to code Jump to callout Jump to timeline

Timeline block

Phase one: confirm CommonMark basics

2026-07-18 10:09

Headings, paragraphs, emphasis, lists, quotes, horizontal rules, and code blocks should all render normally.

Phase two: confirm GFM extensions

2026-07-18 10:10

Task lists, tables, footnotes, and autolinks should parse correctly.

Phase three: confirm native HTML styling shells

2026-07-18 10:11

Callouts, labels, buttons, timeline blocks, tabs, and details should remain visually consistent with the site's editorial system.

Tabs block

The tabs below are useful for testing the visual shell. At the moment, the project ships the styles but not a dedicated interaction script for these tab items, so only the first panel is shown by default.

Markdown

HTML Extensions

Notes

This panel represents the Markdown and GFM layer: tables, task lists, footnotes, code fences, and ordinary document structure.

This panel is where native HTML extensions usually sit: callouts, labels, buttons, timeline blocks, and custom disclosure structures.

If you want fully interactive tabs later, a small client-side script can be added without changing the content model.

Final note

If this article renders correctly, it usually means:

the Astro Markdown pipeline is healthy
GFM features like tables, task lists, and footnotes are working
KaTeX is active for inline and display math
the theme’s callout / label / button / timeline styling shells are intact
raw HTML mixed into Markdown remains usable in the current article system

If you want a second-stage playground later for math, Mermaid, bibliography references, figure numbering, or more advanced layout experiments, that can be added as another dedicated test article.

This is the first footnote, used to test numbering, backlink behavior, and footnote block styling. ↩
This is the second footnote, mainly to verify stable spacing and ordering under multiple notes. ↩