MDX Features Showcase#

MDX combines the simplicity of Markdown with the power of React components. Here's what you can do:

Standard Markdown Features#

Text Formatting#

• Bold text and italic text
• Strikethrough text
• inline code with syntax highlighting
• Links to external sites

Code Blocks with Syntax Highlighting#

// JavaScript example
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(10)); // 55

# Python example
def quicksort(arr):
    if len(arr) <= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return quicksort(left) + middle + quicksort(right)

# Terminal commands
npm install next-mdx-remote
git add .
git commit -m "Add MDX support"

Lists and Tables#

Unordered Lists#

• Item 1
  • Nested item
  • Another nested item
• Item 2
• Item 3

Ordered Lists#

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

Tables#

Blockquotes#

"The best way to predict the future is to invent it."

— Alan Kay

Horizontal Rules#

MDX-Specific Features#

HTML Elements#

You can use HTML directly in MDX:

JSX Components#

MDX allows you to use JSX components inline:

Emoji Support#

Add some personality with emojis: 🚀 ⚡ 💻 🎉 🔥

Math-like Expressions#

While not true LaTeX, you can write mathematical expressions:

• E = mc²
• a² + b² = c²
• ∑(i=1 to n) i = n(n+1)/2

Advanced Formatting#

Nested Lists with Mixed Types#

1. Setup Phase
   • Install dependencies
   • Configure environment
   • Set up database
2. Development Phase
   • Write tests
   • Implement features
   • Code review
3. Deployment Phase
   • Build application
   • Deploy to staging
   • Deploy to production

Complex Code Example#

// TypeScript interface and implementation
interface BlogPost {
  title: string;
  date: string;
  excerpt?: string;
  content: string;
  tags?: string[];
}

class BlogManager {
  private posts: BlogPost[] = [];

  addPost(post: BlogPost): void {
    this.posts.push({
      ...post,
      date: new Date().toISOString().split("T")[0],
    });
  }

  getPostsByTag(tag: string): BlogPost[] {
    return this.posts.filter((post) => post.tags?.includes(tag));
  }
}

Tips for Writing MDX#

DO's ✅#

• Mix markdown and JSX naturally
• Use semantic HTML when needed
• Keep JSX components simple
• Utilize frontmatter for metadata

DON'Ts ❌#

• Don't overuse complex JSX in content
• Avoid deeply nested components
• Don't forget accessibility
• Don't mix conflicting styles

Conclusion#

MDX gives you the best of both worlds:

• The simplicity of Markdown for content
• The flexibility of React for interactive elements

Perfect for technical blogs, documentation, and content that needs rich formatting!