Markdown Cheatsheet

Complete reference guide for Markdown syntax

Based on the GitHub Flavored Markdown (GFM) and CommonMark

Basic Syntax

Fundamental elements of original Markdown

Headings (ATX Style)

# Heading 1→Heading 1
## Heading 2→Heading 2
### Heading 3→Heading 3
#### Heading 4→Heading 4
##### Heading 5→Heading 5
###### Heading 6→Heading 6

Headings (Setext Style)

Syntax
Heading 1
=========

Heading 2
---------
Result
Heading 1Heading 2

Emphasis and Formatting

*italic*→italic
_italic_→italic
**bold**→bold
__bold__→bold
***bold italic***→bold italic
~~strikethrough~~→strikethrough

Inline Code

`code`→code
``code with `backtick` ``→code with `backtick`
Tip
Use double backticks when your code contains single backticks.

Code Blocks (Fenced Code Blocks)

Syntax
```javascript
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("World");
```
Result
function greet(name) {
console.log(`Hello, ${name}!`);
}

greet("World");
Supported languages for syntax highlighting
javascriptjavascripttypescripttypescriptpythonpythonjavajavacccppcppcsharpcsharpgogorustrustrubyrubyphpphpswiftswiftkotlinkotlinscalascalasqlsqlbashbashshellshellpowershellpowershelljsonjsonyamlyamlxmlxmlhtmlhtmlcsscssscssscsssasssassmarkdownmarkdownlatexlatexrrmatlabmatlabperlperllualuahaskellhaskellelixirelixirclojureclojuredockerfiledockerfilenginxnginxapacheapachegraphqlgraphqlprismaprismasoliditysolidity

Links

[text](url)→text
[text](url "title")→text
<https://example.com>→https://example.com
Reference link
[text][ref]

[ref]: https://example.com "Title"

Images

Syntax
![Alt text](url)
With title
![Alt text](url "Title")
Linked image
[![Alt](image.jpg)](link)
Reference
![Alt][ref]

[ref]: url "Title"

Unordered Lists

Syntax
- Item 1
- Item 2
  - Sub-item 2.1
  - Sub-item 2.2
    - Sub-sub-item
- Item 3

* Also works with *
+ And with +
Result
  • Item 1
  • Item 2
    • Sub-item 2.1
    • Sub-item 2.2
      • Sub-sub-item
  • Item 3

Ordered Lists

Syntax
1. First item
2. Second item
   1. Sub-item 2.1
   2. Sub-item 2.2
3. Third item

1. Numbers don't need
1. to be in order
1. Markdown fixes it
Result
  1. First item
  2. Second item
    1. Sub-item 2.1
    2. Sub-item 2.2
  3. Third item

Blockquotes

Syntax
> This is a quote.
> It can span multiple lines.
>
> > Quotes can be nested.
> > Like this one.
>
> And continue after.
Result
This is a quote. It can span multiple lines.
Quotes can be nested. Like this one.
And continue after.

Horizontal Rules

Syntax
---

***

___
Result

GFM Extensions

Additional features of GitHub Flavored Markdown

Tables

Syntax
| Product    | Price  | Quantity |
|------------|:------:|---------:|
| Apple      | $3     |       10 |
| Banana     | $2     |       25 |
| Orange     | $4     |       15 |

Alignment:
:--- left
:---: center
---: right
Result
ProductPriceQuantity
Apple$310
Banana$225
Orange$415

Task Lists

Syntax
- [x] Completed task
- [x] Another done task
- [ ] Pending task
- [ ] Another pending
Result
  • Completed task
  • Another done task
  • Pending task
  • Another pending

Autolinks

URLs and emails are automatically linked
www.example.com
https://example.com
[email protected]
Result

Alerts/Callouts (GitHub)

Syntax
> [!NOTE]
> Useful information that users
> should know.

> [!TIP]
> Helpful advice for doing
> things better or more easily.

> [!IMPORTANT]
> Key information users need
> to know to succeed.

> [!WARNING]
> Urgent info that needs
> immediate attention.

> [!CAUTION]
> Negative potential consequences
> of certain actions.
Result
NoteUseful information that users should know.
TipHelpful advice for doing things better.
ImportantKey information for success.
WarningCritical content needing attention.
CautionNegative consequences of certain actions.

Extended Syntax

Advanced features supported by some parsers

Footnotes

Syntax
Here's a sentence with
a footnote.[^1]

[^1]: This is the footnote.

You can also use text[^note].

[^note]: Notes can have
    multiple lines.
Result

Here's a sentence with a footnote.[1]

You can also use text[note].

[1] This is the footnote.
[note] Notes can have multiple lines.

Definition Lists

Syntax
Term 1
: Definition of term 1

Term 2
: Definition of term 2
: Second definition of term 2
Result
Term 1
Definition of term 1
Term 2
Definition of term 2
Second definition of term 2

Highlighted Text

==highlighted text==→highlighted text
Note
Supported by some parsers like Obsidian, Notion, and others.

Subscript and Superscript

H~2~O→H2O
X^2^→X2
HTML Alternative
H<sub>2</sub>O
X<sup>2</sup>

Emojis

:smile:→😄
:heart:→❤️
:rocket:→🚀
:+1:→👍
Full reference
Complete list of emoji shortcodes

