This is designed to be a ‘cheatsheet’ to help find the syntax needed to quickly create markdown content on Hugo sites.

Headers

Like the titles used on this page, you can create them with a hash symbol. The more of these # the smaller/deeper the title is on the page.

# H1 Header

## H2 Header

### H3 Header

#### H4 Header

H1 Header

H2 Header

H3 Header

H4 Header

Paragraphs

To create paragraphs, use a blank line to separate one or more lines of text.

I really like using Markdown.

I think I'll use it to format all of my documents from now on.

I really like using Markdown.

I think I’ll use it to format all of my documents from now on.

Line Breaks

Use two trailing white spaces or the ‘\’ HTML tag at the end of the line.

This is the first line.
And this is the second line.

This is the first line.\
And this is the second line.

This is the first line.
And this is the second line.

This is the first line.
And this is the second line.

Text

Bold

Surrounding some text in 2 asterisks can make some of your text bold on the page, like this.

*Text**

Text

Emphasis/Italic

Surrounding some text with a single asterisk can make some of your text italic, showing emphasis on a word or phrase, like this.

*Text*

Text

Strikethrough

Wrap the text in two tilde characters to cross out content.

~~Text~~

Emojis

Some Markdown applications allow you to insert emoji by typing emoji shortcodes. These begin and end with a colon and include the name of an emoji. See https://gohugo.io/quick-reference/emojis/ for a complete list.

:tent: :mechanical_leg: :chopsticks: :japanese_castle: :es:

⛺ 🦿 🥢 🏯 🇪🇸

Horizontal Line

Divide content with a horizontal line by using three hyphens.

---

Hyperlinks

Similar to the image syntax below, links take the text and wrap it in square brackets then specify where the hyperlink should go to within brackets afterwards. It will look like this.

[my link](/post/drafts/scratchpad/)

my link

Automatic URL Linking

The HUGO Markdown processor automatically turns literal URLs into links. That means if you type http://www.example.com, your Markdown processor will automatically turn it into a link even though you haven’t used brackets.

http://www.example.com

http://www.example.com

Image

![my alt text](https://photos.smugmug.com/photos/i-8jTrZs3/0/Ljtm9MzkrpCwWNVDVSC8TCjs4PtCSSrCPR4gN36Sj/Th/i-8jTrZs3-Th.jpg)

Images start with an exclamation mark, specify some alternative text (if the image doesn’t load) then specifies the location of the image.

Text

Blockquote

Block quotes are defined by starting with a chevron >. The can run over many lines and typically are displayed indented on the page.

> example blockquote

example blockquote

Blockquotes with Multiple Paragraphs

> example blockquote
>
> example multiple paragraphs

example blockquote

example multiple paragraphs

Nested Blockquotes

> Dorothy followed her through many of the beautiful rooms in her castle.
>
>> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

Blockquotes with Other Elements

> #### The quarterly results look great!
>
> - Revenue was off the chart.
> - Profits were higher than ever.
>
>  *Everything* is going according to **plan**.

The quarterly results look great!

• Revenue was off the chart.
• Profits were higher than ever.

Everything is going according to plan.

Lists

Ordered Lists

To create an ordered list, add line items with numbers followed by periods. The numbers don’t have to be in numerical order, but the list should start with the number one.

1. First item
1. Second item
1. Third item
1. Fourth item

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

Unordered Lists

To create an unordered list, add dashes (-), asterisks (*), or plus signs (+) in front of line items. Indent one or more items to create a nested list.

- First item
- Second item
- Third item
- Fourth item

• First item
• Second item
• Third item
• Fourth item

Adding Elements in Lists

To add another element in a list while preserving the continuity of the list, indent the element four spaces or one tab, as shown in the following examples.

* This is the first list item.
    * This is a nested unordered list item.
    * This is the second nested unordered list item.
* Here's the second list item.

    I need to add another paragraph below the second list item.

* Here's the third list item
    1. This is a nested ordered list item.
    1. This is the second nested ordered list item.

        > This is a nested blockquote

* And here's the fourth list item

• This is the first list item.

  • This is a nested unordered list item.
  • This is the second nested unordered list item.

• Here’s the second list item.

  I need to add another paragraph below the second list item.

• Here’s the third list item

  1. This is a nested ordered list item.

  2. This is the second nested ordered list item.

     This is a nested blockquote

• And here’s the fourth list item

Code Block

To define a code block, wrap the code in backticks like: `

Three of them, and you can define the code language after the first set, like in the example below we’ve indicated the code is css.

Hugo will automatically highlight syntax based on the specified language.

```css
body {
    background: red;
}
```

1
2
3

body {
    background: red;
}

Tables

To add a table, use three or more hyphens (—) to create each column’s header, and use pipes (|) to separate each column. For compatibility, you should also add a pipe on either end of the row.

| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |

• Next Post →