Loading...

Markdown Reference Guide

This page demonstrates every supported Markdown feature in this app. Each section shows the rendered output followed by the raw syntax that produced it.

---

1. Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Syntax:

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

---

2. Text Formatting

Bold text — wrap with **double asterisks** or __double underscores__

Italic text — wrap with *single asterisk* or _single underscore_

Bold and italic — combine with ***triple asterisks***

Strikethrough — wrap with ~~double tildes~~ (single tilde is disabled)

Inline code — wrap with a single backtick

Syntax:

**Bold text**
*Italic text*
***Bold and italic***
~~Strikethrough~~
Inline `code`

---

3. Blockquotes

This is a blockquote.

It can span multiple lines.

Nested blockquotes go deeper.

Syntax:

> This is a blockquote.
>
> It can span multiple lines.
>
> > Nested blockquotes go deeper.

---

4. Lists

Unordered

• Item A
• Item B
  • Nested B1
  • Nested B2
• Item C

Syntax:

- Item A
- Item B
  - Nested B1
  - Nested B2
- Item C

Ordered

1. First
2. Second
   1. Nested
   2. Also nested
3. Third

Syntax:

1. First
2. Second
   1. Nested
   2. Also nested
3. Third

Task List (GFM)

• Completed task
• Incomplete task
• Another done item
• Still to do

Syntax:

- [x] Completed task
- [ ] Incomplete task

---

5. Links & Images

Inline link

Link with title

Bare autolink: https://example.com

Syntax:

[Inline link](https://example.com)
[Link with title](https://example.com "Visit Example")
https://example.com
![Alt text](https://picsum.photos/400/120)

---

6. Code Blocks

Fenced block — plain rendering (no syntax highlighting):

function greet(name) {
  return "Hello, " + name;
}

With a language hint (class is applied but not highlighted):

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

Syntax: Open a fenced block with three backticks and an optional language tag on the same line, then close with three backticks on their own line:

plain code block (no language tag)

javascript code block (use js, ts, py, sql, bash, etc.)

---

7. Tables (GFM)

Column A	Column B	Column C
Left	Center	Right
Apple	Banana	Cherry
1	2	3

Column alignment is set in the separator row: --- left, :---: center, ---: right.

Syntax:

| Column A | Column B | Column C |
|----------|:--------:|---------:|
| Left     | Center   | Right    |

---

8. Horizontal Rule

Three or more dashes on their own line:

---

Syntax:

---

---

9. Footnotes (GFM)

This sentence references footnote one.¹

This sentence references a named footnote.²

Syntax:

Sentence with a footnote.[^1]

[^1]: Footnote definition text.

---

10. Math — KaTeX

Inline math using single dollar signs: $E = mc^2$

Inline fraction: rac{a}{b} + sqrt{x^2 + y^2}

Block math using double dollar signs:

$$int_{-infty}^{infty} e^{-x^2}, dx = sqrt{pi}$$ egin{pmatrix} a & b \ c & d end{pmatrix}

Syntax:

Inline: $E = mc^2$

Block:
$$
int_{0}^{1} x^2, dx = rac{1}{3}
$$

---

11. Mermaid Diagrams

Any fenced block with the mermaid language tag is rendered as a diagram.

Flowchart

Syntax: Use a fenced code block with mermaid as the language tag:

flowchart TD
    A[Start] --> B{Decision}
    B -- Yes --> C[Result]

Sequence Diagram

Syntax: Use a fenced code block with mermaid as the language tag:

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: Hello Bob!
    Bob-->>Alice: Hi Alice!

Pie Chart

Gantt Chart

---

12. Feature Summary

Feature	Syntax	Notes
Headings	# H1 … ###### H6	Six levels
Bold	**text**
Italic	*text*
Strikethrough	~~text~~	Double tilde only
Inline code	`code`

Footnotes

1. Definition of footnote one — rendered at the bottom of the document. ↩

2. Named footnotes work the same way. ↩