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
Example figure input:
{{< figure
src="/images/zion-national-park.jpg"
alt="A photograph of Zion National Park"
link="https://www.nps.gov/zion/index.htm"
caption="Zion National Park"
class="ma0 w-75"
>}}The rendered output looks like this:
Zion National Park
The HTML looks like this:
<figure class="ma0 w-75">
<a href="https://www.nps.gov/zion/index.htm">
<img src="/images/zion-national-park.jpg" alt="A photograph of Zion National Park">
</a>
<figcaption>
<p>Zion National Park</p>
</figcaption>
</figure>2 gist
Example gist input:
{{< gist spf13 7896402 >}}The rendered output looks like this:
The HTML looks like this:
<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>3 highlight
Example highlight input:
{{< highlight go >}}
package main
import "fmt"
func main() {
fmt.Println("Hello, 世界")
}
{{< /highlight >}}The rendered output looks like this:
package main
import "fmt"
func main() {
fmt.Println("Hello, 世界")
}4 instagram
Example instagram input:
{{< instagram CxOWiQNP2MO >}}The rendered output looks like this:
5 param
Example param input:
{{< 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 x
Example x input:
{{< x user=GoHugoIO id=917359331535966209 >}}The rendered output looks like this:
Reminder: This Twitter account is not actively maintained for questions. Please post all questions on https://t.co/yAzbBojxaU #gohugo
— GoHugo.io (@GoHugoIO) October 9, 2017
7 vimeo
Example vimeo input:
{{< vimeo 146022717 >}}The rendered output looks like this:
8 youtube
Example youtube input:
{{< youtube w7Ft2ymGmfc >}}The rendered output looks like this: