Hugo-Book Shortcodes Usages
December 1, 2020
Hugo-Book Shortcodes Usages
Buttons #
{{< button relref="/" [class="..."] >}}Get Home{{< /button >}}
{{< button href="https://github.com/alex-shpak/hugo-book" >}}Contribute{{< /button >}}
Columns #
Columns help organize shorter pieces of content horizontally for readability.
{{< columns >}} <!-- begin columns block -->
# Left Content
Lorem markdownum insigne...
<---> <!-- magic separator, between columns -->
# Mid Content
Lorem markdownum insigne...
<---> <!-- magic separator, between columns -->
# Right Content
Lorem markdownum insigne...
{{< /columns >}}
Example #
Left Content #
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa protulit, sed sed aere valvis inhaesuro Pallas animam: qui quid, ignes. Miseratus fonte Ditis conubia.
Mid Content #
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter!
Right Content #
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa protulit, sed sed aere valvis inhaesuro Pallas animam: qui quid, ignes. Miseratus fonte Ditis conubia.
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…
Expand #
Expand shortcode can help to decrease clutter on screen by hiding part of text. Expand content by clicking on it.
Example #
Default #
{{< expand >}}
## Markdown content
Lorem markdownum insigne...
{{< /expand >}}
With Custom Label #
{{< expand "Custom Label" "..." >}}
## Markdown content
Lorem markdownum insigne...
{{< /expand >}}
Hints #
Hint shortcode can be used as hint/alerts/notification block.
There are 3 colors to choose: info
, warning
and danger
.
{{< hint [info|warning|danger] >}}
**Markdown content**
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
{{< /hint >}}
Example #
Markdown content
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
Markdown content
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
Markdown content
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
Mermaid Chart #
Mermaid is library for generating svg charts and diagrams from text.
Example #
{{< mermaid [class="text-center"]>}}
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
{{< /mermaid >}}
sequenceDiagram Alice->>Bob: Hello Bob, how are you? alt is sick Bob->>Alice: Not so good :( else is well Bob->>Alice: Feeling fresh like a daisy end opt Extra response Bob->>Alice: Thanks for asking end
Tabs #
Tabs let you organize content by context, for example installation instructions for each supported platform.
{{< tabs "uniqueid" >}}
{{< tab "MacOS" >}} # MacOS Content {{< /tab >}}
{{< tab "Linux" >}} # Linux Content {{< /tab >}}
{{< tab "Windows" >}} # Windows Content {{< /tab >}}
{{< /tabs >}}
Example #
MacOS #
This is tab MacOS content.
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa protulit, sed sed aere valvis inhaesuro Pallas animam: qui quid, ignes. Miseratus fonte Ditis conubia.
Linux #
This is tab Linux content.
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa protulit, sed sed aere valvis inhaesuro Pallas animam: qui quid, ignes. Miseratus fonte Ditis conubia.
Windows #
This is tab Windows content.
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa protulit, sed sed aere valvis inhaesuro Pallas animam: qui quid, ignes. Miseratus fonte Ditis conubia.