Build in Shortcodes
Build in Hugo 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
Example figure
input:
1{{< figure src="lighthouse.jpg" title="Lighthouse (figure)" width="690px" >}}
The rendered output looks like this:

Lighthouse
The HTML looks like this:
1<figure>
2 <img src="/images/lighthouse.jpg"/>
3 <figcaption>
4 <h4>Lighthouse (figure)</h4>
5 </figcaption>
6</figure>
2 gist
Example gist
input:
1{{< gist spf13 7896402 >}}
The rendered output looks like this:
<!-- image --> | |
<figure {{ if isset .Params "class" }}class="{{ index .Params "class" }}"{{ end }}> | |
{{ if isset .Params "link"}}<a href="{{ index .Params "link"}}">{{ end }} | |
<img src="{{ index .Params "src" }}" {{ if or |
|
{{ if isset .Params "link"}}</a>{{ end }} | |
{{ if or |
|
<figcaption>{{ if isset .Params "title" }} | |
<h4>{{ index .Params "title" }}</h4>{{ end }} | |
{{ if or |
|
{{ index .Params "caption" }} | |
{{ if isset .Params "attrlink"}}<a href="{{ index .Params "attrlink"}}"> {{ end }} | |
{{ index .Params "attr" }} | |
{{ if isset .Params "attrlink"}}</a> {{ end }} | |
</p> {{ end }} | |
</figcaption> | |
{{ end }} | |
</figure> | |
<!-- image --> |
The HTML looks like this:
1<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
3 highlight
Example highlight
input:
1{{< highlight html >}}
2<section id="main">
3 <div>
4 <h1 id="title">{{ .Title }}</h1>
5 {{ range .Pages }}
6 {{ .Render "summary"}}
7 {{ end }}
8 </div>
9</section>
10{{< /highlight >}}
The rendered output looks like this:
1<section id="main">
2 <div>
3 <h1 id="title">{{ .Title }}</h1>
4 {{ range .Pages }}
5 {{ .Render "summary"}}
6 {{ end }}
7 </div>
8</section>
4 instagram
5 param
Example param
input:
1{{< param description >}}
The rendered output looks like this:
Descrizione da rivedere se è un doppione subtitle6 ref and relref
Documentation of ref
and relref
7 tweet
Example tweet
input:
1{{< tweet 917359331535966209 >}}
The rendered output looks like this:
8 vimeo
Example vimeo
input:
1{{< vimeo 146022717 >}}
The rendered output looks like this:
9 youtube
Example youtube
input:
1{{< youtube KADQd05a_nY >}}
The rendered output looks like this: