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 #

Buttons #

Buttons are styled links that can lead to local page or external link.

Example #

{{< button relref="/" [class="..."] >}}Get Home{{< /button >}}
{{< button href="https://github.com/alex-shpak/hugo-book" >}}Contribute{{< /button >}}

Get Home Contribute

Mermaid Chart #

MermaidJS is library for generating svg charts and diagrams from text.

Note

Override Mermaid Initialization Config

To override the initialization config for Mermaid, create a mermaid.json file in your assets folder!

Example #

{{< mermaid class="optional" >}}
stateDiagram-v2
    State1: The state with a note
    note right of State1
        Important information! You can write
        notes.
    end note
    State1 --> State2
    note left of State2 : This is the note to the left.
{{< /mermaid >}}

stateDiagram-v2 State1: The state with a note note right of State1 Important information! You can write notes. end note State1 --> State2 note left of State2 : This is the note to the left.

title: KaTeX #

KaTeX #

KaTeX shortcode let you render math typesetting in markdown document. See KaTeX

Example #

{{< katex display=true class="optional" >}}
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
{{< /katex >}}

Display Mode Example #

Here is some inline example: \(\pi(x)\) , rendered in the same line. And below is display example, having display: block \[f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi\] Text continues here.

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 #

Note

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

Warning

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

Danger

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

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 >}}

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 #

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 >}}

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 >}}