Hugo Shortcodes are snippets inside your content files calling built-in or custom templates.

Trigo provides a collection of shortcodes to enhance your content. Additional shortcodes are also provided directly by Hugo.

Shortcode syntax include {{< >}} tags, the shortcode name and optional attributes.

Details

Trigo shortcode to display a collapsible detail block and renders inner content.

{{< details summary="Details" >}}

This is the content of the details.

Markdown is **supported**.

{{< /details >}}

{{< details summary="Click me to reveal" open="false" >}}

This will be hidden by default.

{{< /details >}}

How it renders:

Attributes:

Tabs

Trigo shortcode to display content is several tabs. The tabs shortcode renders the inner content with multiple tab shortcodes.

{{< tabs >}}

  {{< tab JSON >}}
  **JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data.
  ```json
  { "hello": "world" }
  ```
  {{< /tab >}}
  {{< tab YAML >}}
  **YAML**: YAML is a human-readable data serialization language.
  ```yaml
  hello: world
  ```
  {{< /tab >}}
  {{< tab TOML >}}
  **TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.
  ```toml
  hello = "world"
  ```
  {{< /tab >}}

{{< /tabs >}}

How it renders:

{ "hello": "world" }

hello: world

hello = "world"

Attributes:

Steps

Trigo shortcode to display a series of steps with numbered bullets..

You can use the Markdown attribute {class="no-step"} to prevent a heading from being counted as a step.

{{< steps >}}

#### Step 1

This is the first step.

#### Step 2

This is the second step.

###### Step subheading {class="no-step"}

This will not be counted as a step.

#### Step 3

This is the third step.

{{< /steps >}}

How it renders:

Tree

Trigo shortcode to display a filetree list with inner content/branches/leaves and optional icon and label. Branches are collapsible with nested children (e.g. branches or leaves).

{{< tree label="example" >}}
  {{< branch label="content" >}}
    {{< leaf label="_index.md" >}}
    {{< branch label="docs" state="closed" >}}
      {{< leaf label="_index.md" style="color: red;" >}}
      {{< leaf label="introduction.md" >}}
      {{< leaf label="introduction.fr.md" >}}
    {{< /branch >}}
  {{< /branch >}}
  {{< leaf label="hugo.toml" >}}
{{< /tree >}}

How it renders:

• content
  • _index.md
  • docs
    • _index.md
    • introduction.md
    • introduction.fr.md
• hugo.toml
• Example

Options

Tree:

Attributes:

Branch:

Attributes:

Leaf:

Attributes:

Carousel

Trigo shortcode to display a carousel of images with drag, scroll support and optional automatic mode.

Specify a directory where all image resources are used for the carousel:

{{< carousel dir="path/to/directory" mode="auto" >}}

Specify a list of images to use with an images parameter:

{{< carousel images="1.webp, 2.webp, 3.webp" >}}

Specify a list of images to use:

{{< carousel "1.webp" "2.webp" "3.webp" >}}

The path is relative to the current page bundle. To use resources in the static or assets directories of the site, prefix the path with a / slash. The URL of an external image can be use as well.

How it renders:

Attributes:

Compare

Trigo shortcode to display two stacked images with a movable vertical clipping path.

Specify two image paths:

{{< compare "1.webp" "2.webp" >}}

The path is relative to the current page bundle. To use resources in the static directory of the site, prefix the path with a / slash. The URL of an external image can be use as well.

How it renders:

Attributes:

Canvas

Trigo shortcode to display an animated canvas based on a sequence of images with screen, mouse and keyboard controls.

Specify a directory path with the sequence of named images, optionally the animation speed as FPS and a title.

{{< canvas path="frames-dir" fps="12" title="Animation title" >}}

The path is relative to the current page bundle. To use resources in the static directory of the site, prefix the path with a / slash. External resources (defined from a URL) are not supported at this time. The animation takes the image filenames as order, e.g. 001.webp, 002.webp or other named sorted schema.

How it renders:

Attributes:

Button

Trigo shortcode to add a link as a clickable button with optional icon and label.

{{< button url="/news" label="See the latest news" icon="time" >}}

How it renders:

Attributes:

Merge

Trigo shortcode to link to a git commit or Pull Request (short commit hash or #id).

{{< merge url="https://github.com/user/repo/pull/123" >}}

{{< merge "https://gitlab.com/user/repo/-/commit/abcdef123456" >}}

How it renders:

and

Attributes:

PDF

Trigo shortcode to display an embedded PDF file.

{{< pdf "https://example.com/sample.pdf" >}}

The PDF file can also be located in the project directory and use the relative path.

{{< pdf "path/to/file.pdf" >}}

How it renders:

Attributes:

Video

Trigo shortcode to display a video with optional poster.

{{< video src="video.mp4" poster="dir/3.webp" >}}

How it renders:

Attributes:

Peertube

Trigo shortcode to embed a Peertube video.

{{< peertube url="https://toobnix.org/w/5jBegFpNbffA1nhmp32kqR" >}}

How it renders:

YouTube

Hugo built-in shortcode to embed a YouTube video.

{{< youtube id=VIDEO_ID title="My video title" start=30 loading=lazy >}}

How it renders:

For more information, see Hugo’s YouTube Shortcode.

Code block highlight

Hugo built-in shortcode to highlight a code block.

{{< highlight html >}}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Example HTML5 Document</title>
        <meta name="description" content="Basic Markdown syntax.">
    </head>
    <body>
        <p>Test</p>
    </body>
</html>

{{< /highlight >}}

How it renders:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Example HTML5 Document</title>
        <meta name="description" content="Basic Markdown syntax.">
    </head>
    <body>
        <p>Test</p>
    </body>
</html>

Collection

Trigo shortcode to display a full-width pages collection, section, or taxonomy term pages with cards.

{{< collection collection="dev" first=3 >}}

How it renders:

Attributes:

Block

Trigo shortcode to display a full-width block layout container with custom inner content.

Use the {{< group >}} shortcode to nest and group related content into vertical columns.

{{< block title="My Title" style="background: linear-gradient(135deg, var(--accent-hover), var(--accent));" >}}

{{< group >}}

This is **Markdown** content between `block` and `group` shortcode tags.

| Style       | Syntax          | Example output           |
| ----------- | --------------- | ------------------------ |
| Bold        | `**bold**`      | Some **bold** text       |
| Italic      | `*italic*`      | Some *italic* text       |
| Mark        | `==mark==`      | Some ==marked== text.    |
| Deleted     | `~~deleted~~`   | Some ~~deleted~~ text    |
| Inserted    | `++inserted++`  | Some ++inserted++ text   |
| Subscript   | `~subscript~`   | Some ~subscript~ text.   |
| Superscript | `^superscript^` | Some ^superscript^ text. |

 Images can be added too:

{{< /group >}}

![](/FreeCAD-symbol.png)

{{< /block >}}

How it renders:

My Title

This is Markdown content between block and group shortcode tags.

Style	Syntax	Example output
Bold	**bold**	Some bold text
Italic	*italic*	Some italic text
Mark	==mark==	Some marked text.
Deleted	~~deleted~~	Some deleted text
Inserted	++inserted++	Some inserted text
Subscript	~subscript~	Some subscript text.
Superscript	^superscript^	Some superscript text.

Images can be added too:

Attributes: