MDX kitchen sink

Phase 4 verification page. It exercises the parts of the content pipeline that Phase 5 will depend on: the markdown renderer, the custom Shiki theme, the CSS line-number counter, and the .astro components exposed to MDX. None of it ships JavaScript.

Prose

Body copy, an inline link, some inline code and strong text — all rendered through the markdown pipeline rather than hand-written HTML, so this is what real posts will look like.

• First list item
• Second list item, long enough to wrap and show the indent

Code blocks

Line numbers come from counter(sh-line-number) in global.css — pure CSS, no JS.

import { defineCollection, z } from 'astro:content'

const writing = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.coerce.date(),
    draft: z.boolean().default(false)
  })
})

// keywords, strings, properties and comments should each pick up their own --sh-* colour
export const collections = { writing }

bun install
bun run dev -- --host

MDX components

Embed