Built-in Shortcodes

2023-02-24 2023-02-26 409 words 2 minutes 1 views

/documentation/content-management/shortcodes/built-in/featured-image.webp

Contents

Note

This article was last updated on 2023-02-26, the content may be out of date.

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.

Use Shortcodes

Shortcodes with raw string parameters ` `
Shortcodes with Markdown % %
Shortcodes without Markdown < >

See detail shortcodes/#use-shortcodes

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>

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>

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>

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.

ref and relref

Documentation of ref and relref

Documentation of tweet

Example tweet input:

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

Example vimeo input:

1
{{< vimeo 146022717 >}}

The rendered output looks like this:

youtube

Documentation of youtube

Example youtube input:

1
{{< youtube w7Ft2ymGmfc >}}

The rendered output looks like this: