---
title: MDX Options
description: Configure MDX processor for Fumadocs MDX
---

## Customising MDX Processor

Fumadocs MDX uses [MDX Compiler](https://mdxjs.com/packages/mdx) to compile MDX files into JavaScript files.

You can customise it with [Global Config](/docs/mdx/global#mdx-options) or [Collection Config](/docs/mdx/collections#mdxoptions), there's an example using global config:

```ts title="source.config.ts"
import { defineConfig } from 'fumadocs-mdx/config';

export default defineConfig({
  mdxOptions: {
    remarkPlugins: [myPlugin],
  },
});
```

## Extended MDX Options [#extended]

Fumadocs MDX will apply some default MDX options, to make features like **syntax highlighting** work out of the box.

To allow overriding the defaults, Fumadocs MDX's `mdxOptions` option accepts **Extended MDX Options** on top of [`ProcessorOptions`](https://mdxjs.com/packages/mdx/#processoroptions).
You can see the additional options below:

### Remark Plugins

These plugins are applied by default:

- [Remark Image](/docs/headless/mdx/remark-image) - Handle images
- [Remark Heading](/docs/headless/mdx/headings) - Extract table of contents
- [Remark Structure](/docs/headless/mdx/structure) - Generate search indexes
- Remark Exports - Exports the output generated by remark plugins above

You can add other remark plugins with:

```ts
import { getDefaultMDXOptions } from 'fumadocs-mdx/config';
import { myPlugin } from './remark-plugin';

getDefaultMDXOptions({
  remarkPlugins: [myPlugin],
});
```

You can also pass a function to control the order of remark plugins.

```ts
import { getDefaultMDXOptions } from 'fumadocs-mdx/config';
import { myPlugin } from './remark-plugin';

getDefaultMDXOptions({
  remarkPlugins: (v) => [myPlugin, ...v],
});
```

### Rehype Plugins

These plugins are applied by default:

- [Rehype Code](/docs/headless/mdx/rehype-code) - Syntax highlighting

Same as remark plugins, you can pass an array or a function to add other rehype plugins.

```ts
import { getDefaultMDXOptions } from 'fumadocs-mdx/config';
import { myPlugin } from './rehype-plugin';

getDefaultMDXOptions({
  rehypePlugins: (v) => [myPlugin, ...v],
});
```

### Customise Built-in Plugins

Customise the options of built-in plugins.

```ts
import { getDefaultMDXOptions } from 'fumadocs-mdx/config';

getDefaultMDXOptions({
  rehypeCodeOptions: {
    // options
  },
});
```

### Export Properties from `vfile.data`

Some remark plugins store their output in `vfile.data` (an compile-time memory) which cannot be accessed from your code.
Fumadocs MDX applies a remark plugin that turns `vfile.data` properties into exports, so that you can access these properties when importing the MDX file.

You can define additional properties to be exported.

```js
import { getDefaultMDXOptions } from 'fumadocs-mdx/config';

getDefaultMDXOptions({
  valueToExport: ['dataName'],
});
```

By default, it includes:

- `toc` for the Remark Heading plugin
- `structuredData` for the Remark Structure Plugin
- `frontmatter` for the frontmatter of MDX (using `gray-matter`)

### Apply Defaults

Fumadocs MDX exposes a `getDefaultMDXOptions` function that applies default MDX configurations to the input object.

```ts
import { getDefaultMDXOptions } from 'fumadocs-mdx/config';

const options = getDefaultMDXOptions({
  // default applied
});
```

Note that you do not need it for the `mdxOptions` field in global config.
