From 079e1ce2dfa3fa32856e536129033c5859972e1c Mon Sep 17 00:00:00 2001
From: Fanny <fannyvieira082@gmail.com>
Date: Thu, 26 Mar 2020 15:15:26 -0300
Subject: [PATCH] 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>
---
 website/docs/markdown-features.mdx | 69 ++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)

diff --git a/website/docs/markdown-features.mdx b/website/docs/markdown-features.mdx
index cc52773b79..8636ab37ec 100644
--- a/website/docs/markdown-features.mdx
+++ b/website/docs/markdown-features.mdx
@@ -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