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
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 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 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 helps add p5 sketches into your book. There are two types of p5 shortcodes according to the html element used to embed them.
Types # Iframe p5 iframe shortcodes embed p5.js code within an iframe element. There are two p5 iframe shortcodes: p5-iframe and p5-global-iframe. p5-iframe # {{< p5-iframe ver="1.5.0" sketch="/path/to/sketch.js" lib1="https://cdntolib1/lib1.js" width="800" height="600" >}} All parameters are optional but sketch. Default values are shown in the above snippet but for libs*.