Built-in Shortcodes

Shortcodes are simple snippets inside your content files calling built-in or custom templates.

What a shortcode is

Hugo loves Markdown because of its simple content format, but there are times when Markdown falls short. Often, content authors are forced to add raw HTML (e.g., video <iframe>’s) to Markdown content. We think this contradicts the beautiful simplicity of Markdown’s syntax.

Hugo created shortcodes to circumvent these limitations.

A shortcode is a simple snippet inside a content file that Hugo will render using a predefined template. Note that shortcodes will not work in template files. If you need the type of drop-in functionality that shortcodes provide but in a template, you most likely want a partial template instead.

In addition to cleaner Markdown, shortcodes can be updated any time to reflect new classes, techniques, or standards. At the point of site generation, Hugo shortcodes will easily merge in your changes. You avoid a possibly complicated search and replace operation.

Use Shortcodes

1. Shortcodes with raw string parameters ` `
2. Shortcodes with Markdown % %
3. Shortcodes without Markdown < >

See more details in the Use Shortcodes section.

Embedded shortcodes

Use these Hugo’s embedded shortcodes as needed.

figure

Documentation of figure shortcode.

Example figure input:

1

{{< figure src="/images/lighthouse.jpg" title="Lighthouse (figure)" >}}

The rendered output looks like this:

The HTML looks like this:

1
2
3
4
5
6

<figure>
  <img src="/images/lighthouse.jpg" />
  <figcaption>
    <h4>Lighthouse (figure)</h4>
  </figcaption>
</figure>

highlight

Documentation of highlight shortcode.

Example highlight input:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{{< highlight html >}}
<section id="main">
    <div>
        <h1 id="title">{{ .Title }}</h1>
        {{ range .Pages }}
            {{ .Render "summary"}}
        {{ end }}
    </div>
</section>
{{< /highlight >}}

The rendered output looks like this:

1
2
3
4
5
6
7
8

<section id="main">
    <div>
        <h1 id="title">{{ .Title }}</h1>
        {{ range .Pages }}
            {{ .Render "summary"}}
        {{ end }}
    </div>
</section>

instagram

Documentation of instagram shortcode.

Example instagram input:

1

{{< instagram CxOWiQNP2MO >}}

The rendered output looks like this:

View this post on Instagram

param

Documentation of param shortcode.

Example param input:

1

{{< param description >}}

The rendered output looks like this:

qr

Documentation of qr shortcode.

Use the self-closing syntax to pass the text as an argument:

1

{{< qr text="https://lruihao.cn" >}}

Or insert the text between the opening and closing tags:

1
2
3

{{< qr >}}
https://lruihao.cn
{{< /qr >}}

Both of the above produce this image:

ref

Documentation of ref shortcode.

Always use the {{% %}} notation when calling this shortcode.

Example ref input:

1
2

- [Built-in Shortcodes]({{% ref "/documentation/content-management/shortcodes/built-in" %}})
- [Extended Shortcodes]({{% ref "/documentation/content-management/shortcodes/extended" %}})

The rendered output looks like this:

• Built-in Shortcodes
• Extended Shortcodes

The HTML looks like this:

1
2
3
4

<ul>
  <li><a href="http://example.org/documentation/content-management/shortcodes/built-in">Built-in Shortcodes</a></li>
  <li><a href="http://example.org/documentation/content-management/shortcodes/extended">Extended Shortcodes</a></li>
</ul>

relref

Documentation of relref shortcode.

Always use the {{% %}} notation when calling this shortcode.

Example relref input:

1
2

- [Built-in Shortcodes]({{% relref "/documentation/content-management/shortcodes/built-in" %}})
- [Extended Shortcodes]({{% relref "/documentation/content-management/shortcodes/extended" %}})

The rendered output looks like this:

• Built-in Shortcodes
• Extended Shortcodes

The HTML looks like this:

1
2
3
4

<ul>
  <li><a href="/documentation/content-management/shortcodes/built-in">Built-in Shortcodes</a></li>
  <li><a href="/documentation/content-management/shortcodes/extended">Extended Shortcodes</a></li>
</ul>

x

Documentation of x shortcode.

Example x input:

1

{{< x user="SanDiegoZoo" id="1453110110599868418" >}}

The rendered output looks like this:

Owl bet you'll lose this staring contest 🦉 pic.twitter.com/eJh4f2zncC

— San Diego Zoo Wildlife Alliance (@sandiegozoo) October 26, 2021

vimeo

Documentation of vimeo shortcode.

Example vimeo input:

1

{{< vimeo 146022717 >}}

The rendered output looks like this:

youtube

Documentation of youtube shortcode.

Example youtube input:

1

{{< youtube 0RKpf3rK57I >}}

The rendered output looks like this:

Privacy configuration

To learn how to configure your Hugo site to meet the new EU privacy regulation, see privacy protections.