Build in Shortcodes

Build in Hugo shortcodes

build-in-shortcodes.webp
author

author
Shortcodes Hugo

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="lighthouse.jpg" title="Lighthouse (figure)" width="690px" >}}

The rendered output looks like this:

Lighthouse figure

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

Documentation of 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 isset.Params"alt" isset.Params"caption" }}alt="{{ if isset .Params "alt"}}{{ index .Params "alt"}}{{else}}{{ index .Params "caption" }}{{ end }}"{{ end }} />
{{ if isset .Params "link"}}</a>{{ end }}
{{ if or or(isset.Params"title" isset.Params"caption") isset.Params"attr"}}
<figcaption>{{ if isset .Params "title" }}
<h4>{{ index .Params "title" }}</h4>{{ end }}
{{ if or isset.Params"caption" isset.Params"attr"}}<p>
{{ 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 -->
view raw img.html hosted with ❤ by GitHub

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

Documentation of instagram

Instagram’s API was deprecated since October 24th, 2020
The instagram-shortcode refers an endpoint of Instagram’s API, that’s deprecated since October 24th, 2020. Thus, no images can be fetched from this API endpoint, resulting in an error when the instagram-shortcode is used. For more information please have a look at GitHub issue #7879.

5 param

Documentation of param

Example param input:

1{{< param description >}}

The rendered output looks like this:

Descrizione da rivedere se è un doppione subtitle

6 ref and relref

Documentation of ref and relref

7 tweet

Documentation of tweet

Example tweet input:

1{{< tweet 917359331535966209 >}}

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 KADQd05a_nY >}}

The rendered output looks like this: