Writing

Shortcodes

Callouts, icons and tooltips from the theme, and the Hugo built-ins that fit beside them.

2 min read

Callout

{{< callout type="warning" title="Optional title" >}}
Body in **markdown**.
{{< /callout >}}

Six types. Each has its own icon and a default title in the page’s language.

Note

note is the default, and what an unknown type falls back to.

Info

info - something the reader should know. Alias: important.

Tip

tip - a better way to do it.

Success

success - it worked, and this is what that looks like.

Warning

warning - it will not break, but it will not do what you expect. Alias: warn.

Danger

danger - data loss, a security hole, an outage. Aliases: caution, error.

Titles

The title is rendered as inline markdown, so it can name a config key:

baseURL must end with a slash

Without it, relURL joins paths without a separator.

title="" hides the title, and icon= picks any icon by name:

A callout with no title and the terminal icon.

The type may also be given positionally: {{< callout tip >}}.

Content

The body is full markdown - lists, code, even another shortcode:

Upgrading

Pull the new version.
Rebuild:
```
hugo --gc --minify
```
Check the search still finds new pages.

Icon

Inline an icon from assets/icons by name. It takes the colour and the size of the text around it.

{{< icon rocket >}}
{{< icon name="rocket" class="my-class" >}}

Ready , set , go .

Every available icon is listed in the icon reference .

A CSS-only tooltip, shown on hover and on keyboard focus:

{{< tooltip text="Command-line interface" >}}CLI{{< /tooltip >}}
{{< tooltip "Command-line interface" >}}CLI{{< /tooltip >}}
{{< tooltip term="toml" >}}TOML{{< /tooltip >}}

Use the CLI to build the site, then write the configuration in TOML .

term looks the text up in data/tooltips.toml, so a definition used on many pages is written once:

# data/tooltips.toml
toml = "Tom's Obvious Minimal Language, a configuration file format"

Hugo built-ins

Hugo’s own shortcodes work as usual. Two that suit documentation:

details

Show the answer

The details shortcode renders a native disclosure element, and its content is markdown.

figure

A page holding three lines of text — A figure with a caption.