An Rsbuild plugin to provide support for MDX.
MDX lets you use JSX in your markdown content. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast.
Install:
npm add @rsbuild/plugin-mdx -DAdd plugin to your rsbuild.config.ts:
// rsbuild.config.ts
import { pluginMdx } from "@rsbuild/plugin-mdx";
export default {
plugins: [pluginMdx()],
};After registering the plugin, you can import .mdx or .md files as components in your code.
If you need to customize the compilation behavior of MDX, you can use the following configs.
Options passed to @mdx-js/loader, please refer to @mdx-js/loader documentation for detailed usage.
- Type:
MdxLoaderOptions - Default:
{} - Example:
pluginMdx({
mdxLoaderOptions: {
// Use Vue JSX
jsxImportSource: "vue",
},
});Specify the file extensions to be compiled with MDX loader, including .md files and .mdx files by default.
- Type:
string[] - Default:
['.mdx', '.md']
For example, to only compile .mdx files, you can set it as:
pluginMdx({
extensions: [".mdx"],
});In a TypeScript project, you need to add type definitions for *.mdx files so that TypeScript can recognize them correctly.
Create env.d.ts in the src directory and add the following content:
declare module "*.md" {
let MDXComponent: () => JSX.Element;
export default MDXComponent;
}
declare module "*.mdx" {
let MDXComponent: () => JSX.Element;
export default MDXComponent;
}MIT.