Code blocks worth reading

Technical posts live or die by their code blocks, so this site puts real effort into them. All of the highlighting below happens at build time — the reader downloads plain HTML and CSS, no highlighter JavaScript.

Syntax highlighting

TypeScript, with types doing something mildly interesting:

type DeepReadonly<T> = {
  readonly [K in keyof T]: T[K] extends object ? DeepReadonly<T[K]> : T[K];
};

interface Config {
  theme: { accent: string; dark: boolean };
  tags: string[];
}

const frozen: DeepReadonly<Config> = loadConfig();
// frozen.theme.dark = true; // ✗ compile error, as it should be

A shell session:

npm run build && npx wrangler deploy
# ✓ 12 pages built in 640ms
# ✓ Deployed to https://example.com

Line highlighting

When a post walks through a change, the interesting lines are highlighted with {n-m} syntax in the code fence:

export async function getPublishedPosts(): Promise<Post[]> {
  const posts = await getCollection('blog', ({ data }) =>
    // Drafts show up in `astro dev`, never in production:
    import.meta.env.PROD ? !data.draft : true,
  );
  return posts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
}

Your eye lands on the filter logic first — which is the point.

Diagrams, rendered at build time

Mermaid diagrams get the same treatment as code: written as a fenced block in Markdown, rendered to SVG during the build, delivered as markup with zero diagramming JavaScript on the client.

Dark mode without the flash

Both themes are generated at build time and switched with CSS, so toggling the theme restyles every block instantly. Try the toggle in the header while looking at this post.