Welcome to MDX!
This is an example MDX file that demonstrates how content collections work with MDX support.
What is MDX?
MDX allows you to use JSX components directly in your Markdown content. This means you can:
- Write regular Markdown
- Embed React/Astro components
- Create interactive content
How to Use Components in MDX
To use components in your MDX files, you have a few options:
Option 1: Import components directly in the MDX file
---
title: "My Post"
---
import Welcome from '../../components/Welcome.astro';
# My Post Content
<Welcome />Option 2: Configure global components
You can configure components globally in your Astro config to make them available in all MDX files.
Rich Content Example
Since this is MDX, you can create rich, interactive content that goes beyond traditional Markdown.
Key benefits:
- Type-safe frontmatter with Zod schemas
- Component integration
- Full Markdown support
- Excellent DX with VS Code
Note: This is a blockquote showing how styling works with our enhanced layouts!
Code Example
Here’s some sample code with syntax highlighting:
const message = "Hello from MDX!";
console.log(message);Lists Work Great Too
- Ordered lists look professional
- Multiple levels are supported
- Styling is consistent
- Unordered lists too
- With proper spacing
- And consistent styling
That’s it! Your MDX content now looks amazing with proper typography and layouts.