Skip to content

Markdown Guide

Complete syntax reference with live examples.

Headings

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

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Emphasis

markdown
**bold text**
*italic text*
~~strikethrough~~
**_bold and italic_**
`inline code`

bold text

italic text

strikethrough

bold and italic

inline code

Lists

markdown
- Unordered item
- Another item
  - Nested item
  - Another nested

1. First item
2. Second item
3. Third item
   1. Nested ordered
  • Unordered item
  • Another item
    • Nested item
    • Another nested
  1. First item
  2. Second item
  3. Third item
    1. Nested ordered

Links & Images

markdown
[Link text](https://example.com)
[With title](https://example.com "Title")

Reference-style:
[link text][ref]
[ref]: https://example.com

Images:
![Alt text](image.png)
![Alt text][img]
[img]: image.png "Caption"

Link text

With title

Reference-style:

link text

Images:

Alt text

Code

markdown
Use `inline code` in prose.

```javascript
function greet(name) {
  return `Hello, ${name}!`
}
```

```python
def greet(name):
    return f"Hello, {name}!"
```

Use inline code in prose.

javascript
function greet(name) {
  return `Hello, ${name}!`
}
python
def greet(name):
    return f"Hello, {name}!"

Tables

markdown
| Column A | Column B | Column C |
|----------|:--------:|---------:|
| Left     | Center   | Right    |
| Alpha    | Beta     | Gamma    |
| One      | Two      | Three    |
Column AColumn BColumn C
LeftCenterRight
AlphaBetaGamma
OneTwoThree

Task Lists

markdown
- [x] Completed task
- [x] Another done item
- [ ] Pending task
- [ ] Not started yet
  • Completed task
  • Another done item
  • Pending task
  • Not started yet

Blockquotes

markdown
> A blockquote paragraph.
> It can span multiple lines.
>
> > Nested blockquote.
> > More nested content.

A blockquote paragraph.

It can span multiple lines.

Nested blockquote.

More nested content.

Mermaid Diagrams

markdown
```mermaid
graph TD
  A[Start] --> B{Decision}
  B -->|Yes| C[Do it]
  B -->|No| D[Skip it]
  C --> E[End]
  D --> E
```

Renders as an interactive diagram in the editor. Use the mermaid language identifier in a fenced code block.

Line Numbers

markdown
Append = after the language name
to enable line numbers:

```typescript=
interface User {
  id: string
  name: string
}
```

```python=
def calculate(x, y):
    return x + y
```

Append = after the language identifier to show line numbers:

typescript=
interface User {
id: string
name: string
}

$ ready to write?

Try the editor →