This theme comes with the @astrojs/mdx integration installed and configured in your astro.config.mjs config file. If you prefer not to use MDX, you can disable support by removing the integration from your config file.The MDX integration is what makes components like this sidenote possible inside Markdown content.
Why MDX?
MDX is a special flavor of Markdown that supports embedded JavaScript & JSX syntax. This unlocks the ability to mix JavaScript and UI Components into your Markdown content for things like interactive charts or alerts.JSX expressions in MDX are compiled at build time, so there’s no runtime overhead for static content.
If you have existing content authored in MDX, this integration will hopefully make migrating to Astro a breeze.
Migration tip
MDX files can contain standard Markdown alongside JSX. You can incrementally adopt components — start with plain Markdown and add interactive elements only where you need them.
Example
Here is how you import and use a UI component inside of MDX. When you open this page in the browser, you should see the styled link below.
Embedded link in MDXAlso check out the Markdown Style Guide for standard formatting examples.
More Links
- MDX Syntax Documentation
- Astro Usage Documentation
- Note: Client Directives are still required to create interactive components. Otherwise, all components in your MDX will render as static HTML (no JavaScript) by default.