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-imagesnpm install --save rehype-truncate

Yarn

yarn add remark-imagesyarn 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.