mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-12 16:47:26 +02:00
docs(v2): add setup of mdx plugins (#2466)
* Add mdx plugins * Apply suggestions from code review Co-Authored-By: Alexey Pyltsyn <lex61rus@gmail.com> * Update website/docs/markdown-features.mdx Co-Authored-By: Alexey Pyltsyn <lex61rus@gmail.com> * Update markdown-features.mdx Co-authored-by: Yangshun Tay <tay.yang.shun@gmail.com> Co-authored-by: Alexey Pyltsyn <lex61rus@gmail.com>
This commit is contained in:
parent
5e0d11dbaf
commit
079e1ce2df
1 changed files with 69 additions and 0 deletions
|
@ -330,6 +330,75 @@ function HelloCodeTitle(props) {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Configuring plugins
|
||||||
|
|
||||||
|
You can expand the MDX functionalities, using plugins. An MDX plugin is usually a npm package, so you install them like other npm packages using npm. Docusaurus supports both [remark](https://github.com/remarkjs/remark) and [rehype](https://github.com/rehypejs/rehype) plugins that work with MDX.
|
||||||
|
|
||||||
|
First, install your [remark](https://github.com/remarkjs/remark/blob/master/doc/plugins.md#list-of-plugins) and [rehype](https://github.com/rehypejs/rehype/blob/master/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 {11,12}
|
||||||
|
// 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:
|
||||||
|
|
||||||
|
```jsx {11-14}
|
||||||
|
// 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).
|
||||||
|
|
||||||
### Interactive code editor
|
### Interactive code editor
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue