MDX Features Showcase

This post demonstrates the various features available in our MDX-powered blog.

Syntax Highlighting

Here's some TypeScript code with beautiful syntax highlighting powered by Shiki:

interface User {
  id: number;
  name: string;
  email: string;
}
 
async function fetchUser(id: number): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) {
    throw new Error('Failed to fetch user');
  }
  return response.json();
}
 
const user = await fetchUser(1);
console.log(user.name);

Lists and Formatting

Unordered list:

• First item with regular text
• Second item with bold text
• Third item with italic text
• Fourth item with inline code

Ordered list:

1. Step one: Install dependencies
2. Step two: Configure settings
3. Step three: Run the application

Blockquotes

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

This is a great quote about innovation and taking action.

Links

Check out these resources:

• Next.js Documentation - Learn about Next.js features
• Content Collections - Type-safe content management
• Tailwind CSS - Utility-first CSS framework

Inline Code

Use the useState hook to manage component state in React. The useEffect hook is useful for side effects.

More Code Examples

Here's a simple React component:

export default function Greeting({ name }) {
  return (
    <div className="greeting">
      <h1>Hello, {name}!</h1>
      <p>Welcome to our blog.</p>
    </div>
  );
}

And some CSS:

.greeting {
  padding: 2rem;
  border-radius: 0.5rem;
  background: linear-gradient(to right, #3b82f6, #8b5cf6);
}
 
.greeting h1 {
  font-size: 2rem;
  font-weight: bold;
  color: white;
}

Tables

Conclusion

This blog now supports rich content with MDX, making it easy to create engaging technical posts with code examples, formatting, and more.