Writing in MDX

Articles are MDX, so plain Markdown works everywhere - and when you need more, you can drop in React components. This post doubles as a smoke test for the pipeline.

Code blocks

Fenced code blocks are highlighted at build time by Shiki via rehype-pretty-code, with separate light and dark themes:

interface Greeting {
  message: string
}
 
export function greet(name: string): Greeting {
  return { message: `Hello, ${name}!` }
}

Go, too:

func main() {
	articles := getAllArticles()
	for _, a := range articles {
		fmt.Println(a.Title)
	}
}

GitHub-flavored Markdown

Tables, task lists, and strikethrough all work thanks to remark-gfm:

Blockquotes render through the typography plugin, so they inherit the site theme in both light and dark mode.

Inline React components

Because this is MDX, you can define or import components right in the article:

Everything below the frontmatter exports is just content - write, commit, push, and the RSS feed and OG image regenerate on the next build.