Test

This is the kitchen-sink post for the blog renderer. It intentionally exercises standard Markdown, GitHub-flavoured Markdown, native MDX elements, and custom React components in one place.

Text and links

Regular prose can include bold text, italic text, both at once, deleted text, inline code, H₂O, x², highlighted text, and keyboard input such as ⌘ + K.

Links can point to an internal route, an on-page heading, or an external site ↗. Bare URLs are also linked by GFM: https://github.com ↗.

Good writing is a test of structure as much as style. A renderer should make the hierarchy obvious without making the page feel decorated.

Heading scale

Heading one

The post title owns the page's primary heading. Authored H1s are intentionally rendered as H2s inside an article while retaining their distinct visual style.

Heading two

Heading three

Heading four

Heading five

Heading six

Lists

An unordered list:

• One clear idea
• A second item with emphasis
  • A nested item
  • Another nested item with code
• A final item

An ordered list:

1. Write the smallest useful version.
2. Verify it with real content.
3. Remove anything that does not help.

A task list:

• Parse frontmatter
• Render GFM tables and task lists
• Publish a real post

Code

Inline code looks like const answer = 42. Fenced code preserves language metadata and horizontal scrolling:

type BlogPost = {
  slug: string;
  title: string;
  publishedAt: string;
};

export function byNewest(a: BlogPost, b: BlogPost) {
  return Date.parse(b.publishedAt) - Date.parse(a.publishedAt);
}

Plain code blocks work too:

GET /blogs/test
200 OK

Table

Custom MDX components

Native interactive content

MDX can render native HTML elements too. This disclosure contains formatted content and stays keyboard accessible without client-side JavaScript.

---

Final paragraph

If every section above is legible, aligned, keyboard accessible, and contained at narrow widths, the supported MDX surface is rendering correctly.