MDViewer

Markdown syntax showcase

2026-07-27 2351 words 12 min read

One page covering every piece of Markdown syntax and every visual feature MDViewer supports: formulas, tables, diagrams, syntax highlighting, callouts, footnotes and more.

SyntaxShowcaseMermaidKaTeX

This page demonstrates everything MDViewer can render. Treat it as a rendering checklist — every block below should appear as typeset output, not as raw markup.

Tip

Download this file, open it with the reader on the home page, and you will get exactly the same result.

1. Text and inline formatting

An ordinary paragraph. Bold, italic, bold italic, strikethrough, underlined insertion, highlighted, inline code.

Subscript and superscript: H2O, E = mc2, the 42nd item.

An inline link to the CommonMark spec , an autolink https://developer.mozilla.org/ , and an internal link .

Abbreviations show their full form on hover: HTML and CSS are the foundations of the front end.

*[HTML]: HyperText Markup Language *[CSS]: Cascading Style Sheets

Emoji: 🚀 ✨ 📚 ✅ ⚠️

Force a line break with two trailing spaces: this line belongs to the same paragraph as the one above.

Show the Markdown Hide the Markdown 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

An ordinary paragraph. **Bold**, *italic*, ***bold italic***, ~~strikethrough~~, ++underlined insertion++, ==highlighted==, `inline code`.

Subscript and superscript: H~2~O, E = mc^2^, the 42^nd^ item.

