Markdown Cheatsheet

This is my definitive Markdown cheatsheet. It includes all the Markdown syntax you need to know to create beautiful and professional-looking documents.

Compilation ¹

Style Syntax char|textchar Example Output Keyboard shortcut

Heading

# A first-level heading
## A second-level heading
### A third-level heading
#### A fourth-level heading
##### A fifth-level heading
###### A sixth-level heading

A first-level heading

A second-level heading

A third-level heading

A fourth-level heading

A fifth-level heading

A sixth-level heading

None

Horizontal Rule

--- or ***

---
Text between Horizontal Rules
---

Text between Horizontal Rules

None

Bold

**|text** or __|text__

**This is bold text**

This is bold text

Ctrl+B

Italic

*|text* or _|text_

_This text is italicized_

This text is italicized

Ctrl+I

Strikethrough

~~|text~~

~~This was mistaken text~~

~~This was mistaken text~~

None

Bold and nested italic

**|bold_|italic_|bold**

**This text is _extremely_ important**

This text is extremely important

None

Bold+Italic

**_|bold-italic_**

**_All this text is important_**

All this text is important

None

Subscript

<sub>|text</sub>

This is a <sub>subscript</sub> text

This is a _subscript text

None

Superscript

<sup>|text</sup>

This is a <sup>superscript</sup> text

This is a ^superscript text

None

Sub+Superscript

<sup><sub>|text</sub></sup>

<sup><sub>This is a very small text</sub></sup>

^{_{This is a very small text}}

None

Quote

>|quote

> Text that is a quote

Text that is a quote

Ctrl+Shift+.

Nested Quote

>|quote >>|quote

> Main quote
>> Nested quote

Main quote
Nested quote

Ctrl+Shift+.

Inline code quote

`|code`

This has an `inline quote code` text

This has an inline quote code text

Ctrl+E

Inline math quote

$ equation $

$\sqrt{3x-1}+(1+x)^2$

3x-1+(1+x)2

None

Block code quote

``` |multi-lined-code ```

This has a
```
Block
quote
code
```

This has a

Block
quote
code

Ctrl+E

Block math quote

$$ |equation $$ or ```math |equation ```

$$
f(x) = x^2
$$

f(x)=x2

None

Unordered List

- |item
* |item
+ |item

- Unordered List Item
* Unordered List Item
+ Unordered List Item

Unordered List Item
Unordered List Item
Unordered List Item

Ctrl+Shift+8

Ordered List

1. |item

1. Ordered List Item
1. Ordered List Item
1. Ordered List Item

Ordered List Item
Ordered List Item
Ordered List Item

Ctrl+Shift+7

Task List

- [ ] |item

- [ ] Task List Item
- [x] Task List Item

Task List Item
Task List Item

None

Nested List

Combine any List syntax

1. First list item
   - First nested list item
     - Second nested list item

First list item
- First nested list item
  - Second nested list item

None

Inline Link

[|text](|url "|hover")

[GitHub Pages](https://pages.github.com/ "hover info")

GitHub Pages

None

Inline Image Link

![alt-text](|url "|hover")

![](https://picsum.photos/100/100)

None

Reference Link

[ref_tag]: |url "|hover"

[git_page]: https://pages.github.com/ "hover info"

None

Inline Link with Ref.

[|text][ref_tag]

[GitHub Pages][git_page]

GitHub Pages

None

Inline Image Link with Ref.

![alt-text][ref_tag]

![][100x100]

None

Table

| Header 1 | Header 2 | | --- | --- | | Cell A1 | Cell A2 | | Cell B1 | Cell B2 |

| Header 1 | Header 2 |
| --- | --- |
| Cell A1 | Cell A2 |
| Cell B1 | Cell B2 |

Header 1	Header 2
Cell A1	Cell A2
Cell B1	Cell B2

None

Footnote

[^footnote]: |text-and-or-link

[^footnote]This is a footnote

This has a footnote. ²

None

Collapsible Section

<details> <summary>|summary</summary> |text </details>

<details>
<summary>Click to expand</summary>
This is hidden
</details>

Click to expand

This is hidden

None

Emoji³

:|emoji:

:rocket:

🚀

None

Escaping Characters

\|char

Not \*\*bold\*\*

Not **bold**

None

Hidden Comment

<!--This is a hidden comment-->

None

Keyboard Inputs

<kbd>|key</kbd>

Use <kbd>Ctrl</kbd> + <kbd>Z</kbd> to undo

Use Ctrl + Z to undo

None

Text Box

<table> <td> |text </td></table>

<table>
<td>
This is text in the box
</td></table>

This is text in the box

None

1. Text Formatting

Style	Syntax `char\|textchar`	Example	Output
Bold	`\|text` or `__\|text__`	This is bold text	This is bold text
Italic	`\|text` or `_\|text_`	_This text is italicized_	This text is italicized
Bold and nested italic	`\|bold_\|italic_\|bold`	This text is _extremely_ important	*This text is extremely* important**
Bold+Italic	`_\|bold-italic_`	_All this text is important_	*All this text is important*
Strikethrough	`~~\|text~~`	~~This was mistaken text~~	~~This was mistaken text~~
Subscript	`<sub>\|text</sub>`	This is a <sub>subscript</sub> text	This is a _subscript text
Superscript	`<sup>\|text</sup>`	This is a <sup>superscript</sup> text	This is a ^superscript text
Sub+Superscript	`<sup><sub>\|text</sub></sup>`	<sup><sub>This is a very small text</sub></sup>	^{_{This is a very small text}}

2. Headings & Dividers

Style	Syntax `char\|textchar`	Example	Output
Heading	`#\|text` `##\|text` `###\|text` `####\|text` `#####\|text` `######\|text`	# A first-level heading ## A second-level heading ### A third-level heading #### A fourth-level heading ##### A fifth-level heading ###### A sixth-level heading	A first-level heading A second-level heading A third-level heading A fourth-level heading A fifth-level heading A sixth-level heading
Horizontal Rule	`---` or `***`	--- Text between Horizontal Rules ***	Text between Horizontal Rules

3. Quotes and Code

Style	Syntax `char\|textchar`	Example	Output
Quote	`>\|quote`	> Text that is a quote	Text that is a quote
Nested Quote	`>\|quote >>\|quote`	> Main quote >> Nested quote	Main quote Nested quote
Inline code quote	`\|code`	This has an `inline quote code` text	This has an `inline quote code` text
Inline math quote	$ equation $	$\sqrt{3x-1}+(1+x)^2$	3x-1+(1+x)2
Block code quote	``` \|multi-lined-code ```	This has a ``` Block quote code ```	This has a Block quote code
Block math quote	`$$ \|equation $$` or ```math \|equation ```	$$ f(x) = x^2 $$	f(x)=x2

Diff Syntax

Using the diff syntax in block quotes will highlight additions and deletions:

```diff
def calculator_sum(a, b):
-  return a - b
+  return a + b
```

def calculator_sum(a, b):
-  return a - b
+  return a + b

File Trees

Using the graphql syntax in block quotes will nicely highlight file trees like below:

./root/*
  ├─ assets/*   # Fonts, icons, images, etc.
  ├─ code/*     # Where the code lives
  │  ├─ main.py # The main file
  │  └─ Other files…
  └─ utils/*    # Utility functions

4. Lists

Style	Syntax `char\|textchar`	Example	Output
Unordered List	`- \|item` `* \|item` `+ \|item`	- Unordered List Item * Unordered List Item + Unordered List Item	Unordered List Item Unordered List Item Unordered List Item
Ordered List	`1. \|item`	1. Ordered List Item 1. Ordered List Item 1. Ordered List Item	Ordered List Item Ordered List Item Ordered List Item
Task List	`- [ ] \|item`	- [ ] Task List Item - [x] Task List Item	Task List Item Task List Item
Nested List	Combine any List syntax	1. First list item - First nested list item - Second nested list item	First list item First nested list item Second nested list item

5. Links and Media

Links

Style	Syntax `char\|textchar`	Example	Output
Inline Link	`[\|text](\|url "\|hover")`	[GitHub Pages](https://pages.github.com/ "hover info")	GitHub Pages
Reference Link	`[ref_tag]: \|url "\|hover"`	[git_page]: https://pages.github.com/ "hover info"
Inline Link with Ref.	`[\|text][ref_tag]`	[GitHub Pages][git_page]	GitHub Pages
Footnote	`[^footnote]: \|text-and-or-link`	[^footnote]This is a footnote	This has a footnote. ²

Relative Links ⁴

Relative links and image paths help readers navigate your repository. A relative link points to another file relative to the current file's location. For example, a link in your root README to a file in docs/CONTRIBUTING.md would look like:

[Contribution guidelines for this project](docs/CONTRIBUTING.md)

GitHub automatically adjusts relative links and paths based on the current branch, ensuring they always work. Links starting with / are relative to the repository root. You can use relative link operands like ./ and ../.

Examples of relative links:

In a .md file on the same branch /assets/images/electrocat.png
In a .md file on another branch /../main/assets/images/electrocat.png
In issues, pull requests and comments of the repository ../blob/main/assets/images/electrocat.png?raw=true
In a .md file in another repository /../../../../github/docs/blob/main/assets/images/electrocat.png
In issues, pull requests and comments of another repository ../../../github/docs/blob/main/assets/images/electrocat.png?raw=true

Link a Github Label ⁵

You can reference Github labels in markdown using the following syntax:

https://github.com/account/repo/labels/label-name

Footnotes ⁶

You can add footnotes to your content by using this bracket syntax:

[^one_line]Here is a simple footnote.

A footnote can also have multiple[^multi_line] lines.

Can also reference to a link. [^link]

[^one_line]: My reference.
[^multi_line]:
    To add line breaks within a footnote, prefix new lines with 2 spaces.

    This is a second line.

[^link]: Example with URL: https://github.com

⁷Here is a simple footnote.

A footnote can also have multiple⁸ lines.

Can also reference to a link. ⁹

6. Images

Style	Syntax `char\|textchar`	Example	Output
Inline Image Link	`![alt-text](\|url "\|hover")`	![](https://picsum.photos/100/100)
Inline Image Link with Ref.	`![alt-text][ref_tag]`	![][100x100]

Light/Dark mode images

Swap out images based on theme settings. ¹⁰

Add: #gh-dark-mode-only or #gh-light-mode-only to the end of the image path to specify which theme the image should be displayed in.

![Logo](./dark.png#gh-dark-mode-only)
![Logo](./light.png#gh-light-mode-only)

You can now specify whether to display images for light or dark themes in Markdown, using the HTML <picture> element in combination with the prefers-color-scheme media feature. ¹¹

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/25423296/163456776-7f95b81a-f1ed-45f7-b7ab-8fa810d529fa.png">
  <img alt="Shows an illustrated sun in light color mode and a moon with stars in dark color mode." src="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png">
</picture>

Light	Dark

`left` alignment ¹²

This is the code you need to align images to the left:

<img align="left" width="100" height="100" src="https://picsum.photos/100/100">

`right` alignment

This is the code you need to align images to the right:

<img align="right" width="100" height="100" src="https://picsum.photos/100/100">

`center` alignment example

<p align="center">
  <img width="460" height="300" src="https://picsum.photos/460/300" />
</p>

Horizontal images no gap

via comment

<p>
  <img src="https://picsum.photos/100/100" />
  <img src="https://picsum.photos/100/100" />
</p>

Horizontal images with gap

With hspace property you can set horizontal (left and right) padding for an image

<p>
  <img src="https://picsum.photos/100/100" hspace="10" />
  <img src="https://picsum.photos/100/100" hspace="10" />
</p>

Vertical images with gap

We also have a property "vspace", which does what it sounds like, add vertical spacing. But it doesn't seem to work on GitHub, unlike VSCode's buit in markdown viewer. So probably just add a <p> tag in between.

<p>
  <img src="https://picsum.photos/500/100" />
</p>

<p>
  <img src="https://picsum.photos/500/100" />
</p>

<p>
  <img src="https://picsum.photos/500/100" />
</p>

7. Tables ¹³

Style Syntax char|textchar Example Output

Table

| Header 1 | Header 2 | | -------- | -------- | | Cell A01 | Cell A02 | | Cell B01 | Cell B02 |

| Header 1 | Header 2 |
| -------- | -------- |
| Cell A01 | Cell A02 |
| Cell B01 | Cell B02 |

Header 1	Header 2
Cell A1	Cell A2
Cell B1	Cell B2

Syntax

Use pipes | and hyphens - to create tables. Hyphens define headers, and pipes separate columns. Ensure there's a blank line before the table for correct rendering.

| Header 1 | Header 2 |
| -------- | -------- |
| Cell A1  | Cell A2  |
| Cell B1  | Cell B2  |

Header 1	Header 2
Cell A1	Cell A2
Cell B1	Cell B2

Styling

| Tool   | Purpose                          |
| ------ | -------------------------------- |
| `ls`   | Display _directory_ contents     |
| `grep` | Search for **specific** patterns |

Tool	Purpose
`ls`	Display directory contents
`grep`	Search for specific patterns

Alignment

Align text left, center, or right using colons : in the separator row.

| Left Align | Center Align | Right Align |
| :--------- | :----------: | ----------: |
| Item A     |    Item B    |      Item C |
| Item D     |    Item E    |      Item F |

Left Align	Center Align	Right Align
Item A	Item B	Item C
Item D	Item E	Item F

Images

|                  First Image                   |                  Second Image                   |
| :--------------------------------------------: | :---------------------------------------------: |
| ![First Image](https://picsum.photos/1260/750) | ![Second Image](https://picsum.photos/1260/750) |

First Image	Second Image

Table within a Table ¹⁴

|                         Image                          |                                                                                                                                                                                                                    Table Inside Table                                                                                                                                                                                                                     |
| :----------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| ![Heart On Your Sleeve](https://picsum.photos/150/150) | <table> <thead> <tr> <th>Header</th> <th>Example</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td align="center"><img src="https://picsum.photos/150/150" width="150px"></td> <td><img src="https://picsum.photos/100/150" width="100px" align="center"></td> <td><img src="https://picsum.photos/75/75" width="75px"></td> </tr> <tr> <td align="center">Info</td> <td align="center">(?)</td> <td align="center">Info</td> </tr> </tbody> </table> |

Image

Table Inside Table

Header	Example	Example

Info	(?)	Info

8. Extended Styling

Style Syntax char|textchar Example Output

Emoji³

:|emoji:

:rocket:

🚀

Escaping Characters

\|char

Not \*\*bold\*\*

Not **bold**

Hidden Comment

<!--This is a hidden comment-->

Keyboard Inputs

<kbd>|key</kbd>

Use <kbd>Ctrl</kbd> + <kbd>Z</kbd> to undo

Use Ctrl + Z to undo

Text Box

<table> <td> |text </td></table>

<table>
<td>
This is text in the box
</td></table>

This is text in the box

Styling Text

You can use css to style text in markdown using the following syntax, x being a tag.:

This has <x style="color:red">red text</x> in it.

This has red text in it.

| Size |            Text             |
| :--: | :-------------------------: |
|  -2  | <font size="-2">Text</font> |
|  -1  | <font size="-1">Text</font> |
|  1   | <font size="+1">Text</font> |
|  2   | <font size="+2">Text</font> |
|  3   | <font size="+3">Text</font> |
|  4   | <font size="+4">Text</font> |

Size	Text
-2	Text
-1	Text
1	Text
2	Text
3	Text
4	Text

Text over Text (Ruby Text)

This technique is handy for displaying the phonetic transcription, like IPA, right above the word it describes.

<ruby>markdown<rt>/ˈmɑːrk.daʊn/</rt></ruby>

markdown/ˈmɑːrk.daʊn/

Collapsible Sections

Collapsing large blocks of text can make your markdown much easier to digest

<details>
<summary>To make sure markdown is rendered correctly in the collapsed section...</summary>

1.  Put an **empty line** after the `<summary>` block.
2.  _Insert your markdown syntax_
3.  Put an **empty line** before the `</details>` tag

</details>

To make sure markdown is rendered correctly in the collapsed section...

Put an empty line after the <summary> block.
Insert your markdown syntax
Put an empty line before the </details> tag

Text Box

Add a box with contents to markdown

<table><td>

This is text in the `box`</td></table>

This is text in the box

<table><td align="center" width="1000">

This is text in the centered `box`</td></table>

This is text in the centered box

Alerts ¹⁵

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

> [!TIP]
> Optional information to help a user be more successful.

> [!IMPORTANT]
> Crucial information necessary for users to succeed.

> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.

> [!CAUTION]
> Negative potential consequences of an action.

Note

Highlights information that users should take into account, even when skimming.

Tip

Optional information to help a user be more successful.

Important

Crucial information necessary for users to succeed.

Warning

Critical content demanding immediate user attention due to potential risks.

Caution

Negative potential consequences of an action.

Badges

Using https://shields.io/badges, you can create your own badges, customizing the color, icon, label, and style.

The URL is structured is as follows:

[badge_name]: https://img.shields.io/badge/[label]-[informational]?logo=[logo]&style=[style]&logoColor=[logoColor]&labelColor=[labelColor]&color=[color]

[python_badge]: https://img.shields.io/badge/Python-informational?logo=python&style=flat&logoColor=79dafa&labelColor=282a36&color=ff6e96
[autohotkey_badge]: https://img.shields.io/badge/Auto_Hotkey-informational?logo=autohotkey&style=flat-square&logoColor=79dafa&labelColor=282a36&color=ff6e96
[ruby_badge]: https://img.shields.io/badge/Ruby-informational?logo=ruby&style=plastic&logoColor=79dafa&labelColor=282a36&color=5e4053
[markdown_badge]: https://img.shields.io/badge/Markdown-informational?logo=markdown&style=for-the-badge&logoColor=79dafa&labelColor=282a36&color=5e4053
[vscodium_badge]: https://img.shields.io/badge/VSCodium-informational?logo=vscodium&style=social&logoColor=79dafa&labelColor=282a36&color=5e4053

Color Preview ¹⁶

Only in issues, pull requests and discussions, you can call out colors within a sentence by using backticks. A supported color model within backticks will display a visualization of the color.

Color	Syntax	Example
HEX	#RRGGBB	#0969DA
RGB	rgb(R,G,B)	rgb(9, 105, 218)
HSL	hsl(H,S,L)	hsl(212, 92%, 45%)

9. Diagrams and Visualization ¹⁷

GitHub now supports the following diagram types:

content type	supported extensions
mermaid	`.mermaid`, `.mmd`
geoJSON	`.geojson`, `.json`
topoJSON	`.topojson`, `.json`
STL	`.stl`

Mermaid Diagrams

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

gantt
  title Project Timeline
  dateFormat YYYY-MM-DD
  section Phase 1
  Task A :a1, 2023-01-01, 30d
  Task B :after a1, 20d

pie
  title Pie Chart
  "Slice 1": 30
  "Slice 2": 70

GeoJSON

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "id": 1,
      "properties": {
        "ID": 0
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -90,
              35
            ],
            [
              -90,
              30
            ],
            [
              -85,
              30
            ],
            [
              -85,
              35
            ],
            [
              -90,
              35
            ]
          ]
        ]
      }
    }
  ]
}

TopoJSON

{
  "type": "Topology",
  "transform": {
    "scale": [
      0.0005000500050005,
      0.00010001000100010001
    ],
    "translate": [
      100,
      0
    ]
  },
  "objects": {
    "example": {
      "type": "GeometryCollection",
      "geometries": [
        {
          "type": "Point",
          "properties": {
            "prop0": "value0"
          },
          "coordinates": [
            4000,
            5000
          ]
        },
        {
          "type": "LineString",
          "properties": {
            "prop0": "value0",
            "prop1": 0
          },
          "arcs": [
            0
          ]
        },
        {
          "type": "Polygon",
          "properties": {
            "prop0": "value0",
            "prop1": {
              "this": "that"
            }
          },
          "arcs": [
            [
              1
            ]
          ]
        }
      ]
    }
  },
  "arcs": [
    [
      [
        4000,
        0
      ],
      [
        1999,
        9999
      ],
      [
        2000,
        -9999
      ],
      [
        2000,
        9999
      ]
    ],
    [
      [
        0,
        0
      ],
      [
        0,
        9999
      ],
      [
        2000,
        0
      ],
      [
        0,
        -9999
      ],
      [
        -2000,
        0
      ]
    ]
  ]
}

STL

solid cube_corner
  facet normal 0.0 -1.0 0.0
    outer loop
      vertex 0.0 0.0 0.0
      vertex 1.0 0.0 0.0
      vertex 0.0 0.0 1.0
    endloop
  endfacet
  facet normal 0.0 0.0 -1.0
    outer loop
      vertex 0.0 0.0 0.0
      vertex 0.0 1.0 0.0
      vertex 1.0 0.0 0.0
    endloop
  endfacet
  facet normal -1.0 0.0 0.0
    outer loop
      vertex 0.0 0.0 0.0
      vertex 0.0 0.0 1.0
      vertex 0.0 1.0 0.0
    endloop
  endfacet
  facet normal 0.577 0.577 0.577
    outer loop
      vertex 1.0 0.0 0.0
      vertex 0.0 1.0 0.0
      vertex 0.0 0.0 1.0
    endloop
  endfacet
endsolid

Color	Syntax	Example	Output
HEX	`#RRGGBB`	`#0969DA`	`#0969DA`
RGB	`rgb(R,G,B)`	`rgb(9, 105, 218)`	`rgb(9, 105, 218)`
HSL	`hsl(H,S,L)`	`hsl(212, 92%, 45%)`	`hsl(212, 92%, 45%)`

v-amorim/markdown_cheatsheet.md

Markdown Cheatsheet

Compilation 1

A first-level heading

A second-level heading

A third-level heading

A fourth-level heading

A fifth-level heading

A sixth-level heading

1. Text Formatting

2. Headings & Dividers

A first-level heading

A second-level heading

A third-level heading

A fourth-level heading

A fifth-level heading

A sixth-level heading

3. Quotes and Code

Diff Syntax

File Trees

4. Lists

5. Links and Media

Links

Relative Links 4

Link a Github Label 5

Footnotes 6

6. Images

Light/Dark mode images

left alignment 12

right alignment

center alignment example

Horizontal images no gap

Horizontal images with gap

Vertical images with gap

7. Tables 13

Syntax

Styling

Alignment

Images

Table within a Table 14

8. Extended Styling

Styling Text

Font Size

Text over Text (Ruby Text)

Collapsible Sections

Text Box

Alerts 15

Badges

Color Preview 16

9. Diagrams and Visualization 17

GeoJSON { "type": "FeatureCollection", "features": [ { "type": "Feature", "id": 1, "properties": { "ID": 0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -90, 35 ], [ -90, 30 ], [ -85, 30 ], [ -85, 35 ], [ -90, 35 ] ] ] } } ] } Loading

Footnotes

v-amorim commented Aug 12, 2024 • edited Loading

Color Preview

Compilation ¹

Relative Links ⁴

Link a Github Label ⁵

Footnotes ⁶

`left` alignment ¹²

`right` alignment

`center` alignment example

7. Tables ¹³

Table within a Table ¹⁴

Alerts ¹⁵

Color Preview ¹⁶

9. Diagrams and Visualization ¹⁷

GeoJSON

{ "type": "FeatureCollection", "features": [ { "type": "Feature", "id": 1, "properties": { "ID": 0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -90, 35 ], [ -90, 30 ], [ -85, 30 ], [ -85, 35 ], [ -90, 35 ] ] ] } } ] }

Loading

v-amorim commented Aug 12, 2024 •

edited

Loading