Skip to main content
Version: 2.0.0-beta.9 🚧

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 install --save remark-images
npm install --save 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.