Typography & Markdown: every text element this theme renders

This post is the typography test page for the theme. If you change fonts, prose sizing, or anything in the prose-chirpy typography stack, load this page in both light and dark mode and confirm everything still looks balanced.

The theme’s body font is Source Sans 3, the code font is JetBrains Mono, and the prose column is capped at --width-prose (50 rem) so line lengths stay comfortable.

Paragraphs and inline formatting

You can write bold, italic, strikethrough, inline code, and nested bold italic. Long URLs become clickable: visit astro.build. External links open in a new tab with rel="nofollow noopener" thanks to rehype-external-links.

Use the <kbd> tag for keyboard shortcuts: press Cmd + K or / to open the search modal.

“Typography is the craft of endowing human language with a durable visual form.”  E_Robert Bringhurst_

A second paragraph keeps the rhythm. Line height, vertical margin and maximum width are tuned for comfortable reading on both phone and desktop.

Headings

Headings are auto-slugged by rehype-slug and given hover anchors by rehype-autolink-headings  Ehover to the left of any heading on this page to reveal the # link.

Third-level heading

The right-hand TOC reveals H3s only while you are scrolled inside the parent H2 section.

Fourth-level heading

H4s are supported and styled, but they are dense  Ereach for them only when really needed.

Lists

Unordered list:

• A first item with a link to the home page.
• A second item with bold text and inline code.
• A nested item:
  • With its own children.
  • And a deeper nested item.
    • Three levels deep, no problem.

Ordered list:

1. Pick a topic.
2. Outline it  EH2 for sections, H3 for subsections.
3. Write a first draft straight through, no editing.
4. Sleep on it.
5. Edit ruthlessly.

GitHub-flavoured task list (thanks to remark-gfm):

• Wire up Tailwind v4
• Animated theme switcher
• Bilingual routing
• Reach the bottom of this page

Blockquotes

A single-line blockquote.

A multi-line blockquote.

Nested quote that emphasises a sub-point  Eused rarely, but the theme handles it gracefully.

Continuing the outer quote after the nested fragment.

Tables

Inline code, code spans and keyboard shortcuts

Use inline code for identifiers (SITE.showFeaturedImages) or short snippets (bun astro dev). Within tables and lists it stays readable thanks to a slightly muted background.

Fenced code blocks

A short example  Ethe dedicated code blocks post covers every Expressive Code option in detail.

import { getCollection, type CollectionEntry } from 'astro:content';
import { SITE, type Locale } from '../config';

export function shouldShowHero(post: CollectionEntry<'posts'>): boolean {
  if (!post.data.heroImage) return false;
  return post.data.showFeaturedImage ?? SITE.showFeaturedImages;
}

Callouts

The theme ships an MDX <Callout> component with four semantic variants. They inherit daisyUI semantic colours, so they stay legible in both themes.

In plain Markdown, you can also reach for the lower-level CSS class:

Images

Inline Markdown images render edge-to-edge inside the prose column:

A captioned figure with a <figcaption>:

Horizontal rules

Use them sparingly to mark a strong topic shift:

After a horizontal rule, anything that follows (text, code, images) gets a fresh top margin so the rhythm restarts cleanly.

Definition lists

Term : Definition for the term, rendered with a slight indent.

Another term : With a longer definition spread across multiple lines, useful for glossary-style content. Definition lists come from remark-gfm / plain Markdown extensions and are styled by the prose stack.

Math (inline)

For full LaTeX math you must opt in with math: true (see the math post). This page intentionally omits that flag so we can verify that without it, KaTeX styles do not load.

Wrap-up

If anything here looks off  Euneven spacing, oversized headings, unreadable code colours in dark mode  Ethat’s a regression. This page is your safety net.