Cheatsheets:Markdown: Difference between revisions
m →Code |
Standardize: add copy button to block code snippets |
||
| (14 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
{{Cheatsheet}} | {{Cheatsheet}} | ||
Markdown is plain text with a few magic markers that can be rendered into HTML-formatted text. | |||
New to Markdown? [https://commonmark.org/help/tutorial/ CommonMark interactive tutorial] may interest you. | |||
<blockquote> | <blockquote> | ||
This page is a syntax reference for '''CommonMark''', the standard. GitHub Flavored | |||
page is a syntax reference for '''CommonMark''', the standard. GitHub Flavored | |||
Markdown (GFM) extensions are covered in the [[#GFM extensions|GFM extensions]] | Markdown (GFM) extensions are covered in the [[#GFM extensions|GFM extensions]] | ||
section. | section. | ||
</blockquote> | </blockquote> | ||
| Line 20: | Line 18: | ||
|- | |- | ||
| | | | ||
<syntaxhighlight lang="markdown"> | <syntaxhighlight lang="markdown" copy> | ||
# Pancakes | # Pancakes | ||
| Line 36: | Line 34: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
|| | || | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html" copy> | ||
<h1>Pancakes</h1> | <h1>Pancakes</h1> | ||
<p>A quick pancake recipe for two.</p> | <p>A quick pancake recipe for two.</p> | ||
| Line 71: | Line 69: | ||
* '''Two paragraphs must be separated by a blank line.''' | * '''Two paragraphs must be separated by a blank line.''' | ||
* A single newline becomes a space when rendered. | * A single newline becomes a space when rendered. | ||
* For a '''hard linebreak''' within a paragraph, use < | * For a '''hard linebreak''' within a paragraph, use <syntaxhighlight lang="text" inline>\</syntaxhighlight> | ||
{| class="wikitable" | {| class="wikitable" | ||
| | | | ||
<syntaxhighlight lang="markdown"> | <syntaxhighlight lang="markdown" copy> | ||
line one | line one | ||
line two | line two | ||
| Line 84: | Line 82: | ||
<blockquote>line one line two</blockquote> | <blockquote>line one line two</blockquote> | ||
|| | || | ||
<syntaxhighlight lang="markdown"> | <syntaxhighlight lang="markdown" copy> | ||
line one\ | line one\ | ||
line two | line two | ||
| Line 116: | Line 114: | ||
|- | |- | ||
| | | | ||
<syntaxhighlight lang="markdown"> | <syntaxhighlight lang="markdown" copy> | ||
#Pancakes | #Pancakes | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| Line 123: | Line 121: | ||
<blockquote>#Pancakes</blockquote> | <blockquote>#Pancakes</blockquote> | ||
|| | || | ||
<syntaxhighlight lang="markdown"> | <syntaxhighlight lang="markdown" copy> | ||
# Pancakes | # Pancakes | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| Line 145: | Line 143: | ||
| <syntaxhighlight lang="markdown" inline>***both***</syntaxhighlight> || <em><strong>both</strong></em> | | <syntaxhighlight lang="markdown" inline>***both***</syntaxhighlight> || <em><strong>both</strong></em> | ||
|} | |} | ||
<blockquote> | |||
'''Emphasis needs word boundaries''' — underscores inside a word are literal, not emphasis: | |||
{| class="wikitable" | |||
! Source !! Rendered | |||
|- | |||
| <syntaxhighlight lang="markdown" copy>foo_bar_baz</syntaxhighlight> || foo_bar_baz (literal, no emphasis) | |||
|- | |||
| <syntaxhighlight lang="markdown" copy>*foo bar* baz</syntaxhighlight> || <em>foo bar</em> baz | |||
|} | |||
</blockquote> | |||
== Links and images == | == Links and images == | ||
{| class="wikitable" | {| class="wikitable" | ||
| Line 158: | Line 166: | ||
|} | |} | ||
Alternatively to classic links like <syntaxhighlight lang="markdown" inline>[CommonMark](https://commonmark.org)</syntaxhighlight>, you can also use reference-style links, which allow you to refer to the target link with an arbitrary placeholder then declare the equivalence of the placeholder to your target link at the end of the file. This allows you to reuse a link in multiple places without repeating it. | |||
{| class="wikitable" | {| class="wikitable" | ||
! Source !! Rendered | ! Source !! Rendered | ||
|- | |- | ||
| <syntaxhighlight lang="markdown"> | | <syntaxhighlight lang="markdown" copy> | ||
[CommonMark][cm] | [CommonMark][cm] | ||
| Line 173: | Line 181: | ||
== Lists == | == Lists == | ||
Unordered markers <syntaxhighlight lang="markdown" inline>-</syntaxhighlight>, <syntaxhighlight lang="markdown" inline>*</syntaxhighlight> and <syntaxhighlight lang="markdown" inline>+</syntaxhighlight> are interchangeable | === Unordered === | ||
The markers <syntaxhighlight lang="markdown" inline>-</syntaxhighlight>, <syntaxhighlight lang="markdown" inline>*</syntaxhighlight> and <syntaxhighlight lang="markdown" inline>+</syntaxhighlight> are interchangeable — the same list, three ways: | |||
<syntaxhighlight lang="markdown"> | {| class="wikitable" | ||
| | |||
<syntaxhighlight lang="markdown" copy> | |||
- fruit | |||
- veg | |||
</syntaxhighlight> | |||
|| | |||
<syntaxhighlight lang="markdown" copy> | |||
* fruit | |||
* veg | |||
</syntaxhighlight> | |||
|| | |||
<syntaxhighlight lang="markdown" copy> | |||
+ fruit | |||
+ veg | |||
</syntaxhighlight> | |||
|} | |||
All three render identically: | |||
<blockquote> | |||
<ul> | |||
<li>fruit</li> | |||
<li>veg</li> | |||
</ul> | |||
</blockquote> | |||
For a nested list, indent: | |||
<syntaxhighlight lang="markdown" copy> | |||
- fruit | - fruit | ||
- apple | - apple | ||
| Line 194: | Line 233: | ||
</ul> | </ul> | ||
</blockquote> | </blockquote> | ||
'''Note:''' | |||
<blockquote> | <blockquote> | ||
''' | Each indentation level can be either <code>\s\s</code> (2 spaces), <code>\s\s\s\s</code>(4 spaces), or <code>\t</code> (1 tab), depending | ||
on the configuration of your markdown renderer. In the majority of cases, 2 spaces work. Verify the docs of your markdown renderer. | |||
</blockquote> | |||
=== Ordered === | |||
Numbering starts from the first item's number, whatever you write afterwards: | |||
{| class="wikitable" | |||
| | |||
<syntaxhighlight lang="markdown" copy> | |||
3. Mix the flour and milk. | |||
4. Cook the batter in a pan. | |||
</syntaxhighlight> | |||
|| | |||
<syntaxhighlight lang="markdown" copy> | |||
3. Mix the flour and milk. | |||
5. Cook the batter in a pan. | |||
</syntaxhighlight> | |||
|| | |||
<syntaxhighlight lang="markdown" copy> | |||
3. Mix the flour and milk. | |||
800. Cook the batter in a pan. | |||
</syntaxhighlight> | |||
|} | |||
All three render identically — the numbers after the first are ignored: | |||
<blockquote> | |||
<ol start="3"> | |||
<li>Mix the flour and milk.</li> | |||
<li>Cook the batter in a pan.</li> | |||
</ol> | |||
</blockquote> | |||
<blockquote> | |||
'''Do not leave a blank line between items''': They will be rendered to give a loose feeling: | |||
{| class="wikitable" | {| class="wikitable" | ||
| | | | ||
<syntaxhighlight lang="markdown"> | <syntaxhighlight lang="markdown" copy> | ||
1. fruit | |||
1. veg | |||
</syntaxhighlight> | </syntaxhighlight> | ||
Rendered: | Rendered: | ||
<blockquote> | <blockquote> | ||
< | <ol> | ||
<li>fruit</li> | <li>fruit</li> | ||
<li>veg</li> | <li>veg</li> | ||
</ | </ol> | ||
</blockquote> | </blockquote> | ||
|| | || | ||
<syntaxhighlight lang="markdown"> | <syntaxhighlight lang="markdown" copy> | ||
1. fruit | |||
1. veg | |||
</syntaxhighlight> | </syntaxhighlight> | ||
Rendered: | Rendered: | ||
<blockquote> | <blockquote> | ||
< | <ol> | ||
<li><p>fruit</p></li> | <li><p>fruit</p></li> | ||
<li><p>veg</p></li> | <li><p>veg</p></li> | ||
</ | </ol> | ||
</blockquote> | </blockquote> | ||
|} | |} | ||
| Line 245: | Line 320: | ||
'''Fenced blocks''' — three backticks; the word after the opening fence enables syntax highlighting: | '''Fenced blocks''' — three backticks; the word after the opening fence enables syntax highlighting: | ||
<syntaxhighlight lang="text"> | <syntaxhighlight lang="text" copy> | ||
```python | ```python | ||
print("hi") | print("hi") | ||
| Line 253: | Line 328: | ||
Rendered: | Rendered: | ||
<syntaxhighlight lang="python"> | <syntaxhighlight lang="python" copy> | ||
print("hi") | print("hi") | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<blockquote> | <blockquote> | ||
'''Legacy syntax:''' | '''Legacy syntax-indented code blocks:''' Four leading spaces also produce a | ||
code block, without highlighting | code block, without highlighting: | ||
easy to break (a blank line ends it, and the indentation must change inside | |||
lists). | <syntaxhighlight lang="markdown" copy> | ||
print("hi") | |||
</syntaxhighlight> | |||
Rendered: | |||
<syntaxhighlight lang="text" copy> | |||
print("hi") | |||
</syntaxhighlight> | |||
This form is '''not recommended''' — it is easy to break (a blank line ends | |||
it, and the indentation must change inside lists). Since this used to be the standard for early versions of commonMark, you may still see it in older documents. | |||
</blockquote> | </blockquote> | ||
== Blockquotes == | == Blockquotes == | ||
Start with <syntaxhighlight lang="markdown" inline>></syntaxhighlight> for a blockquote. | |||
If you would like to include blank lines within the blockquote, type a line with a single<syntaxhighlight lang="markdown" inline>></syntaxhighlight>: | |||
<syntaxhighlight lang="markdown"> | <syntaxhighlight lang="markdown" copy> | ||
> quoted line | > quoted line | ||
> | > | ||
| Line 284: | Line 371: | ||
'''Nested quotes''' — <syntaxhighlight lang="markdown" inline>>></syntaxhighlight>: | '''Nested quotes''' — <syntaxhighlight lang="markdown" inline>>></syntaxhighlight>: | ||
<syntaxhighlight lang="markdown"> | <syntaxhighlight lang="markdown" copy> | ||
> outer | > outer | ||
> | > | ||
| Line 302: | Line 389: | ||
== GFM extensions == | == GFM extensions == | ||
GitHub Flavored Markdown (GFM) used on | |||
GitHub | GitHub and increasingly elsewhere, extends commonMark syntax with the following additions: | ||
'''Strikethrough''' — two tildes: | '''Strikethrough''' — two tildes: | ||
| Line 313: | Line 400: | ||
|} | |} | ||
'''Tables''' | '''Tables''' | ||
<syntaxhighlight lang="markdown"> | <syntaxhighlight lang="markdown" copy> | ||
| Left | Center | Right | | | Left | Center | Right | | ||
|:-----|:------:|------:| | |:-----|:------:|------:| | ||
| Line 322: | Line 408: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
When rendered, the first column is left-aligned (<syntaxhighlight lang="text" inline>:-----</syntaxhighlight>), the second center-aligned (<syntaxhighlight lang="text" inline>:-----:</syntaxhighlight>) and the third | |||
right-aligned: | right-aligned (<syntaxhighlight lang="text" inline>-----:</syntaxhighlight>): | ||
<blockquote> | <blockquote> | ||
| Line 332: | Line 418: | ||
</blockquote> | </blockquote> | ||
'''Task lists''' | '''Task lists''' | ||
<syntaxhighlight lang="markdown" copy> | |||
<syntaxhighlight lang="markdown"> | |||
- [x] mix the batter | - [x] mix the batter | ||
- [ ] cook the pancakes | - [ ] cook the pancakes | ||
| Line 345: | Line 430: | ||
☐ cook the pancakes | ☐ cook the pancakes | ||
</blockquote> | </blockquote> | ||
== Escaping == | == Escaping == | ||
| Line 361: | Line 443: | ||
|} | |} | ||
Also, '''Markdown inside an HTML block is not parsed''' — raw HTML passes through untouched. | |||
''' | |||
<syntaxhighlight lang="markdown" | <syntaxhighlight lang="markdown" copy> | ||
<div> | <div> | ||
*bold?* no, raw | *bold?* no, raw | ||
| Line 381: | Line 451: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
renders the <syntaxhighlight lang="markdown" inline>*bold?*</syntaxhighlight> literally | renders the <syntaxhighlight lang="markdown" inline>*bold?*</syntaxhighlight> literally: | ||
<syntaxhighlight lang="markdown"> | <syntaxhighlight lang="markdown" copy> | ||
*bold?* yes | *bold?* yes | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== Further reading == | == Further reading == | ||
Latest revision as of 09:45, 23 August 2026
Quick reference for smart people — part of our dev cheatsheets collection.
Markdown is plain text with a few magic markers that can be rendered into HTML-formatted text.
New to Markdown? CommonMark interactive tutorial may interest you.
This page is a syntax reference for CommonMark, the standard. GitHub Flavored Markdown (GFM) extensions are covered in the GFM extensions section.
Basic example: Pancake recipe
| Markdown source | Compiled to HTML | Rendered in the browser |
|---|---|---|
# Pancakes
A quick pancake recipe for two.
## Ingredients
- 150 g flour
- 250 ml milk
## Steps
1. Mix the flour and milk.
2. Cook the batter in a pan.
|
<h1>Pancakes</h1>
<p>A quick pancake recipe for two.</p>
<h2>Ingredients</h2>
<ul>
<li>150 g flour</li>
<li>250 ml milk</li>
</ul>
<h2>Steps</h2>
<ol type="1">
<li>Mix the flour and milk.</li>
<li>Cook the batter in a pan.</li>
</ol>
|
|
Paragraphs and line breaks
- Two paragraphs must be separated by a blank line.
- A single newline becomes a space when rendered.
- For a hard linebreak within a paragraph, use
\
line one
line two
Rendered:
|
line one\
line two
Rendered:
|
Headings
One to six # markers set the level.
| Source | Level |
|---|---|
# Pancakes |
h1 |
## Ingredients |
h2 |
| ... | ... |
###### Note |
h6 |
A space between the last marker and the text is required:
Wrong (no space) Right #PancakesRendered: the line stays a paragraph and the
#is literal:#Pancakes
# PancakesRendered: a level-1 heading:
Pancakes
Emphasis
| Source | Rendered |
|---|---|
*italic* or _italic_ |
italic |
**bold** or __bold__ |
bold |
***both*** |
both |
Emphasis needs word boundaries — underscores inside a word are literal, not emphasis:
Source Rendered foo_bar_bazfoo_bar_baz (literal, no emphasis) *foo bar* bazfoo bar baz
Links and images
| Source | Rendered |
|---|---|
[CommonMark](https://commonmark.org) |
CommonMark |
 |
Alternatively to classic links like [CommonMark](https://commonmark.org), you can also use reference-style links, which allow you to refer to the target link with an arbitrary placeholder then declare the equivalence of the placeholder to your target link at the end of the file. This allows you to reuse a link in multiple places without repeating it.
| Source | Rendered |
|---|---|
[CommonMark][cm]
...
[cm]: https://commonmark.org
|
CommonMark |
Lists
Unordered
The markers -, * and + are interchangeable — the same list, three ways:
- fruit
- veg
|
* fruit
* veg
|
+ fruit
+ veg
|
All three render identically:
- fruit
- veg
For a nested list, indent:
- fruit
- apple
- pear
- veg
Rendered:
- fruit
- apple
- pear
- veg
Note:
Each indentation level can be either
\s\s(2 spaces),\s\s\s\s(4 spaces), or\t(1 tab), depending on the configuration of your markdown renderer. In the majority of cases, 2 spaces work. Verify the docs of your markdown renderer.
Ordered
Numbering starts from the first item's number, whatever you write afterwards:
3. Mix the flour and milk.
4. Cook the batter in a pan.
|
3. Mix the flour and milk.
5. Cook the batter in a pan.
|
3. Mix the flour and milk.
800. Cook the batter in a pan.
|
All three render identically — the numbers after the first are ignored:
- Mix the flour and milk.
- Cook the batter in a pan.
Do not leave a blank line between items: They will be rendered to give a loose feeling:
1. fruit 1. vegRendered:
- fruit
- veg
1. fruit 1. vegRendered:
fruit
veg
Code
Inline code — backticks; when the code itself contains a backtick, use two backticks:
| Source | Rendered |
|---|---|
`pip install markdown` |
pip install markdown
|
`` `expr` `` |
`expr`
|
Fenced blocks — three backticks; the word after the opening fence enables syntax highlighting:
```python
print("hi")
```
Rendered:
print("hi")
Legacy syntax-indented code blocks: Four leading spaces also produce a code block, without highlighting:
print("hi")Rendered:
print("hi")This form is not recommended — it is easy to break (a blank line ends it, and the indentation must change inside lists). Since this used to be the standard for early versions of commonMark, you may still see it in older documents.
Blockquotes
Start with > for a blockquote.
If you would like to include blank lines within the blockquote, type a line with a single>:
> quoted line
>
> second quoted line
Rendered:
quoted line
second quoted line
Nested quotes — >>:
> outer
>
> > inner
Rendered:
outer
inner
GFM extensions
GitHub Flavored Markdown (GFM) used on GitHub and increasingly elsewhere, extends commonMark syntax with the following additions:
Strikethrough — two tildes:
| Source | Rendered |
|---|---|
~~struck~~ |
Tables
| Left | Center | Right |
|:-----|:------:|------:|
| a | b | c |
When rendered, the first column is left-aligned (:-----), the second center-aligned (:-----:) and the third
right-aligned (-----:):
Left Center Right a b c
Task lists
- [x] mix the batter
- [ ] cook the pancakes
Rendered:
☑ mix the batter
☐ cook the pancakes
Escaping
A backslash makes the next character literal:
| Source | Rendered |
|---|---|
\*not italic\* |
*not italic* |
\# not a heading |
# not a heading |
Also, Markdown inside an HTML block is not parsed — raw HTML passes through untouched.
<div>
*bold?* no, raw
</div>
renders the *bold?* literally:
*bold?* yes
Further reading
- CommonMark spec — the official standard
- CommonMark interactive tutorial — the recommended tutorial
- GFM spec — tables, task lists, strikethrough
- Markdown Guide — a friendly reference