Abbreviations

Syntax
HTML is widely used on the web.

*[HTML]: HyperText Markup Language
Result
HTML is widely used on the web.

Mathematical Formulas (LaTeX)

Inline
The formula $E = mc^2$ is famous.
Result
The formula E = mc² is famous.
Block
$$
\frac{n!}{k!(n-k)!} = \binom{n}{k}
$$
Result
n!k!(n-k)! = (nk)

HTML and Special Elements

Using inline HTML and special characters

Inline HTML

Supported elements
<kbd>Ctrl</kbd> + <kbd>C</kbd>

<mark>Highlighted text</mark>

<details>
<summary>Click to expand</summary>
Hidden content here.
</details>

<br> for line break
Result
Ctrl + C
Highlighted text
Click to expand
Hidden content here.

Character Escaping

Use \ before special characters
\*text between asterisks\*
\# not a heading
\[not a link\]
\\ backslash
Characters that can be escaped
\ ` * _ { } [ ] ( ) # + - . ! |

Line Breaks

Methods
Line 1  
Line 2 (2 spaces at the end)

Line 1<br>
Line 2 (HTML tag)

Line 1

Line 2 (blank line = paragraph)

HTML Entities

&copy;→©
&reg;→®
&trade;→™
&nbsp;→(non-breaking space)
&lt; &gt;→< >
&amp;→&

Advanced GitHub Features

GitHub Flavored Markdown specific features

Mermaid Diagrams

Flowchart
```mermaid
flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E
```
Result
Start
→
Decision
Yes →
Action 1
No →
Action 2
→
End
Pie Chart
```mermaid
pie title Distribution
    "Movies" : 80
    "Series" : 20
```
Sequence Diagram
```mermaid
sequenceDiagram
    Alice->>Bob: Hello Bob!
    Bob-->>Alice: Hi Alice!
```
Supported diagram types
mermaidflowchartmermaidsequenceDiagrammermaidclassDiagrammermaidstateDiagrammermaiderDiagrammermaidganttmermaidpiemermaidgitGraphmermaidjourneymermaidmindmapmermaidtimelinemermaidquadrantChartmermaidsankeymermaidxychart

Keyboard Keys (kbd)

Syntax
<kbd>Ctrl</kbd> + <kbd>C</kbd>

<kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>

<kbd>
  Enter ↵
</kbd>
Result
Ctrl + C
Cmd + Shift + P
Enter ↵

Collapsible Items

Syntax
<details>
  <summary>Click to expand</summary>

  Hidden content that will
  be revealed on click.

  - Item 1
  - Item 2
  - Item 3
</details>
Result
Click to expand

Hidden content that will be revealed on click.

  • Item 1
  • Item 2
  • Item 3

Mentions and References

User mentions
@username
@organization/team
Issue and PR references
#123
GH-123
username/repo#123
organization/repo#123
Result
@username — mentions a user
#123 — references issue/PR #123
repo#456 — references in another repo

Color Models

Syntax
`#ffffff`
`#0969DA`
`rgb(9, 105, 218)`
`hsl(212, 92%, 45%)`
Result
#ffffff
#0969DA
rgb(9, 105, 218)
hsl(212, 92%, 45%)

Comments

Syntax
<!-- This is a comment -->
<!-- 
  Multi-line
  comment
-->
Result
(Comments are invisible in the rendered document)

Commit SHA

Syntax
a1b2c3d
a1b2c3d4e5f6g7h8i9j0
username/repo@a1b2c3d
Result
a1b2c3d — link to the commit
repo@a1b2c3d — commit in another repo

Code with Diff

Syntax
```diff
- const old = "old value";
+ const new = "new value";

  function unchanged() {
-   return false;
+   return true;
  }
```
Result
- const old = "old value";
+ const new = "new value";
 
  function unchanged() {
- return false;
+ return true;
  }

Anchors and Internal Links

Creating an anchor
<a name="section"></a>
## My Section
Linking to an anchor
[Go to section](#section)
[Back to top](#top)
Result
Go to section|Back to top ⬆️

Images with Size

Using HTML
<img src="image.png" width="300">

<img src="image.png" 
     width="200" 
     height="100" 
     alt="Description">

<p align="center">
  <img src="logo.png" width="150">
</p>
Tip
Use HTML when you need to control image dimensions or alignment.

Table of Contents

Syntax
## Table of Contents

- [Introduction](#introduction)
- [Installation](#installation)
  - [Requirements](#requirements)
  - [Setup](#setup)
- [Usage](#usage)
- [Contributing](#contributing)
Result
Table of Contents

Badges/Shields

Syntax
![Badge](https://img.shields.io/badge/
  text-color-style)

[![npm](https://img.shields.io/npm/v/
  package.svg)](link)

![GitHub stars](https://img.shields.io/
  github/stars/user/repo)
Result
build: passingversion: 1.0.0license: MITdocs: latest

Text Alignment

Syntax
<div align="center">
  Centered text
</div>

<div align="right">
  Right-aligned text
</div>

<p align="center">
  <strong>Centered bold</strong>
</p>
Result
Centered text
Right-aligned text
Centered bold

Tools and Resources

Useful links for working with Markdown

References and Resources