MDX Presets

Fumadocs MDX provides MDX presets to simplify configurations of features like syntax highlighting.

Default Preset

This preset is enabled by default. To override the defaults, it accepts an interface inherited from ProcessorOptions:

Remark Plugins

These plugins are applied by default:

• Remark Image - Handle images
• Remark Heading - Extract table of contents
• - Generate search indexes
• Remark Exports - Exports the output generated by remark plugins above

Add other remark plugins with:

import { defineConfig } from 'fumadocs-mdx/config';
import { myPlugin } from './remark-plugin';

export default defineConfig({
  mdxOptions: {
    remarkPlugins: [myPlugin],
    // You can also pass a function to control the order of remark plugins.
    remarkPlugins: (v) => [myPlugin, ...v],
  },
});

Rehype Plugins

These plugins are applied by default:

• Rehype Code - Syntax highlighting

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

import { defineConfig } from 'fumadocs-mdx/config';
import { myPlugin } from './rehype-plugin';

export default defineConfig({
  mdxOptions: {
    rehypePlugins: (v) => [myPlugin, ...v],
  },
});

Customise Built-in Plugins

Customise the options of built-in plugins like:

import { defineConfig } from 'fumadocs-mdx/config';

export default defineConfig({
  mdxOptions: {
    rehypeCodeOptions: {
      // options
    },
    remarkImageOptions: {
      // options
    },
    remarkHeadingOptions: {
      // options
    },
  },
});

Export Properties from vfile.data

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

You can define additional properties to be exported.

import { defineConfig } from 'fumadocs-mdx/config';

export default defineConfig({
  mdxOptions: {
    valueToExport: ['dataName'],
  },
});