Code blocks

Highlighting is done by Hugo at build time (Chroma), so a page carries no highlighter script. This site sets the github-dark style with inline styles (markup.highlight in hugo.toml), and code blocks stay dark on both themes.

Languages

```yaml
server:
  addr: ":3000"
```

server:
  addr: ":3000"
  tls:
    enabled: false

{
  "id": "0198f2c1-7e0a-7c3b-9d52-3b1f0c6a9e11",
  "status": "queued",
  "tags": ["welcome", "onboarding"]
}

curl -X POST https://api.example.org/v1/items \
  -H "Authorization: Bearer $TOKEN" \
  -d '{"name": "first"}'

def greet(name: str) -> str:
    """Return a greeting."""
    return f"Hello, {name}"

SELECT id, created_at
FROM items
WHERE project_id = $1
ORDER BY created_at DESC
LIMIT 50;

- theme = "old-theme"
+ theme = "hugo-docs-theme"

A block with no language is plain text. guessSyntax is on, so Hugo tries to guess, and text turns that off:

nothing is highlighted here

Line numbers

```go {linenos=true}

```

1
2
3
4
5
6
7
8

func Sum(xs []int) int {
	total := 0
	for _, x := range xs {
		total += x
	}

	return total
}

Highlighted lines

```go {hl_lines=[2,"4-6"], linenos=true, linenostart=10}

```

10
11
12
13
14
15
16
17
18

func Sum(xs []int) int {
	total := 0

	for _, x := range xs {
		total += x
	}

	return total
}

ASCII diagrams

A fenced block with the language ascii is a diagram: it is set in a monospace stack with full box-drawing coverage, the common indentation is stripped, and the drawing is centred in the frame as one unit.

```ascii
+--------+       +----------+       +----------+
| Client | ----> |  Server  | ----> | Database |
+--------+       +----------+       +----------+
```

+--------+       +----------+       +----------+
| Client | ----> |  Server  | ----> | Database |
+--------+       +----------+       +----------+

Box-drawing characters pass through unchanged:

┌─────────┐    submit    ┌─────────┐    deliver    ┌─────────┐
│  App    │ ───────────▶ │  Queue  │ ────────────▶ │  Relay  │
└─────────┘              └────┬────┘               └─────────┘
                              │ retry
                              ▼
                         ┌─────────┐
                         │  Log    │
                         └─────────┘

The highlight shortcode

Hugo’s built-in highlight shortcode does the same as a fence, for the rare case where a fence cannot be used:

{{< highlight toml "hl_lines=2" >}}
[params]
landing = true
{{< /highlight >}}

[params]
landing = true