Write plainly
Markdown is text with a few light marks. This is every one of them, what it does, and a place to try it.
Try it
A short test
Write anything here and watch it render on the right. Try highlights, code, and links.
Edit me, or clear the box and start fresh.
- Read the guide
- Write something
Text
The everyday marks. Paragraphs are separated by a blank line.
Bold
Strong emphasis. Use it sparingly.
This is **bold** text.
This is bold text.
Italic
Light emphasis, titles, foreign words.
This is *italic* text.
This is italic text.
Bold + italic
Both at once.
This is ***both***.
This is both.
Strikethrough
Marks something as no longer true.
I ~~loved~~ like fast things.
I loved like fast things.
Highlight
Underlines an idea in yellow.
The ==important== part.
The important part.
Inline code
Monospace, for names and commands.
Run `npm run dev` to start.
Run npm run dev to start.
Keyboard keys
Draws a little keycap.
Press <kbd>⌘</kbd> + <kbd>K</kbd>.
Press ⌘ + K.
Line break
End a line with a backslash to break without a new paragraph.
First line\ Second line
First line
Second line
Smart typography
Quotes curl, dashes and ellipses are typeset for you. Just type plainly.
"Quotes" -- en dash, --- em dash, and...
“Quotes” – en dash, — em dash, and…
Headings
Headings build the page outline and get their own anchor link.
# / ## Section
The main heading. Gets an orange square. A single # renders the same as ##.
## A section heading
#### Label
A small uppercase label. Use for tiny captions.
#### A label
A label
Links & images
External links get a small arrow automatically.
Inline link
Text, then the URL. Add a "title" for a tooltip.
[Svelte](https://svelte.dev "Svelte")
Reference link
Define the URL once, reuse it by name.
Read the [docs][kit]. [kit]: https://svelte.dev/docs/kit
Read the docs.
Autolink
Bare URLs and <angle> URLs become links.
https://vercel.com or <https://svelte.dev>
Image
An image alone on its line becomes a figure. The quoted title becomes the caption.
Lists
Indent two spaces to nest.
Bulleted
Dashes (or * or +).
- One - Two - Nested - Nested
- One
- Two
- Nested
- Nested
Numbered
Numbers count themselves, so start any number.
1. First 2. Second 3. Third
- First
- Second
- Third
Task list
Checkboxes, ticked with an x.
- [x] Done - [ ] Not yet
- Done
- Not yet
Blocks
Boxes that change how a passage sits on the page. Open with ::: and close with :::.
Blockquote
Borrowed words. Start each line with >.
> A blockquote, for borrowing someone else's words.
A blockquote, for borrowing someone else’s words.
:::note
A sidenote. Floats into the margin on wide screens, inline on small ones.
:::note A **sidenote** in the margin. :::
:::pullquote
A large quote for the line you want remembered. Text after the keyword is the attribution.
:::pullquote Someone wise Less, but better. :::
Less, but better.
:::callout
A boxed aside with a title. :::tip, :::info and :::warning work too.
:::callout Tip Callouts are boxed asides. :::
:::aside
The quieter version of a callout.
:::aside An aside, softly. :::
:::wide
Lets content (a table, an image) break out of the reading column.
:::wide | A | B | | - | - | | 1 | 2 | :::
| A | B |
|---|---|
| 1 | 2 |
Code
Fence with three backticks. Add a language for colour and a title for a filename.
Fenced code
Language after the backticks (js, ts, py, sh, css, html…); title="…" adds a header.
```js title="hello.js"
export function greet(name) {
return `Hello, ${name}!`;
}
```export function greet(name) {
return `Hello, ${name}!`;
}Tables
Pipes make columns. The second row sets alignment with colons.
Table
:-- left, :-: centre, --: right.
| Syntax | Result | Align | | :-- | :-: | --: | | `**bold**` | **bold** | left | | `*em*` | *em* | right |
| Syntax | Result | Align |
|---|---|---|
**bold** | bold | left |
*em* | em | right |
Footnotes & dividers
Footnote
Reference in the text, definition anywhere. They collect at the bottom with a link back.
A claim worth sourcing.[^1] [^1]: Footnotes collect at the bottom.
Divider
Three dashes on their own line.
Above --- Below
Above
Below
Tips & tricks
- 01
Write first, format later
Get the sentences down in plain paragraphs. Add bold, headings and callouts on a second pass, when you know what matters.
- 02
One idea per paragraph
Leave a blank line between paragraphs. A single line break inside a paragraph is just a space.
- 03
Use ## for sections
Skip # entirely; it renders like ##. Reach for ### only when a section really splits in two.
- 04
Emphasis is a seasoning
If everything is bold, nothing is. Prefer italic for tone and keep bold for the one thing a skimmer must see.
- 05
Type plainly
Use straight quotes and -- or ---. The renderer turns them into proper typography so you never need to hunt for special characters.
- 06
Margins over footnotes
:::note keeps an aside next to what it comments on. Use a footnote when it is a citation, a note when it is a thought.
- 07
Escape with a backslash
To show a literal asterisk or bracket, put a backslash before it: \*not italic\*.
- 08
Code in backticks
Anything a reader might copy (commands, filenames, keys) belongs in `inline code` or a fenced block.