Cheatsheets:Markdown: Difference between revisions

From Wikibase
Jump to navigation Jump to search
Rework per review: browser-content renderings, GFM moved to dedicated section, legacy indented-code note (via update-page on MediaWiki MCP Server)
Polish round 2: 3-column basic example, blockquote-wrapped notes, reference-style link example, loose-list demo, plain rendered code block, nested-quote example, drop literal "Gotcha" (via update-page on MediaWiki MCP Server)
Line 18: Line 18:
A recipe: one heading, one paragraph, an unordered and an ordered list.
A recipe: one heading, one paragraph, an unordered and an ordered list.


Markdown source:
{| class="wikitable"
 
! Markdown source !! Rendered (HTML, as a CommonMark renderer produces it) !! Rendered in the browser
|-
|
<syntaxhighlight lang="markdown">
<syntaxhighlight lang="markdown">
# Pancakes
# Pancakes
Line 35: Line 37:
2. Cook the batter in a pan.
2. Cook the batter in a pan.
</syntaxhighlight>
</syntaxhighlight>
 
||
Rendered (HTML, as a CommonMark renderer produces it):
 
<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
<h1>Pancakes</h1>
<h1>Pancakes</h1>
Line 52: Line 52:
</ol>
</ol>
</syntaxhighlight>
</syntaxhighlight>
 
||
Rendered in the browser (the HTML above as a browser displays it):
 
<blockquote>
<blockquote>
<p style="font-size:2em;font-weight:bold;">Pancakes</p>
<p style="font-size:2em;font-weight:bold;">Pancakes</p>
Line 69: Line 67:
</ol>
</ol>
</blockquote>
</blockquote>
|}


== Paragraphs and line breaks ==
== Paragraphs and line breaks ==
Line 115: Line 114:
|}
|}


A space between the last marker and the text is required:
<blockquote>
'''A space between the last marker and the text is required:'''


{| class="wikitable"
{| class="wikitable"
Line 137: Line 137:
</blockquote>
</blockquote>
|}
|}
</blockquote>


== Emphasis ==
== Emphasis ==
Line 160: Line 161:
|-
|-
| <syntaxhighlight lang="markdown" inline>![alt text](image.png)</syntaxhighlight> || [[File:Example.png|alt=alt text|150px]]
| <syntaxhighlight lang="markdown" inline>![alt text](image.png)</syntaxhighlight> || [[File:Example.png|alt=alt text|150px]]
|}
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:
{| class="wikitable"
! Source !! Rendered
|-
|-
| <syntaxhighlight lang="markdown" inline>[CommonMark][cm]</syntaxhighlight> with <syntaxhighlight lang="markdown" inline>[cm]: https://commonmark.org</syntaxhighlight> later || reference-style link
| <syntaxhighlight lang="markdown" inline>[CommonMark][cm]</syntaxhighlight> ... <syntaxhighlight lang="markdown" inline>[cm]: https://commonmark.org</syntaxhighlight> || [https://commonmark.org CommonMark]
|}
|}


Line 188: Line 195:
</blockquote>
</blockquote>


A blank line between items makes a '''loose''' list: each item is wrapped in a paragraph.
<blockquote>
'''A blank line between items makes a loose list''' — each item is wrapped in a paragraph:
 
{| class="wikitable"
! Without (tight) !! With a blank line (loose)
|-
|
<syntaxhighlight lang="markdown">
- fruit
- veg
</syntaxhighlight>
 
Rendered:
<blockquote>
<ul>
<li>fruit</li>
<li>veg</li>
</ul>
</blockquote>
||
<syntaxhighlight lang="markdown">
- fruit
 
- veg
</syntaxhighlight>
 
Rendered:
<blockquote>
<ul>
<li><p>fruit</p></li>
<li><p>veg</p></li>
</ul>
</blockquote>
|}
</blockquote>


== Code ==
== Code ==
Line 210: Line 251:
</syntaxhighlight>
</syntaxhighlight>


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


<syntaxhighlight lang="python">
<syntaxhighlight lang="text">
print("hi")
print("hi")
</syntaxhighlight>
</syntaxhighlight>
Line 225: Line 266:
== Blockquotes ==
== Blockquotes ==


A line starting with <syntaxhighlight lang="markdown" inline>></syntaxhighlight> is a blockquote; <syntaxhighlight lang="markdown" inline>>></syntaxhighlight> nests. An empty <syntaxhighlight lang="markdown" inline>></syntaxhighlight> keeps paragraphs separate inside the quote.
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.


<syntaxhighlight lang="markdown">
<syntaxhighlight lang="markdown">
Line 239: Line 280:


second quoted line
second quoted line
</blockquote>
'''Nested quotes''' — <syntaxhighlight lang="markdown" inline>>></syntaxhighlight>:
<syntaxhighlight lang="markdown">
> outer
>
> > inner
</syntaxhighlight>
Rendered:
<blockquote>
outer
<blockquote>
inner
</blockquote>
</blockquote>
</blockquote>


Line 303: Line 362:


<blockquote>
<blockquote>
'''Gotcha:''' emphasis needs word boundaries — underscores inside a word are literal, not emphasis.
'''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
Source <syntaxhighlight lang="markdown" inline>foo_bar_baz</syntaxhighlight> renders as foo_bar_baz, not as
Line 314: Line 373:


<blockquote>
<blockquote>
'''Gotcha:''' Markdown inside an HTML block is not parsed — raw HTML passes through untouched.
'''Markdown inside an HTML block is not parsed''' — raw HTML passes through untouched.


<syntaxhighlight lang="markdown">
<syntaxhighlight lang="markdown">

Revision as of 15:20, 19 August 2026

Languages: English · français · Esperanto

Quick reference for smart people — part of our dev cheatsheets collection.

Markdown is plain text with a few markers that a renderer turns into HTML. This page is a syntax reference for CommonMark, the standard. GitHub Flavored Markdown (GFM) extensions are covered in the GFM extensions section.

New to Markdown? Work through the CommonMark interactive tutorial first, then come back to look things up.

The running example throughout this page is a short pancake recipe.

Basic example

A recipe: one heading, one paragraph, an unordered and an ordered list.

Markdown source Rendered (HTML, as a CommonMark renderer produces it) 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

  • A blank line separates paragraphs.
  • A single newline is a soft wrap: it becomes a space.
  • A backslash at the end of a line (or two trailing spaces) forces a hard break.
Without (soft wrap) With hard break
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
Pancakes + === on the next line h1 (setext)
Ingredients + --- on the next line h2 (setext)

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

Inline links take the form [text](URL); images add a ! and an alt text: ![alt text](image.png).

Source Rendered
[CommonMark](https://commonmark.org) CommonMark
![alt text](image.png) alt text

Reference-style links separate the link text from the URL: [text][ref] in the text, and the definition [ref]: URL anywhere in the document. Here ... stands for the rest of the document between the two snippets:

Source Rendered
[CommonMark][cm] ... [cm]: https://commonmark.org CommonMark

Lists

Unordered markers -, * and + are interchangeable. Ordered lists number from the first item's number, whatever you write. Nest with an indentation:

- fruit
  - apple
  - pear
- veg

Rendered:

  • fruit
    • apple
    • pear
  • veg

A blank line between items makes a loose list — each item is wrapped in a paragraph:

Without (tight) With a blank line (loose)
- fruit
- veg

Rendered:

  • fruit
  • veg
- fruit

- veg

Rendered:

  • 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 (a plain code block in the browser; the fence and info string are gone):

print("hi")

Legacy syntax: indented code blocks. Four leading spaces also produce a code block, without highlighting. This form is not recommended — it is 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.

Blockquotes

A line starting with > is a blockquote; an empty > keeps paragraphs separate inside the quote.

> quoted line
>
> second quoted line

Rendered:

quoted line

second quoted line

Nested quotes — >>:

> outer
>
> > inner

Rendered:

outer

inner

GFM extensions

GFM (GitHub Flavored Markdown) is CommonMark plus the extensions below, used on GitHub.

Strikethrough — two tildes:

Source Rendered
~~struck~~ struck

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

| Left | Center | Right |
|:-----|:------:|------:|
| a    | b      | c     |

Rendered: the first column is left-, the second center- and the third right-aligned:

LeftCenterRight
abc

Task lists — - [ ] and - [x] render as checkboxes:

- [x] mix the batter
- [ ] cook the pancakes

Rendered:

☑ mix the batter
☐ cook the pancakes

(The glyphs stand in for checkboxes; a GFM renderer produces clickable checkboxes.)

Escaping

A backslash makes the next character literal:

Source Rendered
\*not italic\* *not italic*
\# not a heading # not a heading

Emphasis needs word boundaries — underscores inside a word are literal, not emphasis.

Source foo_bar_baz renders as foo_bar_baz, not as "foobarbaz". Fix: use asterisks around whole words instead:

*foo bar* baz

Markdown inside an HTML block is not parsed — raw HTML passes through untouched.

<div>
*bold?* no, raw
</div>

renders the *bold?* literally. Fix: don't wrap Markdown in raw HTML at all:

*bold?* yes

Further reading