Hugo Shortcodes

2022/10/21 ⇢ 2026/01/13

Table of contents

Details

Details shortcode is a helper for details html5 element. It is going to replace expand shortcode.

Example

{{< details "Title" [open] >}}
## Markdown content
Lorem markdownum insigne...
{{< /details >}}

{{< details title="Title" open=true >}}
## Markdown content
Lorem markdownum insigne...
{{< /details >}}

Title

Markdown content

Lorem markdownum insigne…

Quote

Quote shortcode can be used with 3 colors: info, warn and critical.

{{< quote [info|warn|critical] >}}
**Markdown content**
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
{{< /quote >}}

Example

Markdown content Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa

Mermaid

Mermaid is a library helping you to generate diagram and flowcharts from text, in a similar manner as Markdown.

{{< mermaid >}}

{{< /mermaid >}}

Example

sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

Remote Github

Hugo is great in many ways. However as a static site generator it doesn’t offer much to embed external content in your pages. Remote-github shortcode helps you to render Github remote content using Github API.

This shortcode is inspired from this issue.

{{% remote-github "user/repo" "filepath" %}}

Example

The following content is render from my til post.