Skip to main content

Markdown Cheatsheet

·4 mins

Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents.

Headings #

Let’s start with all possible headings. The HTML <h1><h6> elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.

Code

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

Output

Heading 1 #

Heading 2 #

Heading 3 #

Heading 4 #

Heading 5 #
Heading 6 #

Paragraph #

Code

According to the [HTML5 specification](https://www.w3.org/TR/html5/dom.html#elements) by [W3C](https://www.w3.org/), **HTML documents consist of a tree of elements and text**. Each element is denoted in the source by a [start tag](https://www.w3.org/TR/html5/syntax.html#syntax-start-tags), such as `<body>`, and an [end tag](https://www.w3.org/TR/html5/syntax.html#syntax-end-tags), such as `</body>`. (*Certain start tags and end tags can in certain cases be omitted and are implied by other tags.*)

Elements can have attributes, which control how the elements work. For example, hyperlink are formed using the `a` element and its `href` attribute.

Output

According to the HTML5 specification by W3C, HTML documents consist of a tree of elements and text. Each element is denoted in the source by a start tag, such as <body>, and an end tag, such as </body>. (Certain start tags and end tags can in certain cases be omitted and are implied by other tags.)

Elements can have attributes, which control how the elements work. For example, hyperlink are formed using the a element and its href attribute.

Bold #

Code

**bold text**

Output

bold text

Italic #

Code

**italicized text**

Output

italicized text

Strikethrough #

Code

~~The world is flat.~~

Output

The world is flat.

Code #

Code

`code`

Output

code

List Types #

Ordered List #

Code

1. First item
2. Second item
3. Third item

Output

  1. First item
  2. Second item
  3. Third item

Unordered List #

Code

* List item
* Another item
* And another item

or

- List item
- Another item
- And another item

Output

  • List item
  • Another item
  • And another item

Nested list #

Code

- Fruit
  - Apple
  - Orange
  - Banana
- Dairy
  - Milk
  - Cheese

Output

  • Fruit
    • Apple
    • Orange
    • Banana
  • Dairy
    • Milk
    • Cheese

Definition List #

Code

term
: definition

Output

term
definition

Task List #

Code

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

Output

  • Write the press release
  • Update the website
  • Contact the media

Blockquotes #

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.

Code

> Quoted text.
> This line is part of the same quote.
> Also you can *put* **Markdown** into a blockquote.

Output

Quoted text. This line is part of the same quote. Also you can put Markdown into a blockquote.

Code

[title](https://www.example.com)

Output

title

Image #

Code

![alt text](https://placehold.co/200x100?text=Sample\nImage)

Output

alt text

Horizontal Rule #

Code

---

or

***

Output


Fenced Code Block #

Code

    ```
        {
          "firstName": "John",
          "lastName": "Smith",
          "age": 25
        }
    ```

Output

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

Tables #

Tables aren’t part of the core Markdown spec, but Hugo supports them.

Code

| ID  | Make      | Model   | Year |
| --- | --------- | ------- | ---- |
| 1   | Honda     | Accord  | 2009 |
| 2   | Toyota    | Camry   | 2012 |
| 3   | Hyundai   | Elantra | 2010 |

Output

IDMakeModelYear
1HondaAccord2009
2ToyotaCamry2012
3HyundaiElantra2010

Colons can be used to align columns.

Code

| Tables      | Are           | Cool         |
|:----------- |:-------------:| ------------:|
| align: left | align: center | align: right |
| align: left | align: center | align: right |
| align: left | align: center | align: right |

Output

TablesAreCool
align: leftalign: centeralign: right
align: leftalign: centeralign: right
align: leftalign: centeralign: right

You can also use inline Markdown.

Code

| Inline     | Markdown  | In                | Table      |
| ---------- | --------- | ----------------- | ---------- |
| *italics*  | **bold**  | ~~strikethrough~~ | `code`     |

Output

InlineMarkdownInTable
italicsboldstrikethroughcode

Footnote #

Code

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

[^1]: This is the footnote.

Emoji #

Code

That is so funny! : joy :

Output

That is so funny! 😂