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:

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>

2 gist

Documentation of gist

Example gist input:

1

{{< gist spf13 7896402 >}}

The rendered output looks like this:

The HTML looks like this:

1

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

3 highlight

Documentation of highlight

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>

4 instagram

Documentation of instagram

Example instagram input:

1

{{< instagram BWNjjyYFxVx hidecaption >}}

The rendered output looks like this:

{\rtf1\ansi\ansicpg1252\cocoartf2513 \cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fnil\fcharset0 Menlo-Regular;} {\colortbl;\red255\green255\blue255;\red27\green31\blue34;\red244\green246\blue249;} {\*\expandedcolortbl;;\cssrgb\c14118\c16078\c18039;\cssrgb\c96471\c97255\c98039;} \paperw11900\paperh16840\margl1440\margr1440\vieww10800\viewh8400\viewkind0 \deftab720 \pard\pardeftab720\partightenfactor0 \f0\fs23\fsmilli11900 \cf2 \cb3 \expnd0\expndtw0\kerning0 \{\{ if not .Site.IsServer \}\}\ \{\{ template "_internal/shortcodes/instagram.html" . \}\}\ \{\{ else \}\}\ \

Instagram Photo: \{\{ .Get 0 \}\}

\ \{\{ end \}\}}

5 param

Documentation of param

Example param input:

1

{{< param description >}}

The rendered output looks like this:

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

6 ref and relref

Documentation of ref and relref

7 tweet

Documentation of tweet

Example tweet input:

1

{{< tweet 877500564405444608 >}}

The rendered output looks like this:

8 vimeo

Documentation of vimeo

Example vimeo input:

1

{{< vimeo 146022717 >}}

The rendered output looks like this:

9 youtube

Documentation of youtube

Example youtube input:

1

{{< youtube w7Ft2ymGmfc >}}

The rendered output looks like this: