docs(v2): Reorganize/split the guides doc sections (#3975)

* docs reorg

* refactor docs/markdown features section

* fix broken links after docs refactor
This commit is contained in:
Sébastien Lorber 2020-12-30 17:03:25 +01:00 committed by GitHub
parent a0c5177182
commit d99d53a236
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 1347 additions and 1192 deletions

View file

@ -0,0 +1,78 @@
---
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
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
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).