mirror of
https://github.com/facebook/docusaurus.git
synced 2025-04-29 18:27:56 +02:00
78 lines
2 KiB
Text
78 lines
2 KiB
Text
---
|
|
id: plugins
|
|
title: Plugins
|
|
description: Using MDX plugins to expand Docusaurus Markdown functionalities
|
|
slug: /markdown-features/plugins
|
|
---
|
|
|
|
You can expand the MDX functionalities, using plugins.
|
|
|
|
Docusaurus content plugins support both [Remark](https://github.com/remarkjs/remark) and [Rehype](https://github.com/rehypejs/rehype) plugins that work with MDX.
|
|
|
|
## Configuring plugins {#configuring-plugins}
|
|
|
|
An MDX plugin is usually a npm package, so you install them like other npm packages using npm.
|
|
|
|
First, install your [Remark](https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins) and [Rehype](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins) plugins.
|
|
|
|
For example:
|
|
|
|
```bash npm2yarn
|
|
npm install --save remark-images
|
|
npm install --save rehype-truncate
|
|
```
|
|
|
|
Next, import the plugins:
|
|
|
|
```js
|
|
const remarkImages = require('remark-images');
|
|
const rehypeTruncate = require('rehype-truncate');
|
|
```
|
|
|
|
Finally, add them to the `@docusaurus/preset-classic` options in `docusaurus.config.js`:
|
|
|
|
```js {10,11} title="docusaurus.config.js"
|
|
module.exports = {
|
|
// ...
|
|
presets: [
|
|
[
|
|
'@docusaurus/preset-classic',
|
|
{
|
|
docs: {
|
|
sidebarPath: require.resolve('./sidebars.js'),
|
|
// ...
|
|
remarkPlugins: [remarkImages],
|
|
rehypePlugins: [rehypeTruncate],
|
|
},
|
|
},
|
|
],
|
|
],
|
|
};
|
|
```
|
|
|
|
## Configuring plugin options {#configuring-plugin-options}
|
|
|
|
Some plugins can be configured and accept their own options. In that case, use the `[plugin, pluginOptions]` syntax, like so:
|
|
|
|
```jsx {10-13} title="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](https://mdxjs.com/advanced/plugins).
|