MDX is a superset of 🔻 Markdown to allow JSX components in Markdown documents.
Tooling support
The two tools I use for creating this website, 💎 Quartz for transforming Markdown files to HTML pages and 🪨 Obsidian for writing, don’t natively support the MDX format.
Obsidian can preview MDX files through obsidian-mdx and treat .mdx files as Markdown using obsidian-edit-mdx.
Other tools:
- 🧑💻️ VSCode: preview through mdx-preview and language support through vscode-mdx
Remark MDX
Remark is a tool to transform Markdown with plugins. MDX has Remark support through remark-mdx, but this just adds parsing and serialisation support for the features that MDX introduces on top of Markdown. It does not handle compilation from MDX to JavaScript.
This means that even though 💎 Quartz works with Remark, it is not possible to add MDX support by simply introducing the remark-mdx package to Quartz.
Quartz renders the final website from JSX but it uses preact-render-to-string which removes all interactive elements (for example useState and useEffect).