MDX Cheat Sheet

This page is an internal reference of every feature supported by the MDX setup on this blog. Use it as a template when writing new posts.

---

Text Formatting

Regular paragraph text renders with comfortable line height and muted color for easy reading.

Bold text draws attention. Italic text adds emphasis. Bold italic does both. You can also use strikethrough to indicate removed or outdated content.

Inline code renders in monospace with a subtle border — useful for referencing variables, functions(), or file-names.ts inside prose.

---

Headings

Headings from h1 through h3 are styled. Use them to structure long posts:

This Is an H3

Use H3 for subsections within a topic. Avoid going deeper than H3 — it usually means the content should be restructured.

---

Links

• Internal link example — relative links stay in the same tab
• External link example — external links open in a new tab with noopener noreferrer

---

Lists

Unordered

• First item in the list
• Second item with bold inside it
• Nested concepts work well as separate bullet points

Ordered

1. Clone the repository
2. Install dependencies with pnpm install
3. Start the dev server with pnpm dev

---

Blockquotes

Good code is its own best documentation. As you're about to add a comment, ask yourself, "How can I improve the code so that this comment isn't needed?"

— Steve McConnell

---

Code Blocks

Fenced code blocks with syntax hints. The remark-gfm plugin handles GitHub-flavored markdown extensions.

type Theme = "dark" | "light";

const toggle = (current: Theme): Theme => {
  return current === "dark" ? "light" : "dark";
};

::selection {
  background-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  color: inherit;
}

pnpm build && pnpm start

---

Tables

GFM tables render with proper borders and alignment:

---

Horizontal Rules

Use --- to visually separate sections. You've already seen several on this page.

---

Combined Example

Here's how these elements work together in a real paragraph:

When building a static site with Next.js, the output: "export" option in next.config.ts tells the framework to generate plain HTML files. This means:

1. No Node.js server needed at runtime
2. Hosting on Vercel or any platform
3. Near-perfect Lighthouse scores out of the box

Static doesn't mean limited — MDX lets you embed interactive React components directly in your markdown when you need them.

---

What MDX Adds Over Plain Markdown

MDX compiles markdown to React components at build time. This means you can:

• Import and render any React component inline
• Use JavaScript expressions in your content
• Get full type safety for your blog's component API
• Extend with remark/rehype plugins for custom syntax

The components used on this blog are defined in src/lib/mdx-components.tsx. Every HTML element rendered from markdown passes through those styled wrappers.