MDX Formatting Guide

This post demonstrates the formatting options available for writing blog posts.

Text Formatting

Standard markdown works as expected: bold text, italic text, and inline code. You can also use links and strikethrough.

Headings

Use ## for main sections, ### for subsections. Avoid using # (h1) in post content since the title is already h1.

Callout Boxes

Quotes with Attribution

Code Blocks

Code blocks with language specification:

interface User {
  id: string;
  name: string;
  email: string;
}
 
async function getUser(id: string): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

Another example with JavaScript:

const config = {
  theme: 'dark',
  language: 'en',
  debug: true,
};

Dividers

Use dividers to separate major sections:

Side Notes

Lists

Unordered lists:

• First item
• Second item
  • Nested item
  • Another nested item
• Third item

Ordered lists:

1. First step
2. Second step
3. Third step

Tables

Link Previews

Horizontal Rule

Media Embeds

YouTube Videos

Tweets/X Posts

Summary

This covers the MDX formatting options available for writing blog posts!