MDX Files

We are experimenting with .mdx file support. In general, these files work with Astro Accelerator just like normal markdown files, except you can use MDX syntax inside them. This page has been authored as an .mdx page as an example.

Don’t use default layouts if you import markdown files into .mdx files. Astro will process your layout for all includes, which wil result in unexpected additional components rendered throughout the page.

The text below is an example of MDX variables:

This text originates from a variable in the .mdx file

You can use varaibles using {variableName} syntax.

Adding MDX to Astro

Install the extension:

npm install @astrojs/mdx

Update your astro.config.mjs file:

import mdx from '@astrojs/mdx';

export default defineConfig({
    integrations: [mdx()],
    // ...
});

Known issues

If you use variables in headings, the table of contents and bookmark address reflect the variable name rather than the text that will be displayed on the page

Unknown issues

Please let me know on GitHub.