How to use shortcodes?

Hugo’s shortcodes can inject arbitrary and configurable HTML from within Markdown files. They are “Markdown’s hidden superpower”.

Syntax

A shortcode without variables looks like {{< simple >}}. The name of the shortcode is enclosed into two curly braces and angled brackets. This shortcode would call a file in the folder layout/shortcodes/simple.html of our project root or the theme directory and execute the templates therein.

To deliver parameters there are two options: positional or named parameters. Both possibilities may exist for the same shortcode, but they can’t be mixed in one call.

Positional

The shortcode {{< farfar >}} is sometimes used on these pages. It has only one unnamed parameter and returns up to five paragraphs of blind text.

{{< farfar 3 >}}  

This call produces three paragraphs of blind text.

Named

When we want to offer more parameters, we better name them, because it’s tricky to remember many of them and their position. An example is the shortcode for self-contained images. A call of figure could include these three parameters and more:

{{< figure src="image.jpg" alt="Description" title="Title" >}}