Cheatsheets:Markdown: Difference between revisions

From Wikibase
Jump to navigation Jump to search
Standardize: add copy button to block code snippets
 
(17 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>
Markdown is plain text with a few markers that a renderer turns into HTML. This
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.
New to Markdown? Work through the
[https://commonmark.org/help/tutorial/ CommonMark interactive tutorial]
first, then come back to look things up.
The running example throughout this page is a short pancake recipe.
</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 <code>\</code>
* 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 103: Line 101:
|-
|-
| <syntaxhighlight lang="markdown" inline>## Ingredients</syntaxhighlight> || h2
| <syntaxhighlight lang="markdown" inline>## Ingredients</syntaxhighlight> || h2
|-
| ...||...
|-
|-
| <syntaxhighlight lang="markdown" inline>###### Note</syntaxhighlight> || h6
| <syntaxhighlight lang="markdown" inline>###### Note</syntaxhighlight> || h6
|-
| <syntaxhighlight lang="markdown" inline>Pancakes</syntaxhighlight> + <syntaxhighlight lang="markdown" inline>===</syntaxhighlight> on the next line || h1 (setext)
|-
| <syntaxhighlight lang="markdown" inline>Ingredients</syntaxhighlight> + <syntaxhighlight lang="markdown" inline>---</syntaxhighlight> on the next line || h2 (setext)
|}
|}


Line 118: Line 114:
|-
|-
|
|
<syntaxhighlight lang="markdown">
<syntaxhighlight lang="markdown" copy>
#Pancakes
#Pancakes
</syntaxhighlight>
</syntaxhighlight>
Line 125: Line 121:
<blockquote>#Pancakes</blockquote>
<blockquote>#Pancakes</blockquote>
||
||
<syntaxhighlight lang="markdown">
<syntaxhighlight lang="markdown" copy>
# Pancakes
# Pancakes
</syntaxhighlight>
</syntaxhighlight>
Line 147: 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 ==
Inline links take the form <syntaxhighlight lang="markdown" inline>[text](URL)</syntaxhighlight>; images add a <syntaxhighlight lang="markdown" inline>!</syntaxhighlight> and an alt text: <syntaxhighlight lang="markdown" inline>![alt text](image.png)</syntaxhighlight>.


{| class="wikitable"
{| class="wikitable"
Line 160: Line 166:
|}
|}


Reference-style links separate the link text from the URL: <syntaxhighlight lang="markdown" inline>[text][ref]</syntaxhighlight> in the text, and the definition <syntaxhighlight lang="markdown" inline>[ref]: URL</syntaxhighlight> anywhere in the document. Here <syntaxhighlight lang="text" inline>...</syntaxhighlight> stands for the rest of the document between the two snippets:
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" inline>[CommonMark][cm]</syntaxhighlight> ... <syntaxhighlight lang="markdown" inline>[cm]: https://commonmark.org</syntaxhighlight> || [https://commonmark.org CommonMark]
| <syntaxhighlight lang="markdown" copy>
[CommonMark][cm]
 
...  
 
[cm]: https://commonmark.org</syntaxhighlight> || [https://commonmark.org CommonMark]
|}
|}


== Lists ==
== Lists ==


Unordered markers <syntaxhighlight lang="markdown" inline>-</syntaxhighlight>, <syntaxhighlight lang="markdown" inline>*</syntaxhighlight> and <syntaxhighlight lang="markdown" inline>+</syntaxhighlight> are interchangeable. Ordered lists number from the first item's number, whatever you write. Nest with an indentation:
=== 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:
 
{| 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">
<syntaxhighlight lang="markdown" copy>
- fruit
- fruit
   - apple
   - apple
Line 191: Line 233:
</ul>
</ul>
</blockquote>
</blockquote>
'''Note:'''


<blockquote>
<blockquote>
'''A blank line between items makes a loose list''' — each item is wrapped in a paragraph:
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"
! Without (tight) !! With a blank line (loose)
|-
|
|
<syntaxhighlight lang="markdown">
<syntaxhighlight lang="markdown" copy>
- fruit
1. fruit
- veg
1. veg
</syntaxhighlight>
</syntaxhighlight>


Rendered:
Rendered:
<blockquote>
<blockquote>
<ul>
<ol>
<li>fruit</li>
<li>fruit</li>
<li>veg</li>
<li>veg</li>
</ul>
</ol>
</blockquote>
</blockquote>
||
||
<syntaxhighlight lang="markdown">
<syntaxhighlight lang="markdown" copy>
- fruit
1. fruit


- veg
1. veg
</syntaxhighlight>
</syntaxhighlight>


Rendered:
Rendered:
<blockquote>
<blockquote>
<ul>
<ol>
<li><p>fruit</p></li>
<li><p>fruit</p></li>
<li><p>veg</p></li>
<li><p>veg</p></li>
</ul>
</ol>
</blockquote>
</blockquote>
|}
|}
Line 235: Line 313:
! Source !! Rendered
! Source !! Rendered
|-
|-
| <syntaxhighlight lang="markdown" inline>`pip install markdown`</syntaxhighlight> || <syntaxhighlight lang="text" inline>pip install markdown</syntaxhighlight>
| <syntaxhighlight lang="text" inline>`pip install markdown`</syntaxhighlight> || <syntaxhighlight lang="text" inline>pip install markdown</syntaxhighlight>
|-
|-
| <syntaxhighlight lang="markdown" inline>`` `expr` ``</syntaxhighlight> || <syntaxhighlight lang="text" inline>`expr`</syntaxhighlight>
| <syntaxhighlight lang="text" inline>`` `expr` ``</syntaxhighlight> || <syntaxhighlight lang="text" inline>`expr`</syntaxhighlight>
|}
|}


'''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="markdown">
<syntaxhighlight lang="text" copy>
```python
```python
print("hi")
print("hi")
Line 248: Line 326:
</syntaxhighlight>
</syntaxhighlight>


Rendered (a plain code block in the browser; the fence and info string are gone):
Rendered:


<syntaxhighlight lang="text">
<syntaxhighlight lang="python" copy>
print("hi")
print("hi")
</syntaxhighlight>
</syntaxhighlight>


<blockquote>
<blockquote>
'''Legacy syntax:''' indented code blocks. Four leading spaces also produce a
'''Legacy syntax-indented code blocks:''' Four leading spaces also produce a
code block, without highlighting. This form is '''not recommended''' — it is
code block, without highlighting:
easy to break (a blank line ends it, and the indentation must change inside
 
lists). You may still see it in older documents; use fenced blocks instead.
<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 ==


A line starting with <syntaxhighlight lang="markdown" inline>></syntaxhighlight> is a blockquote; an empty <syntaxhighlight lang="markdown" inline>></syntaxhighlight> keeps paragraphs separate inside the quote.
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 281: 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 299: Line 389:
== GFM extensions ==
== GFM extensions ==


GFM (GitHub Flavored Markdown) is CommonMark plus the extensions below, used on
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 310: Line 400:
|}
|}


'''Tables''' — a header row, a separator row of dashes, then body rows. Colons
'''Tables'''  
in the separator row set alignment:


<syntaxhighlight lang="markdown">
<syntaxhighlight lang="markdown" copy>
| Left | Center | Right |
| Left | Center | Right |
|:-----|:------:|------:|
|:-----|:------:|------:|
Line 319: Line 408:
</syntaxhighlight>
</syntaxhighlight>


Rendered: the first column is left-, the second center- and the third
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 329: Line 418:
</blockquote>
</blockquote>


'''Task lists''' — <syntaxhighlight lang="markdown" inline>- [ ]</syntaxhighlight> and <syntaxhighlight lang="markdown" inline>- [x]</syntaxhighlight> render as checkboxes:
'''Task lists'''
 
<syntaxhighlight lang="markdown" copy>
<syntaxhighlight lang="markdown">
- [x] mix the batter
- [x] mix the batter
- [ ] cook the pancakes
- [ ] cook the pancakes
Line 342: Line 430:
☐ cook the pancakes
☐ cook the pancakes
</blockquote>
</blockquote>
(The glyphs stand in for checkboxes; a GFM renderer produces clickable
checkboxes.)


== Escaping ==
== Escaping ==
Line 358: Line 443:
|}
|}


<blockquote>
Also, '''Markdown inside an HTML block is not parsed''' — raw HTML passes through untouched.
'''Emphasis needs word boundaries''' — underscores inside a word are literal, not emphasis.
 
Source <syntaxhighlight lang="markdown" inline>foo_bar_baz</syntaxhighlight> renders as foo_bar_baz, not as
"foo<i>bar</i>baz". Fix: use asterisks around whole words instead:


<syntaxhighlight lang="markdown">
<syntaxhighlight lang="markdown" copy>
*foo bar* baz
</syntaxhighlight>
</blockquote>
 
<blockquote>
'''Markdown inside an HTML block is not parsed''' — raw HTML passes through untouched.
 
<syntaxhighlight lang="markdown">
<div>
<div>
*bold?* no, raw
*bold?* no, raw
Line 378: Line 451:
</syntaxhighlight>
</syntaxhighlight>


renders the <syntaxhighlight lang="markdown" inline>*bold?*</syntaxhighlight> literally. Fix: don't wrap Markdown in raw HTML at all:
renders the <syntaxhighlight lang="markdown" inline>*bold?*</syntaxhighlight> literally:


<syntaxhighlight lang="markdown">
<syntaxhighlight lang="markdown" copy>
*bold?* yes
*bold?* yes
</syntaxhighlight>
</syntaxhighlight>
</blockquote>


== 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>

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.

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

line one\
line two

Rendered:

line one
line two

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
#Pancakes

Rendered: the line stays a paragraph and the # is literal:

#Pancakes

# Pancakes

Rendered: 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_baz
foo_bar_baz (literal, no emphasis)
*foo bar* baz
foo bar baz
Source Rendered
[CommonMark](https://commonmark.org) CommonMark
![alt text](image.png) alt text

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:

  1. Mix the flour and milk.
  2. 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. veg

Rendered:

  1. fruit
  2. veg
1. fruit

1. veg

Rendered:

  1. fruit

  2. 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~~ 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 (-----:):

LeftCenterRight
abc

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