Markdown features & site guide

This document shows every markdown feature available on the site.

• Callouts (> [!TYPE]), titled code frames, terminal code frames.
• Footnotes, math (KaTeX), tables, task lists, images.
• Tabs, inline code, blockquotes, headings, typography.

1. Callouts (admonitions)

Write a callout as a blockquote whose first line starts with a type marker. An optional custom title follows the marker on the same line.

> [!SUCCESS] One in, one out
> Every new tool has to replace something. Tool collections grow entropy —
> the stack should get smaller and sharper over time, not wider.

Supported types (case-insensitive, unknown types render as a normal blockquote):

Examples:

Callout bodies are real markdown, so formatting still works:

2. Footnotes

Reference a footnote with [^label] anywhere in the text, then define it once with [^label]: at the end of the file. Definitions render automatically in a numbered Footnotes section at the bottom of the page — there is no reference list to maintain by hand.

The claim needs a source.[^rhees]

[^rhees]: Wittgenstein, *Philosophical Investigations* §223. Translated from the German by Rush Rhees.

Example:

The quote below is attributed to Wittgenstein, and the argument is Nagel’s.¹

3. Math (KaTeX)

Inline math uses single dollar signs, display math uses $$ on its own lines. Both render through KaTeX, so anything KaTeX supports is available.

Inline math puts the result in the sentence: $\ell = 0.3950$.

$$
\mathrm{Attention}(Q, K, V) = \mathrm{softmax}\!\left(\frac{QK^\top}{\sqrt{d_k}}\right)V
$$

Example:

Inline math puts the result in the sentence: $\ell = 0.3950$. The training run stopped at step $46{,}360$.

4. Titled code frames (editor tab)

Add title="…" to a fenced code block. A header bar with an accent tab indicator is rendered above the code.

```bash title="daily-drivers.sh"
fzf        # fuzzy-find everything: files, history, branches
ripgrep    # grep, but you never wait for it
```

Example:

fzf        # fuzzy-find everything: files, history, branches
ripgrep    # grep, but you never wait for it

5. Terminal code frames & tabs

Add frame="terminal" to get a terminal-style window. Combine it with group="…" + tab="…" on consecutive blocks to group them into an interactive tab widget:

```bash frame="terminal" group="package-manager" tab="pnpm"
pnpm add astro
```

```bash frame="terminal" group="package-manager" tab="npm"
npm install astro
```

```bash frame="terminal" group="package-manager" tab="bun"
bun add astro
```

Example:

pnpm add astro

npm install astro

bun add astro

Renders as a window with a tab bar (pnpm / npm / bun); each tab shows one terminal frame. The widget is built entirely server-side with hidden radio inputs — no client script required.

6. Inline code

Inline code is a muted rounded pill:

Run `pnpm astro check` before committing.

7. Blockquotes

Plain blockquotes keep their styling: a left rule, muted text, no italics.

> "Security is a process, not a product."
>
> — Bruce Schneier

8. Tables

Pipe tables with a header row and a --- separator. Alignment is set with : in the separator row.

| Element | Style | Weight |
| --- | :--- | ---: |
| Body | muted | 400 |
| `strong` | foreground | 600 |

Example:

9. Task lists

Write - [ ] for an open item and - [x] for a done one.

- [x] Wire up the content collection
- [x] Add callouts and code frames
- [ ] Write the post

Example:

• Wire up the content collection
• Add callouts and code frames
• Write the post

10. Images

Standard markdown image syntax, with alt text:

![Screenshot of the archives page](/preview.png)

Example:

11. Strikethrough, autolinks & smart typography

These come from GitHub Flavored Markdown and need no extra syntax.

~~Struck through~~ text.

A bare URL becomes a link: https://astro.build

Straight quotes "like this" and dashes - become "curly" and an em dash.
Ellipses... too.

Example:

Struck through text.

A bare URL becomes a link: https://astro.build

Straight quotes “like this” and dashes - become “curly” and an em dash. Ellipses… too.

12. Links

Ordinary inline links, plus a reference-style form when a source repeats:

An [inline link](https://astro.build), or a [reference link][astro].

[astro]: https://astro.build

Example:

An inline link, or a reference link.

13. Headings & body typography

The prose scale is em-based so it scales with the font size.

14. Code-block chrome

Code blocks are rendered by Expressive Code: syntax highlighting, copy button, line-number gutter, dark panels in both themes.

Note: code panels intentionally stay dark in light mode. The site uses a single dark syntax theme.

Under the hood

Small remark/rehype steps in astro.config.mjs sit on top of Expressive Code:

Verify

pnpm astro check   # 0 errors
pnpm astro build   # builds all pages