https://github.com/rspack-contrib/rsbuild-plugin-mdx

An Rsbuild plugin to provide support for MDX.
https://github.com/rspack-contrib/rsbuild-plugin-mdx

rsbuild rsbuild-plugin rspack

Last synced: about 12 hours ago
JSON representation

An Rsbuild plugin to provide support for MDX.

• Host: GitHub
• URL: https://github.com/rspack-contrib/rsbuild-plugin-mdx
• Owner: rspack-contrib
• License: mit
• Created: 2024-07-01T08:34:52.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-11-08T14:14:39.000Z (4 days ago)
• Last Synced: 2024-11-08T15:23:54.576Z (4 days ago)
• Topics: rsbuild, rsbuild-plugin, rspack
• Language: TypeScript
• Homepage:
• Size: 110 KB
• Stars: 6
• Watchers: 4
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-rspack - @rsbuild/plugin-mdx

README

        
# @rsbuild/plugin-mdx

An Rsbuild plugin to provide support for [MDX](https://github.com/mdx-js/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.



  

   

  

  



## Usage

Install:

```bash

npm add @rsbuild/plugin-mdx -D

```

Add plugin to your `rsbuild.config.ts`:

```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.

## Options

If you need to customize the compilation behavior of MDX, you can use the following configs.

### mdxLoaderOptions

Options passed to `@mdx-js/loader`, please refer to [@mdx-js/loader documentation](https://www.npmjs.com/package/@mdx-js/loader) for detailed usage.

- **Type:** `MdxLoaderOptions`

- **Default:** `{}`

- **Example:**

```ts

pluginMdx({

  mdxLoaderOptions: {

    // Use Vue JSX

    jsxImportSource: "vue",

  },

});

```

### extensions

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:

```ts

pluginMdx({

  extensions: [".mdx"],

});

```

## Type Declarations

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:

```ts title="src/env.d.ts"

declare module "*.md" {

  let MDXComponent: () => JSX.Element;

  export default MDXComponent;

}

declare module "*.mdx" {

  let MDXComponent: () => JSX.Element;

  export default MDXComponent;

}

```

## License

[MIT](./LICENSE).