Plugins

You can expand the MDX functionalities, using plugins.

Docusaurus content plugins support both Remark and Rehype plugins that work with MDX.

Configuring plugins

An MDX plugin is usually a npm package, so you install them like other npm packages using npm.

First, install your Remark and Rehype plugins.

For example:

npm

npm install --save remark-images
npm install --save rehype-truncate

Yarn

yarn add remark-images
yarn add rehype-truncate

Next, import the plugins:

const remarkImages = require('remark-images');
const rehypeTruncate = require('rehype-truncate');

Finally, add them to the @docusaurus/preset-classic options in docusaurus.config.js:

docusaurus.config.js

module.exports = {
  // ...
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
          // ...
          remarkPlugins: [remarkImages],
          rehypePlugins: [rehypeTruncate],
        },
      },
    ],
  ],
};

Configuring plugin options

Some plugins can be configured and accept their own options. In that case, use the [plugin, pluginOptions] syntax, like so:

docusaurus.config.js

module.exports = {
  // ...
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
          // ...
          remarkPlugins: [
            plugin1,
            [plugin2, {option1: {...}}],
          ],
        },
      },
    ],
  ],
};

See more information in the MDX documentation.