Markdown for Hugo: Cheatsheet

☕  Ad-blocker? Consider buying me a coffee instead :)

This is designed to be a ‘cheatsheet’ to help you find the syntax you need quickly for creating markdown content on Hugo sites.

Code Block

1
2
3
4
5
Copy to Clipboard
```css
body {
    background: red;
}
```

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 we’ve said the above code is css.

You can also use syntax highlighting on the code.

Bold

1
Copy to Clipboard
**Text**

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

Emphasis/Italic

1
Copy to Clipboard
*Text*

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

Strikethrough

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

1
Copy to Clipboard
~~Text~~
Or Use a Shortcode
1
Copy to Clipboard
[my link](https://makewithhugo.com/)

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.

Quote

1
Copy to Clipboard
> example blockquote

example blockquote

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

Image

1
Copy to Clipboard
![my alt text](/img/my-image.webp)

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

1
Copy to Clipboard
## Text

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.

Horizontal Line

1
Copy to Clipboard
---

Divide content with


a horizontal line by using three hyphens.