Markdown for Hugo: Cheatsheet

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

```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

**Text**

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

Emphasis/Italic

1

*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

~~Text~~

Hyperlink

1

[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

> 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

![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.

Header

1

## 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

---

Divide content with

a horizontal line by using three hyphens.