MDX Showcase — Everything This Blog Can Do

Welcome to the MDX Showcase post. This page demonstrates every feature this blog supports. 🎉

📝 Text Formatting

You can use bold, italic, ~~strikethrough~~, and inline code. Combine them: bold code.

Block quote:

"Any sufficiently advanced technology is indistinguishable from magic."
— Arthur C. Clarke

🖼️ Images

A standard Markdown image with alt text:

Unsplash code photo

🎬 YouTube Embed

Embed a YouTube video using a native <iframe>:

💻 Code Blocks

Syntax-highlighted code blocks powered by rehype-pretty-code:

// TypeScript — type-safe fetch utility
async function fetchUser(id: string): Promise<User> {
  const res = await fetch(`/api/users/${id}`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json() as Promise<User>;
}

# Python — recursive Fibonacci
def fib(n: int) -> int:
    if n <= 1:
        return n
    return fib(n - 1) + fib(n - 2)
 
print([fib(i) for i in range(10)])

# Install dependencies
pnpm install
 
# Start dev server
pnpm dev

Inline code: call console.log("hello") or reference process.env.NODE_ENV.

➗ LaTeX / Math

Inline math: The quadratic formula is $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$ .

Block math (display mode):

\int_{-\infty}^{\infty} e^{-x^2}\, dx = \sqrt{\pi}

E = mc^2

Maxwell's equations in differential form:

\nabla \cdot \mathbf{E} = \frac{\rho}{\varepsilon_0}, \quad \nabla \cdot \mathbf{B} = 0

ℹ️ Admonitions

This is a note admonition. Use it to provide additional context that is useful but not critical.

This is a tip admonition. Use it for best practices and helpful hints.

This is a warning admonition. Highlight potentially dangerous actions or important caveats here.

This is a danger admonition. Use it for critical warnings like data loss or security issues.

📑 Content Tabs

# Python implementation
def greet(name: str) -> str:
    return f"Hello, {name}!"

🔽 Collapsible Sections

Native HTML <details> elements work in MDX:

Click to expand — implementation details

Here is the hidden content. You can put anything here:

const secret = "This was hidden!";
console.log(secret);

Item one inside the collapsible
Item two inside the collapsible

Math inside a collapsible: $\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$

Another collapsible — performance notes

O(1) lookups with hash maps are generally preferable to O(n) linear scans.

T(n) = O(1) \ll O(\log n) \ll O(n) \ll O(n^2)

😄 Emojis

Emojis work directly in MDX via Unicode:

🚀 Rocket launch — deploying to production.

🐛 Bug squashed — all tests passing.

🎨 Design update — looking sharp now.

🔥 Hot take — tabs > spaces.

💡 Pro tip — premature optimization is the root of all evil.

📋 Tables

Language	Paradigm	Typing	Year
Python	Multi-paradigm	Dynamic	1991
TypeScript	OOP / FP	Static	2012
Rust	Systems	Static	2015
Go	Concurrent	Static	2009

✅ Task Lists

Set up MDX with next-mdx-remote
Add syntax highlighting via rehype-pretty-code
Add math support with remark-math + rehype-katex
Add custom React components in MDX
Set up RSS feed

That's a wrap! This post covers the full range of MDX capabilities available in this blog. 🎊