Introduction
Welcome to the MDX testing content. Below are several sections with nested headings to illustrate the hierarchical structure.
What is MDX?
MDX stands for Markdown for the component era. It's a way to write JSX embedded in markdown.
console.log("This is a code block and shouldn't affect the hierarchy.");Why use MDX?
- You can import components.
- It's really cool!
Pros of MDX
- Embed JSX
- Use markdown syntax
- Extend with custom components
Cons of MDX
Not many, but it's good to know both Markdown and JSX.
MDX vs Markdown
This section compares MDX and traditional markdown.
Similarities
They both originate from the idea of easy-to-read text formats.
Differences
MDX supports JSX out of the box. Traditional markdown does not.
// templates/community.jsx
export default function ({ pageContext }) {
return (
<p>{pageContext.githubData.stargazers_count}</p>
);
};Conclusion
MDX is a powerful way to combine Markdown and JSX. Happy writing!