Markdown + MDX

This page is rendered by the same pipeline and styles as every post. It’s an .mdx file, so it shows everything plain Markdown can do, then everything MDX adds. Edit src/styleguide/markdown.mdx to try something out. Posts can be .md or .mdx; rename a post to .mdx to use the MDX features.

Headings

Posts use ## for sections — they get the uppercase treatment, the red rule, and appear in the contents sidebar. If a post only uses ###, those become the sidebar entries instead.

Heading level 3

Heading level 4

Heading level 5

Heading level 6

Text

A regular paragraph with bold text, italic text, bold italic, strikethrough, inline code, and a link to another page. Links get a yellow underline that fills on hover.

A second paragraph to show spacing between paragraphs. Long-form text sits at a comfortable measure of about 68 characters per line, which keeps essays readable on wide screens.

Inline HTML works too: ⌘ + K for keyboard keys, highlighted text, H₂O for subscript, and E = mc² for superscript.

A line ending with a backslash
forces a line break without starting a new paragraph.

Bare URLs link themselves: https://www.alexthorpe.com. So do email addresses: hello@example.com.

Reference-style links keep long URLs out of your sentences: read the principles or the archive.

Backslash escapes print Markdown characters literally: *not italic*, # not a heading, 1. not a list. In .mdx files, curly braces and angle brackets also need escaping: {like this} and <this>.

Every heading gets an anchor you can link to directly, like this one.

Lists

Unordered

• Bullets cycle through Bauhaus shapes: square,
• circle,
• and triangle.
• Nested lists indent:
  • A nested item
  • Another nested item
    • Third level
• Back to the top level

Ordered

1. Numbered items get zero-padded red numbers
2. Second step
3. Third step with a nested list:
   1. Nested step one
   2. Nested step two
4. Fourth step

Starting at a number

5. Ordered lists can start anywhere
6. Useful when a list continues after a paragraph

Task list

• Draft the essay
• Run the evals
• Publish
• Share the link

Blockquotes

A single-paragraph quote. Use it for pull quotes and the one line you want readers to remember.

A longer quote can run to several paragraphs.

Each paragraph keeps the same blue rule on the left.

— Attribution goes on its own line

Quotes can hold other elements:

• a list

• with inline code

and a quote inside a quote.

Code

Every block gets a language tag and a copy button.

// TypeScript
export async function grade(output: string, rubric: Rubric): Promise<Score> {
  const result = await judge.evaluate({ output, rubric });
  return { pass: result.score >= rubric.threshold, score: result.score };
}

# Python
def advantage(rewards: list[float]) -> list[float]:
    mean = sum(rewards) / len(rewards)
    std = (sum((r - mean) ** 2 for r in rewards) / len(rewards)) ** 0.5
    return [(r - mean) / std for r in rewards]

npm install
npm run dev

{
  "model": "claude-opus-5-5",
  "max_tokens": 1024,
  "messages": [{ "role": "user", "content": "Summarize this incident report." }]
}

- const threshold = 0.5;
+ const threshold = 0.7; // stricter after the June regression

A block with no language set. Long lines scroll sideways instead of wrapping, so the copy button stays pinned to the corner while you scroll through them.

Tables

Model tier	Input $/1M	Output $/1M	Best for
Small	0.10	0.50	Classification
Medium	1.00	5.00	Everyday agents
Large	10.00	50.00	Hard reasoning

Columns can be left, right, or centre aligned with colons in the divider row. Wide tables scroll sideways on small screens.

Images

Images span the text column. The alt text in square brackets is what screen readers announce.

An image wrapped in a link opens the link when clicked:

Math

Inline math sits in the sentence: the advantage is $A_i = \frac{r_i - \mu}{\sigma}$ for each sample.

Display math gets its own line:

$$\mathcal{L}_{\text{GRPO}} = \mathbb{E}\left[\min\left(\rho_i A_i,\ \text{clip}(\rho_i, 1-\epsilon, 1+\epsilon)\,A_i\right)\right] - \beta\, D_{\text{KL}}$$

Footnotes

Footnotes keep citations out of the flow of the argument.¹ They’re numbered automatically and collected at the bottom of the post.²

Collapsible section

Click to expand

Hidden content for long appendices, raw data, or prompts you want available but not in the way.

MDX components

MDX lets a post use components alongside Markdown. These are available in every .mdx post and principle page without an import.

Callout

<Callout type="tip" title="Try this">
  Markdown works **inside**.
</Callout>

Figure

<Figure src="/image.jpg" alt="…" caption="…" credit="Photo: …" wide />

Generative cover art

The same Bauhaus art used for post covers, seeded by any text. Change the seed and the composition changes.

<Cover seed="agency" />

Principle icons

<PrincipleIcon index={4} size={28} />

MDX expressions

Curly braces run JavaScript when the page builds. This site has 10 essays, and the year is 2026. The Bauhaus shapes are square, circle, triangle.

Values come from export lines at the top of the file:

export const essays = 10;

This site has {essays} essays.

Any other component can be imported the same way:

import Chart from '../components/Chart.astro';

<Chart data={[1, 2, 3]} />

Divider

A horizontal rule (---) becomes the red, yellow, blue Bauhaus stripe:

---

That’s everything.

Footnotes

1. This is the first footnote. It can include links and code. ↩

2. The second footnote. The arrow after each one jumps back to where you were reading. ↩