Jan 01, 2025 · 2 min read

MDX Style Guide

A single post that exercises all MDX components and styles.

MDX Style Guide

This is a single page that combines all blog examples so you can preview the MDX styling in one place. It intentionally uses literal phrases like "this is header 1" to make the styling obvious.

This is header 1

This is a paragraph. This is inline code: this is inline code. This is a link to an internal page: this is link. This is a link to an external site: this is link.

This is header 2

This is a paragraph under header 2. The heading above should have an anchor icon on hover. You can also test an in-page link: this is link.

This is header 3

This is another paragraph. The text spacing and font sizes here should match the blog typography rules.

This is a blockquote. It should have a left border and muted text.

This is an unordered list

  • This is list item 1
  • This is list item 2
  • This is list item 3

This is an ordered list

  1. This is list item 1
  2. This is list item 2
  3. This is list item 3

This is a table

This is headerThis is headerThis is header
This is cellThis is cellThis is cell
This is cellThis is cellThis is cell

This is a callout

This is callout

This is callout content. Use callouts to highlight important notes.

This is a note

Note

This is a note. It should render like a labeled callout.

This is a code block

TS
const message = "this is code block"
console.log(message)

This is a custom CodeBlock component

This is code block title
const example = "this is code block"

This is an image (Markdown syntax)

this is image

This is an Image component inside a Figure

this is image
This is a figure caption.

This is a standalone Image component

this is image