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:
|
|
The rendered output looks like this:
The HTML looks like this:
|
|
2 gist
Example gist
input:
|
|
The rendered output looks like this:
The HTML looks like this:
|
|
3 highlight
Example highlight
input:
|
|
The rendered output looks like this:
|
|
4 instagram
5 param
Example param
input:
|
|
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
Example tweet
input:
|
|
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
8 vimeo
Example vimeo
input:
|
|
The rendered output looks like this:
9 youtube
Example youtube
input:
|
|
The rendered output looks like this: