Markdown cheatsheet
Markdown is a set of conventions for writing formatted text in a plain file, and its appeal is that the source stays readable even when nothing renders it. The syntax below is grouped by what you are trying to do, and each row shows the HTML it actually produces.
Those HTML fragments are not hand-typed. Every one is the real output of this site's own Markdown converter, compared against the table by the test suite on each build — so if a row and the tool ever disagreed, the build would fail rather than the page mislead you.
The dialect is CommonMark plus the GitHub extensions that are near-universal: tables, task lists and strikethrough. Footnotes, definition lists and directives are deliberately absent, because documenting a syntax that then does nothing in the converter one click away is worse than omitting it.
Emphasis and inline code
9Inline syntax works inside paragraphs, headings, list items and table cells alike.
| Syntax | What it does | HTML produced |
|---|---|---|
| *italic* | Italic | <p><em>italic</em></p> |
| _italic_ | Italic, alternative formIgnored inside a word, so snake_case survives. | <p><em>italic</em></p> |
| **bold** | Bold | <p><strong>bold</strong></p> |
| __bold__ | Bold, alternative form | <p><strong>bold</strong></p> |
| ***both*** | Bold and italic together | <p><em><strong>both</strong></em></p> |
| ~~gone~~ | Strikethrough | <p><del>gone</del></p> |
| `code` | Inline code — nothing inside is interpreted | <p><code>code</code></p> |
| ``a ` b`` | Inline code containing a backtickUse more backticks outside than appear inside. | <p><code>a ` b</code></p> |
| \*not italic\* | A literal asterisk instead of emphasis | <p>*not italic*</p> |
Headings
7The hash form is the one to use; the underline form only reaches two levels.
| Syntax | What it does | HTML produced |
|---|---|---|
| # Heading | Level 1 heading | <h1>Heading</h1> |
| ## Heading | Level 2 heading | <h2>Heading</h2> |
| ### Heading | Level 3 heading | <h3>Heading</h3> |
| ###### Heading | Level 6 heading — the deepest there is | <h6>Heading</h6> |
| Heading ======= | Level 1 heading, underlined form | <h1>Heading</h1> |
| Heading ------- | Level 2 heading, underlined form | <h2>Heading</h2> |
| ## Heading ## | Trailing hashes are decoration and are droppedThe count on the right is ignored; only the left one sets the level. | <h2>Heading</h2> |
Lists
7Indent by two spaces to nest. A blank line between items makes each one a paragraph.
| Syntax | What it does | HTML produced |
|---|---|---|
| - one - two | Bulleted list | <ul> <li>one</li> <li>two</li> </ul> |
| * one * two | Bulleted list, alternative marker | <ul> <li>one</li> <li>two</li> </ul> |
| 1. one 2. two | Numbered list | <ol> <li>one</li> <li>two</li> </ol> |
| 1. one 1. two | Also a numbered list, renumbered on renderOnly the first number is used; the rest can all be 1. | <ol> <li>one</li> <li>two</li> </ol> |
| - one - nested | Nested list — indent the child by two spaces | <ul> <li>one <ul> <li>nested</li> </ul></li> </ul> |
| - [ ] todo | Unchecked task list item | <ul> <li><input type="checkbox" disabled /> todo</li> </ul> |
| - [x] done | Checked task list item | <ul> <li><input type="checkbox" checked disabled /> done</li> </ul> |
Links and images
6| Syntax | What it does | HTML produced |
|---|---|---|
| [text](https://a.co) | Link | <p><a href="https://a.co">text</a></p> |
| [text](https://a.co "Tip") | Link with a tooltip title | <p><a href="https://a.co" title="Tip">text</a></p> |
| <https://a.co> | Bare URL turned into a link | <p><a href="https://a.co">https://a.co</a></p> |
| [mail](mailto:a@b.co) | Email link | <p><a href="mailto:a@b.co">mail</a></p> |
|  | Image, with alt text | <p><img src="cat.png" alt="alt" /></p> |
| [x](javascript:alert(1)) | Unsafe scheme — the link is dropped, the text staysjavascript:, data: and vbscript: URLs lose their href. | <p>x</p> |
Block elements
9Each of these must start at the beginning of a line.
| Syntax | What it does | HTML produced |
|---|---|---|
| > quoted | Blockquote | <blockquote> <p>quoted</p> </blockquote> |
| > > deeper | Nested blockquote | <blockquote> <blockquote> <p>deeper</p> </blockquote> </blockquote> |
| ``` code ``` | Fenced code block | <pre><code>code </code></pre> |
| ```js let a = 1; ``` | Fenced code block with a language class for highlighting | <pre><code class="language-js">let a = 1; </code></pre> |
| code | Code block by four-space indent | <pre><code>code </code></pre> |
| --- | Horizontal rule | <hr /> |
| *** | Horizontal rule, alternative form | <hr /> |
| one two | Line break inside a paragraphTwo trailing spaces. Invisible in most editors, which is why it so often fails. | <p>one<br /> two</p> |
| one two | A blank line separates paragraphs | <p>one</p> <p>two</p> |
Tables
4The delimiter row is what makes it a table. Alignment is set by colons in that row.
| Syntax | What it does | HTML produced |
|---|---|---|
| | a | b | | - | - | | 1 | 2 | | Table — header, delimiter row, then body rows | |
| | :--- | | Left-align the column, in the delimiter row | |
| | :---: | | Centre the column | |
| | ---: | | Right-align the column |