Markdown guide

Markdown turns plain text into formatted documents with a few simple marks. This guide covers everything Markdown Editor Preview understands. Try any example in the editor.

Headings

Start a line with one to six # signs and a space.

# Title
## Section
### Subsection

Emphasis

*italic* or _italic_
**bold**
***bold and italic***
~~strikethrough~~
`inline code`

Keyboard shortcuts: Ctrl/⌘ + B for bold and Ctrl/⌘ + I for italic.

Paragraphs and line breaks

Separate paragraphs with an empty line. A single line break inside a paragraph is joined into one line; end a line with two spaces or a backslash (\) to keep the break.

Lists

- Apples
- Oranges
  - Blood oranges (indent to nest)

1. First
2. Second
3. Third

Task lists

- [x] Write the draft
- [ ] Review it

Links

[Link text](https://example.com)
[With a title](https://example.com "Shown on hover")
<https://example.com>
[Jump to a heading](#tables)

Plain web addresses like https://example.com become links automatically.

Images

![Description of the image](https://example.com/photo.jpg)

The description is read aloud by screen readers and shown if the image can't load. Images from other sites can be set to load only when clicked in Settings.

Quotes and lines

> A quote.
> It can span several lines.

---

Three or more dashes on their own line draw a horizontal rule.

Code blocks

Fence code with three backticks and name the language for syntax highlighting:

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

Tables

| Fruit  | Price | Stock |
| :----- | ----: | :---: |
| Apple  |  1.20 |  yes  |
| Banana |  0.50 |  no   |

Colons in the divider row align a column left, right or center.

Footnotes

Markdown was created in 2004.[^1]

[^1]: By John Gruber, with Aaron Swartz.

Math

Write formulas in LaTeX between dollar signs, inline or as a block:

The area of a circle is $A = \pi r^2$.

$$
\int_0^1 x^2 \, dx = \frac{1}{3}
$$

Diagrams

A mermaid code block becomes a diagram: flowcharts, sequence diagrams, class and state diagrams, Gantt charts, pie charts and more.

```mermaid
graph LR
  A[Write] --> B{Looks good?}
  B -->|yes| C[Export]
  B -->|no| A
```

HTML

Basic HTML works too, such as <details>, <kbd> or <sub>. Scripts, styles, forms and embedded frames are removed for safety.

<details>
  <summary>Click to expand</summary>
  Hidden content.
</details>

Showing the marks themselves

Put a backslash before a character to show it as is: \*not italic\*, \# not a heading, \$5.