Welcome to MDX!

MDX allows you to use JSX components directly in your Markdown content. This creates powerful possibilities for interactive documentation and blog posts.

Basic HTML Elements

You can use HTML elements directly in MDX:

Code Examples

MDX works great with syntax highlighting:

// Example React hook
import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue];
}

Styled Content Blocks

Traditional Markdown Features

Of course, all traditional Markdown features work perfectly:

Lists

• Unordered lists work as expected
• You can have italic and bold text
• Inline code is supported
• Links work fine

Numbered Lists

1. First item
2. Second item
3. Third item with code

Tables

Custom Styling with HTML

Progress Bars

Quote Block

“The best way to learn MDX is to start simple and gradually add more complexity. HTML elements with inline styles are often more reliable than complex React components in Astro.”

Conclusion

MDX combines the simplicity of Markdown with the flexibility of HTML and JSX. This enables:

• Rich formatting with HTML elements
• Custom styling with inline CSS
• Structured content without complex components
• Reliable rendering across different environments

The key is to start simple and build up complexity gradually!

This post demonstrates MDX capabilities using HTML elements and inline styles, which are more compatible with Astro’s MDX implementation.