Theme Documentation - Built-in Shortcodes

Hugo provides multiple built-in shortcodes for author convenience and to keep your markdown content clean.

Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well. You could use pure HTML to expand possibilities.

But this happens to be a bad idea. Everyone uses Markdown because it’s pure and simple to read even non-rendered. You should avoid HTML to keep it as simple as possible.

To avoid this limitations, Hugo created shortcodes. A shortcode is a simple snippet that can generate reasonable HTML code and conforms to Markdown’s design philosophy.

Hugo ships with a set of predefined shortcodes that represent very common usage. These shortcodes are provided for author convenience and to keep your markdown content clean.

1 figure

Documentation of figure

Example figure input:

{{< figure
    src="/images/zion-national-park.jpg"
    alt="A photograph of Zion National Park"
    link="https://www.nps.gov/zion/index.htm"
    caption="Zion National Park"
    class="ma0 w-75"
>}}

The rendered output looks like this:

The HTML looks like this:

<figure class="ma0 w-75">
    <a href="https://www.nps.gov/zion/index.htm">
        <img src="/images/zion-national-park.jpg" alt="A photograph of Zion National Park">
    </a>
    <figcaption>
        <p>Zion National Park</p>
    </figcaption>
</figure>

2 gist

Documentation of gist

Example gist input:

{{< gist spf13 7896402 >}}

The rendered output looks like this:

The HTML looks like this:

<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>

3 highlight

Documentation of highlight

Example highlight input:

{{< highlight go >}}
package main

import "fmt"

func main() {
    fmt.Println("Hello, 世界")
}
{{< /highlight >}}

The rendered output looks like this:

package main

import "fmt"

func main() {
    fmt.Println("Hello, 世界")
}

4 instagram

Documentation of instagram

Example instagram input:

{{< instagram CxOWiQNP2MO >}}

The rendered output looks like this:

View this post on Instagram

5 param

Documentation of param

Example param input:

{{< param description >}}

The rendered output looks like this:

6 x

Documentation of x

Example x input:

{{< x user=GoHugoIO id=917359331535966209 >}}

The rendered output looks like this:

Reminder: This Twitter account is not actively maintained for questions. Please post all questions on https://t.co/yAzbBojxaU #gohugo

— GoHugo.io (@GoHugoIO) October 9, 2017

7 vimeo

Documentation of vimeo

Example vimeo input:

{{< vimeo 146022717 >}}

The rendered output looks like this:

8 youtube

Documentation of youtube

Example youtube input:

{{< youtube w7Ft2ymGmfc >}}

The rendered output looks like this:

9 ref

Documentation of ref

10 relref

Documentation of relref