Fold

Use fold when a section should stay readable without taking too much vertical space.

{{< fold "Why this shortcode exists" >}}
This hidden block is rendered inside a native `<details>` element.
{{< /fold >}}

Note

Use note for callouts such as tips, warnings, or side remarks.

{{< note type="info" title="Content-first" >}}
Pocket Hugo Theme keeps callouts readable without making them look like app UI.
{{< /note >}}

Badge

Badges are useful for compact status labels inside paragraphs.

{{< badge "Stable" >}}
{{< badge text="Optional" type="info" >}}
{{< badge text="Experimental" type="warn" >}}

Stable Optional Experimental

Button

Use button when you want a stronger inline call to action than a normal text link.

{{< button href="https://theme.leftn.com/guide/" label="Open the Guide" >}}
{{< button href="https://theme.leftn.com/links/" label="Browse Links" style="ghost" >}}

Open the Guide Browse Links

Video and audio

These shortcodes keep common media embeds consistent with the rest of the theme.

{{< video src="https://theme.leftn.com/media/demo.mp4" title="Local video" >}}Caption{{< /video >}}
{{< audio src="https://theme.leftn.com/media/demo.mp3" title="Audio clip" >}}Caption{{< /audio >}}
{{< youtube id="rdwz7QiG0lk" >}}YouTube embed{{< /youtube >}}
{{< bilibili bvid="BV1xx411c7mu" >}}Bilibili embed{{< /bilibili >}}

Timeline

Use timeline when you want a process, update log, or historical sequence.

{{< timeline >}}
{{< timeline-item date="2026-01" title="Planning" >}}Outline the scope.{{< /timeline-item >}}
{{< timeline-item date="2026-02" title="Build" >}}Ship the first version.{{< /timeline-item >}}
{{< /timeline >}}

Columns

Use columns when two ideas need to be compared side by side.

{{< columns >}}
{{< column >}}Left side{{< /column >}}
{{< column >}}Right side{{< /column >}}
{{< /columns >}}

Gallery

Use gallery when one article needs a compact image grid without writing a separate Markdown image block for every file.

{{< gallery pattern="sample*.webp" columns="3" >}}

The shortcode reads matching image files from the current page bundle, renders them as a responsive grid, and reuses the built-in lightbox when you click a photo.

Why this matters

These shortcodes are not meant to turn the theme into a component library. They simply give writers a few reusable building blocks that fit the theme without adding a framework layer.

To see every block below rendered as intended, enable the related switches in hugo.toml:

[params.extensions]
  mermaid = true
  katex = true

Syntax highlighting is included by default. For Mermaid and KaTeX, add a page-level list in the front matter of the article that actually needs them:

extensions:
  - mermaid
  - katex

Syntax Highlighting

Pocket Hugo includes a small syntax color layer by default, so normal highlighted code blocks do not need any extra page-level switch.

package main

import "fmt"

func main() {
    theme := "pocket-hugo-theme"
    enabled := []string{"syntax", "mermaid", "katex"}
    fmt.Println(theme, enabled)
}

.article-content pre {
  border-radius: 18px;
  overflow-x: auto;
}

Mermaid

When the mermaid extension is enabled, fenced code blocks with the mermaid language are converted into diagrams on the page.

flowchart LR
    A[Write Markdown] --> B[Enable extension]
    B --> C[Build site]
    C --> D[See rendered diagram]

KaTeX

When the katex extension is enabled, inline and block math can render directly inside the article.

Inline math: $E = mc^2$

Block math:

$$ \int_{0}^{1} x^2 , dx = \frac{1}{3} $$

$$ f(x) = \frac{1}{\sqrt{2\pi\sigma^2}} \exp\left(-\frac{(x-\mu)^2}{2\sigma^2}\right) $$

Mixed Content

The main goal of this post is to show that code, diagrams, and formulas can live together in one normal article layout without breaking the theme rhythm.

1. Syntax highlighting improves token contrast.
2. Mermaid turns fenced blocks into SVG diagrams.
3. KaTeX renders math without changing your writing flow too much.