What this blog can render

A reference for my future self. Everything below is verified against the theme’s own source, not guessed from documentation. Each section shows the markup and the thing it produces.

Callouts

GitHub / Obsidian alert syntax. Five types: NOTE, TIP, IMPORTANT, WARNING, CAUTION. Append + Some Title for a custom heading.

> [!NOTE]
> Plain note.

> [!WARNING] Careful with this one
> A warning with a custom title.

There is also a {{< callout >}} shortcode, but the theme marks it deprecated in favour of the syntax above. Don’t use it.

Mermaid

Fenced block with mermaid as the language. The script only loads on pages that actually contain one.

```mermaid
sequenceDiagram
    Browser->>Pages: GET /en/blog/
    Pages-->>Browser: static HTML
    Browser->>Remark42: GET /api/v1/find
```

Flowcharts work too:

Markmap

Mind maps from a nested list. Takes a height attribute.

```markmap {height="300px"}
- Root
  - Branch
    - Leaf
```

- Backend
  - Services
    - APIs
    - Event-driven
  - Data
    - PostgreSQL
    - MongoDB
- Infrastructure
  - AWS
    - CDK
    - CloudFormation
  - Azure
    - Terraform
- Practice
  - CI/CD
  - Observability
  - Incident response

Math

KaTeX. Loads when the page has math: true in front matter, a math shortcode, or the site-wide flag. Inline with $...$, display with $$...$$.

Inline: $O(n \log n)$

$$
p_{99} = \inf\{x : F(x) \ge 0.99\}
$$

Inline: $O(n \log n)$ is the bound.

Code

Standard fenced blocks, highlighted by Hugo’s built-in Chroma. Line numbers are off by default site-wide but can be turned on per block.

```python {linenos=true, hl_lines=[2]}
def charge(rate_kw: float) -> float:
    return min(rate_kw, MAX_KW)
```

1def charge(rate_kw: float) -> float:
2    return min(rate_kw, MAX_KW)  # clamp to the connector limit

Steps

Wrap ### headings. Each becomes a numbered step.

{{< steps >}}
### First thing
Do this.
### Second thing
Then this.
{{< /steps >}}

Spoilers

{{< spoiler text="Click to expand" >}}
Hidden content.
{{< /spoiler >}}

Buttons

{{< button url="/en/about/" >}}About me{{< /button >}}

Charts

Plotly. Point data at a JSON file in the page folder, without the extension. Here demo-chart.json sits next to this index.md.

{{< chart data="demo-chart" >}}

CSV tables

Same idea: a .csv in the page folder. Note the parameter is path, not src. The shortcode’s own docstring says src, but the code reads .Get "path". Using src fails the build with a nil-pointer error.

{{< table path="demo-table.csv" caption="Latency by service" >}}

Regular Markdown tables also work:

Images

Plain Markdown. The render hook looks in the page folder first, then in assets/media/, and emits a responsive srcset with generated sizes.

![Alt text](authors/me.webp)

Video and audio

{{< video src="clip.mp4" controls="yes" >}}
{{< audio src="episode.mp3" >}}

Both resolve the page folder first, then assets/media/, then a remote URL.

Icons

{{< icon name="brands/github" >}} inline in a sentence.

inline in a sentence.

Jupyter notebooks

{{< notebook path="analysis.ipynb" >}}

Renders an .ipynb inline, useful for the data-heavy posts.

Includes

{{< include "snippets/shared-warning.md" >}}

Pulls another Markdown file in, path relative to content/.

What is not supported

PlantUML. There is no PlantUML render hook or script anywhere in this theme. I checked the layouts and the JS bundle. Options if I ever need it:

1. Use Mermaid instead. It covers sequence, flowchart, class, state, ER, and Gantt, which is most of what PlantUML gets used for.
2. Render the .puml to SVG offline and commit the SVG, then embed it as a normal image. No build-time dependency, no external server.

A PlantUML render hook would be maybe twenty lines in layouts/_markup/render-codeblock-plantuml.html, but it would have to call out to a rendering server at build time, which is why I’d rather not.

Front matter that matters

---
title: "Post title"
summary: "Shown in listings and meta description."
date: 2026-08-08
translationKey: some-key   # links the pt/en/ja versions together
authors: [me]
tags: [meta, markdown]
math: true                 # load KaTeX on this page
commentable: true          # inherited from blog/_index.md already
draft: false
---

translationKey is the important one: it is what makes the language switcher jump to the same article instead of the homepage.