Shortcodes #

Here you can see the Shortcodes for this template

List of Shortcodes: #

Buttons: 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
Columns: Columns # Columns help organize shorter pieces of content horizontally for readability. {{< columns >}}  # Left Content Lorem markdownum insigne... <--->  # Mid Content Lorem markdownum insigne... <--->  # Right Content Lorem markdownum insigne... {{< /columns >}} Example # Left Content # Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter!
Details: 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 # 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 >}} Expand ↕ Markdown content Lorem markdownum insigne… With Custom Label # {{< expand "Custom Label" "..." >}} ## Markdown content Lorem markdownum insigne.
Hints: 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
Katex: KaTeX # KaTeX shortcode let you render math typesetting in markdown document. See KaTeX Example # {{< katex [display] [class="text-center"] >}} f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi {{< /katex >}} \[f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi\] 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.
Mermaid: Mermaid Chart # MermaidJS is library for generating svg charts and diagrams from text. Override Mermaid Initialization Config To override the initialization config for Mermaid, create a mermaid.json file in your assets folder! Example # {{< mermaid [class="text-center"]>}} 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.
P5: p5 # p5 helps add p5 sketches into your book. There are two types of p5 shortcodes according to the html element used to embed them. Types # Div p5 div shortcodes embed p5.js code within a div element. There are two p5 div shortcodes: p5-div and p5-instance-div. p5-div # {{< p5-div ver="1.4.0" sketch="/path/to/sketch.js" lib1="https://cdntolib1/lib1.js" >}} All parameters are optional but sketch. Default values are shown in the above snippet but for libs*.
Tabs: 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 MacOS # This is tab MacOS content. Lorem markdownum insigne. Olympo signis Delphis!