An inline link to the [CommonMark spec](https://commonmark.org/), an autolink <https://developer.mozilla.org/>, and an [internal link](../quick-start/).

Abbreviations show their full form on hover: HTML and CSS are the foundations of the front end.

*[HTML]: HyperText Markup Language
*[CSS]: Cascading Style Sheets

Emoji: :rocket: :sparkles: :books: :white_check_mark: :warning:

Force a line break with two trailing spaces:
this line belongs to the same paragraph as the one above.

2. Heading levels

Headings get anchors automatically, the outline on the right jumps to them, and a # link appears at the end of a heading on hover.

Level 3 heading

Level 4 heading

Level 5 heading
Level 6 heading

3. Lists

Bulleted list

  • First item
  • Second item
    • Nested level two
      • Nested level three
  • Third item
Show the Markdown Hide the Markdown 
1
2
3
4
5

- First item
- Second item
  - Nested level two
    - Nested level three
- Third item

Numbered list

  1. Prepare the content
  2. Write it in Markdown
    1. Draft the text
    2. Preview as you go
  3. Publish it
Show the Markdown Hide the Markdown 
1
2
3
4
5

1. Prepare the content
2. Write it in Markdown
   1. Draft the text
   2. Preview as you go
3. Publish it

Task list

  • GFM task lists supported
  • Completed items are struck through
  • An unfinished item
  • Nesting supported
    • Sub-items can be ticked too
    • An unfinished sub-item
Show the Markdown Hide the Markdown 
1
2
3
4
5
6

- [x] GFM task lists supported
- [x] Completed items are struck through
- [ ] An unfinished item
- [ ] Nesting supported
  - [x] Sub-items can be ticked too
  - [ ] An unfinished sub-item

Definition list

Mermaid
A text-based syntax for diagrams, rendered as flowcharts, sequences and more.
Markdown
A lightweight markup language that expresses layout structure in plain text.
KaTeX
A math typesetting library that renders TeX formulas in the browser, very fast.
Show the Markdown Hide the Markdown 
1
2
3
4
5
6
7
8

Mermaid
: A text-based syntax for diagrams, rendered as flowcharts, sequences and more.

Markdown
: A lightweight markup language that expresses layout structure in plain text.

KaTeX
: A math typesetting library that renders TeX formulas in the browser, very fast.

4. Quotes and callouts

An ordinary blockquote. Quotes can contain inline formatting, code, and several paragraphs.

This is the second paragraph of the quote.

A nested quote.

Show the Markdown Hide the Markdown 
1
2
3
4
5

> An ordinary blockquote. Quotes can contain **inline formatting**, `code`, and several paragraphs.
>
> This is the second paragraph of the quote.
>
> > A nested quote.

GitHub-style callouts render as coloured cards with icons:

Note

General information that adds context without affecting the main flow.

Tip

A suggestion that saves you effort. For example: press ? to see every shortcut.

Important

Essential information for completing the task; skipping it leads to failure.

Warning

Something that needs your attention now; ignoring it may have consequences.

Caution

A risky operation — make sure you understand the outcome before running it.

Show the Markdown Hide the Markdown 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

> [!NOTE]
> General information that adds context without affecting the main flow.

> [!TIP]
> A suggestion that saves you effort. For example: press <kbd>?</kbd> to see every shortcut.

> [!IMPORTANT]
> Essential information for completing the task; skipping it leads to failure.

> [!WARNING]
> Something that needs your attention now; ignoring it may have consequences.

> [!CAUTION]
> A risky operation — make sure you understand the outcome before running it.

5. Code

Inline and fenced code

The install command is npm install; the config file is package.json.

1
2
3
4
5

# Find every Markdown file in the folder
find . -name "*.md" -not -path "./node_modules/*"

# Total up the word count
wc -w $(find . -name "*.md") | tail -1

Highlighting across languages 

1
2
3
4
5
6
7
8

import MarkdownIt from 'markdown-it';

const md = new MarkdownIt({ html: true, linkify: true });

export function render(source) {
  const { data, content } = parseFrontMatter(source);
  return { meta: data, html: md.render(content) };
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

from dataclasses import dataclass


@dataclass
class Document:
    path: str
    words: int

    @property
    def minutes(self) -> int:
        """Estimate reading time at 450 Chinese characters per minute."""
        return max(1, round(self.words / 450))


docs = [Document("readme.md", 1280), Document("guide.md", 3400)]
print(sum(d.minutes for d in docs), "minutes")
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

package main

import (
	"fmt"
	"strings"
)

func Slugify(title string) string {
	return strings.ToLower(strings.ReplaceAll(title, " ", "-"))
}

func main() {
	fmt.Println(Slugify("Hello Markdown World"))
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

#[derive(Debug, Clone)]
pub struct Heading {
    pub level: u8,
    pub text: String,
}

impl Heading {
    pub fn anchor(&self) -> String {
        self.text.to_lowercase().replace(' ', "-")
    }
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

SELECT d.path,
       COUNT(h.id) AS heading_count,
       SUM(d.words) AS total_words
FROM documents AS d
LEFT JOIN headings AS h ON h.doc_id = d.id
WHERE d.updated_at >= '2026-01-01'
GROUP BY d.path
HAVING COUNT(h.id) > 3
ORDER BY total_words DESC
LIMIT 20;
1
2
3
4
5
6
7
8

markup:
  goldmark:
    extensions:
      passthrough:
        enable: true
        delimiters:
          block: [["\\[", "\\]"], ["$$", "$$"]]
          inline: [["\\(", "\\)"], ["$", "$"]]
1
2
3
4
5

  function render(source) {
-   return marked(source);
+   const { data, content } = parseFrontMatter(source);
+   return md.render(content);
  }

The top-right corner of a code block offers copy, line numbers and soft wrap buttons; blocks over 24 lines collapse automatically.

6. Tables

Alignment syntax is supported, headers sort on click, and wide tables scroll horizontally.

Feature Engine Size Loading
Markdown parsing markdown-it 505 KB First paint
Syntax highlighting highlight.js In the main bundle First paint
Math formulas KaTeX 261 KB On demand
Diagrams Mermaid 3.3 MB On demand
Full-text search Fuse.js In the main bundle First paint
Show the Markdown Hide the Markdown 
1
2
3
4
5
6
7

| Feature | Engine | Size | Loading |
|:--------|:------:|-----:|:--------|
| Markdown parsing | markdown-it | 505 KB | First paint |
| Syntax highlighting | highlight.js | In the main bundle | First paint |
| Math formulas | KaTeX | 261 KB | On demand |
| Diagrams | Mermaid | 3.3 MB | On demand |
| Full-text search | Fuse.js | In the main bundle | First paint |

Left, centre and right alignment come from :---, :---: and ---: respectively.

A table with rich content

Syntax Written as Result
Bold **text** text
Code `code` code
Formula $a^2+b^2$ $a^2+b^2$
Link [name](url) name
Show the Markdown Hide the Markdown 
1
2
3
4
5
6

| Syntax | Written as | Result |
|--------|-----------|--------|
| Bold | `**text**` | **text** |
| Code | `` `code` `` | `code` |
| Formula | `$a^2+b^2$` | $a^2+b^2$ |
| Link | `[name](url)` | [name](https://example.com) |

7. Math

Inline formulas

Mass–energy equivalence $E = mc^2$ and Euler’s identity $e^{i\pi} + 1 = 0$ can both sit inside a sentence. As $n \to \infty$, $\sum_{k=1}^{n} \frac{1}{k^2} \to \frac{\pi^2}{6}$.

Show the Markdown Hide the Markdown 
1

Mass–energy equivalence $E = mc^2$ and Euler’s identity $e^{i\pi} + 1 = 0$ can both sit inside a sentence. As $n \to \infty$, $\sum_{k=1}^{n} \frac{1}{k^2} \to \frac{\pi^2}{6}$.

Display formulas

$$ \int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi} $$

Matrices

$$ A = \begin{pmatrix} a_{11} & a_{12} & \cdots & a_{1n} \\ a_{21} & a_{22} & \cdots & a_{2n} \\ \vdots & \vdots & \ddots & \vdots \\ a_{m1} & a_{m2} & \cdots & a_{mn} \end{pmatrix} $$

Multi-line alignment

$$ \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} \\ \nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \end{aligned} $$

Piecewise functions and integrals

$$ f(x) = \begin{cases} x^2 & \text{if } x \geq 0 \\ -x^2 & \text{if } x < 0 \end{cases} \qquad \hat{f}(\xi) = \int_{-\infty}^{\infty} f(x)\, e^{-2\pi i x \xi}\, dx $$

8. Diagrams (Mermaid)

Diagrams recolour automatically with the light or dark theme; hover to copy the source or download the SVG from the top-right corner.

Flowchart

Sequence diagram

Class diagram

State diagram

Entity-relationship diagram

Gantt chart

Pie chart

User journey

Mind map

Git graph

9. Collapsible sections

Click to expand: why is the diagram engine loaded on demand?

Bundled, Mermaid is about 3.3 MB — the largest dependency in the whole project. Putting it in the main bundle would mean every reader downloads it, even for a document without a single diagram.

MDViewer therefore splits Mermaid and KaTeX into separate ES modules and fetches them with a dynamic import() only when a mermaid code block or a formula actually appears on the page. For a text-only document, the first paint needs about 505 KB.

Click to expand: which front matter formats are supported?

All three. The reader detects them and shows them in a collapsible card under the document title:

  • YAML: wrapped in ---, the most common
  • TOML: wrapped in +++
  • JSON: wrapped in { }

Fields such as title, description, date, author and tags are lifted into the document header and shown separately.

Show the Markdown Hide the Markdown 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<details>
<summary>Click to expand: why is the diagram engine loaded on demand?</summary>

Bundled, Mermaid is about 3.3 MB — the largest dependency in the whole project. Putting it in the main bundle would mean every reader downloads it, even for a document without a single diagram.

MDViewer therefore splits Mermaid and KaTeX into separate ES modules and fetches them with a dynamic `import()` only when a `mermaid` code block or a formula actually appears on the page. For a text-only document, the first paint needs about 505 KB.

</details>

<details>
<summary>Click to expand: which front matter formats are supported?</summary>

All three. The reader detects them and shows them in a collapsible card under the document title:

- **YAML**: wrapped in `---`, the most common
- **TOML**: wrapped in `+++`
- **JSON**: wrapped in `{ }`

Fields such as `title`, `description`, `date`, `author` and `tags` are lifted into the document header and shown separately.

</details>

10. Footnotes

Markdown was created in 20041 as a way to write formatted text in plain files. Most tools today follow the CommonMark specification2, with GitHub-flavoured extensions layered on top3.

  1. Designed by John Gruber with Aaron Swartz, aiming for text that reads naturally even before it is rendered. ↩︎

  2. A precise specification published in 2014 that removed most of the ambiguity in the original description. ↩︎

  3. Adds tables, task lists, strikethrough and autolinks — the syntax most people expect today. ↩︎

Show the Markdown Hide the Markdown 
1
2
3
4
5

Markdown was created in 2004[^origin] as a way to write formatted text in plain files. Most tools today follow the CommonMark specification[^spec], with GitHub-flavoured extensions layered on top[^gfm].

[^origin]: Designed by John Gruber with Aaron Swartz, aiming for text that reads naturally even before it is rendered.
[^spec]: A precise specification published in 2014 that removed most of the ambiguity in the original description.
[^gfm]: Adds tables, task lists, strikethrough and autolinks — the syntax most people expect today.

11. Images

Images can be clicked to enlarge, zoomed with the wheel and panned by dragging. An image with a title renders with a centred caption.

The three-column reading view of MDViewer
Three columns: file tree on the left, content in the middle, outline on the right

12. Raw HTML

HTML can be written directly in Markdown and is rendered as-is:

Badge component Written as raw HTML Ctrl + K
Show the Markdown Hide the Markdown 
1
2
3
4
5
6

<div style="display:flex;gap:.75rem;flex-wrap:wrap;align-items:center">
  <span class="badge">Badge component</span>
  <span class="badge">Written as raw HTML</span>
  <kbd>Ctrl</kbd> + <kbd>K</kbd>
  <progress value="72" max="100" style="width:8rem"></progress>
</div>

13. Escapes and special characters

Backslash escapes: *not italic*, `not code`, # not a heading.

HTML entities: © — … → ≤ ≠

Punctuation and mixed scripts: “quotation marks”, 《book titles》, em dashes — and ellipses…

Show the Markdown Hide the Markdown 
1
2
3
4
5

Backslash escapes: \*not italic\*, \`not code\`, \# not a heading.

HTML entities: &copy; &mdash; &hellip; &rarr; &le; &ne;

Punctuation and mixed scripts: “quotation marks”, 《book titles》, em dashes — and ellipses…

Rendering checklist

If every item below matches what you see, the whole rendering pipeline is working:

  • Headings have anchors, and the outline jumps to them and highlights the current position
  • Code blocks have colouring, a language label and a copy button
  • Tables have borders and hover striping, and headers sort on click
  • Inline and display formulas render as mathematical typesetting, not raw LaTeX
  • All ten Mermaid diagrams appear as vector graphics
  • Callouts render as coloured cards with icons
  • Footnotes link in both directions
  • Images enlarge when clicked
  • Switching to dark mode recolours the diagrams