Typography & elements

A living style sheet — one page that renders every text and block style the docs support, so I can see them side by side and copy the markup. If it isn't shown here, it probably isn't styled.

Each section shows the source you write, then the rendered result.

Page header

The header comes from frontmatter, not the body. title is the <h1>, kind sets the corner tag (garden · reference · cheatsheet), and the optional sub prints a one-line subtitle beside the tag — like the one at the top of this page.

---
title: Typography & elements
sub: Every text and block style the docs render
kind: reference
---

Headings

Only ## and ### are used in the body — the # level is the page title. Both render a faint prefix (## / //) so structure reads at a glance.

## A section heading
### A subsection heading

A section heading

A subsection heading

Body, lead, and muted text

A normal paragraph is just text. Wrap the opening paragraph in <p class="lead"> for the larger intro voice, and <p class="muted"> for a dimmed aside.

Regular body text — the default 14px measure.

<p class="muted">Muted text — a dimmed aside that steps back from the body.</p>

Regular body text — the default 14px measure.

Muted text — a dimmed aside that steps back from the body.

Inline styles

**bold**, *italic*, and inline `code` behave as expected. The three note kinds also have coloured inline badges via <b class="k-…">.

This is **bold**, this is *italic*, and this is `inline code`.

The kinds are <b class="k-garden">garden</b>, <b class="k-reference">reference</b>,
and <b class="k-cheatsheet">cheatsheet</b>.

This is bold, this is italic, and this is inline code.

The kinds are garden, reference, and cheatsheet.

Keyboard keys

<kbd> renders a small key cap — chain them for chords.

Press <kbd>⌘</kbd><kbd>K</kbd> to search, <kbd>?</kbd> for help.

Press ⌘K to search, ? for help.

Links

Internal links use slug wiki syntax (with label to relabel). External links get a ↗ and open in a new tab. A wiki link to a missing note renders as a muted "broken" link.

See Colophon — how this site works, or the site colophon.
An external link: [rether.fr](https://rether.fr). A missing-note link.

See Colophon — how this site works, or the site colophon. An external link: rether.fr. A missing-note link.

Lists

Unordered and ordered lists both use a faint marker.

- first point
- second point
  - a nested point

1. step one
2. step two

• first point
• second point
  • a nested point

1. step one
2. step two

Blockquote

A blockquote dims and italicises. A final short paragraph inside it is treated as an attribution line.

> The best notes are the ones you can find again.
>
> — a lesson learned twice

The best notes are the ones you can find again.

— a lesson learned twice

Tables

Standard markdown tables render inside a rounded, bordered frame.

| element | authored as | note |
| --- | --- | --- |
| heading | `##` / `###` | faint prefix |
| callout | `<div class="callout">` | three tones |
| code | ` ```lang title="…" ` | filename + line numbers |

Code blocks

A fenced block renders a framed listing with a line-numbered gutter. Add title="…" for a filename header and highlight="…" to accent lines (a single line, a comma list, or a range).

```rust title="clamp.rs" highlight="2"
fn clamp(x: i32, lo: i32, hi: i32) -> i32 {
    x.max(lo).min(hi) // branchless
}
```

fn clamp(x: i32, lo: i32, hi: i32) -> i32 {
    x.max(lo).min(hi) // branchless
}

Terminal blocks

A ```terminal fenced block renders a styled shell transcript instead of a plain code box: commands, output, exit codes, and per-flag breakdowns. Each example below shows the source you write, followed by the rendered result.

Basic command and output

Prefix a command with in: and its output with out:. Everything else is optional.

```terminal
in: whoami
out: root
```

int: is accepted as an alias for in: if you prefer.

Multi-line commands

Any line without a prefix continues the current command. This is how you write commands that span several lines.

```terminal
in: curl -s https://api.example.com/login \
  -H "Content-Type: application/json" \
  -d '{"user":"admin","pass":"hunter2"}'
out: {"token":"eyJhbGci...","expires":3600}
```

Multi-line output

The same rule applies after out:: unprefixed lines are appended to the output. An empty out: just switches to output mode, so the block can start on the next line.

```terminal
in: ls -la /var/www
out:
total 12
drwxr-xr-x  3 www-data www-data 4096 Jul  8 12:00 .
-rw-r--r--  1 www-data www-data  512 Jul  8 11:58 index.php
-rw-------  1 root     root       88 Jul  8 11:59 .secret
```

Failed commands with an exit code

Add exit: <n> to mark a non-zero exit. The command line turns into the "failed" style and an exit N tag appears next to it.

```terminal
in: cat /etc/shadow
exit: 1
out: cat: /etc/shadow: Permission denied
```

Flag breakdowns with explain:

explain: <part> => <description> documents individual flags or tokens. They are lifted out of the transcript and shown as a labelled // breakdown band beneath it.

```terminal
in: nmap -sV -p- --min-rate 5000 10.10.10.5
explain: -sV => probe open ports to determine service and version
explain: -p- => scan all 65535 TCP ports
explain: --min-rate 5000 => send at least 5000 packets per second
out: PORT     STATE SERVICE VERSION
22/tcp   open  ssh     OpenSSH 8.9
80/tcp   open  http    nginx 1.18.0
```

Multiple blocks in one terminal

Each new in: starts a fresh command block, so a single ```terminal fence can hold a whole sequence. When more than one block has an explain:, each breakdown is labelled with its command so you can tell them apart.

```terminal
in: id
out: uid=1000(user) gid=1000(user) groups=1000(user)

in: sudo -l
explain: -l => list the commands the current user may run via sudo
out: User user may run the following commands:
    (root) NOPASSWD: /usr/bin/find

in: find . -exec /bin/sh \; -quit
explain: -exec => run a command for each match
explain: -quit => stop after the first match
out: # whoami
root
```

Header options

The info string on the fence line accepts three options.

• title="…" — show a title in the header band.
• prompt="…" — change the prompt glyph (default #).
• noheader — drop the // shell header band entirely.

title and a custom prompt:

```terminal title="root@target" prompt="#"
in: systemctl restart nginx
in: systemctl status nginx --no-pager
out: ● nginx.service - A high performance web server
     Active: active (running)
```

noheader — a bare transcript with no header band:

```terminal noheader
in: echo $SHELL
out: /bin/zsh
```

Tabbed sessions

Several shells in one block, switched with a tab strip. A line --- tab: <title> starts a new session; only the active one is shown. Mark the tab that opens first with a trailing * (otherwise the first tab wins). Add prompt="…" on the marker to override the prompt for that session.

```terminal prompt="❯"
--- tab: build
in: cargo build --release
out: Finished release [optimized] target(s) in 3.14s

--- tab: bench *
in: cargo bench --bench frame
out: p50 3.1ms · p99 3.8ms · 0 frees/frame

--- tab: test
in: cargo test --release arena
exit: 1
out: test result: FAILED. 1 failed; 11 passed
```

Split panes

The same syntax with --- split: <title> stacks every session in view at once, each with its own header — useful for showing two ends of a system side by side.

```terminal prompt="❯"
--- split: producer
in: cargo run --bin producer
out: enqueued 64 jobs
buffer full — send() parked, waiting on consumer…

--- split: consumer
in: cargo run --bin consumer
out: draining 64 in flight · 1.2k jobs/s
buffer drained — producer resumed
```

Terminal block reference

Line prefixes, inside the block:

Info-string options, on the ```terminal fence line:

A new in: always begins a new command block, so one fence can contain a full session. exit: and explain: always apply to the command block they appear in.

Callouts

A <div class="callout"> is a bordered aside with a wide-tracked label. Add warn or ok to the class to recolour the border and label; the default is the accent tone. The label text is free-form.

<div class="callout"><div class="ic">NOTE</div><p>The neutral, accent-toned default.</p></div>
<div class="callout warn"><div class="ic">TRAP</div><p>A warning — amber border and label.</p></div>
<div class="callout ok"><div class="ic">WHY</div><p>A confirmation — green border and label.</p></div>

Footnotes

A [^key] reference lifts its definition to a numbered list at the foot of the page and links both ways.

Type juggling bites when `==` coerces silently.[^juggle]

Type juggling bites when == coerces silently.^[1]

Images

An image with a caption renders as a figure; clicking it opens a lightbox. The caption doubles as the alt text.

![A caption that describes the image.](/path/to/image.png)

Embedded demos

An ```html-embed block drops a self-contained page from public/demos/ into the note as an iframe. The body is a single file reference — a bare name is resolved under /demos/, or pass an absolute path / full URL. Optional title="…" and height="…" (pixels, 240–1200, default 620) follow the fence.

```html-embed height="640"
cpu_vs_gpu_instancing.html
```

Reference