http://example.org/docs/shortcodes/ Recent content on My New Hugo Site Hugo -- gohugo.io en-us http://example.org/docs/shortcodes/buttons/ Mon, 01 Jan 0001 00:00:00 +0000 http://example.org/docs/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 http://example.org/docs/shortcodes/columns/ Mon, 01 Jan 0001 00:00:00 +0000 http://example.org/docs/shortcodes/columns/ 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! http://example.org/docs/shortcodes/details/ Mon, 01 Jan 0001 00:00:00 +0000 http://example.org/docs/shortcodes/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… http://example.org/docs/shortcodes/expand/ Mon, 01 Jan 0001 00:00:00 +0000 http://example.org/docs/shortcodes/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. http://example.org/docs/shortcodes/hints/ Mon, 01 Jan 0001 00:00:00 +0000 http://example.org/docs/shortcodes/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 http://example.org/docs/shortcodes/katex/ Mon, 01 Jan 0001 00:00:00 +0000 http://example.org/docs/shortcodes/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 >}} 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. http://example.org/docs/shortcodes/mermaid/ Mon, 01 Jan 0001 00:00:00 +0000 http://example.org/docs/shortcodes/mermaid/ 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 >}} http://example.org/docs/shortcodes/tabs/ Mon, 01 Jan 0001 00:00:00 +0000 http://example.org/docs/shortcodes/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!