feat(v2): allow passing remark, rehype, prismtheme to mdx-loader (#1543)

* feat(v2): allow passing remark, rehype, prismtheme to mdx-loader

* nits

packages/docusaurus-mdx-loader/README.md

@@ -45,4 +45,10 @@ module: {
 
 This is the PrismJS theme CSS that will be imported. The supported themes are :
 - prismjs/themes/XXXXXX.css (See https://github.com/PrismJS/prism/tree/master/themes)
-- prism-themes/themes/XXXXXX.css (See https://github.com/PrismJS/prism-themes/tree/master/themes)
+- prism-themes/themes/XXXXXX.css (See https://github.com/PrismJS/prism-themes/tree/master/themes)
+
+### `rehypePlugins`
+Array of rehype plugins to manipulate the MDXHAST
+
+### `remarkPlugins`
+Array of remark plugins to manipulate the MDXAST

packages/docusaurus-mdx-loader/src/index.js

@@ -25,9 +25,20 @@ module.exports = async function(fileString) {
   const callback = this.async();
 
   const {data, content} = matter(fileString);
-  const options = Object.assign(DEFAULT_OPTIONS, getOptions(this), {
+  const reqOptions = getOptions(this) || {};
+  const options = {
+    ...reqOptions,
+    remarkPlugins: [
+      ...DEFAULT_OPTIONS.remarkPlugins,
+      ...(reqOptions.remarkPlugins || []),
+    ],
+    rehypePlugins: [
+      ...DEFAULT_OPTIONS.rehypePlugins,
+      ...(reqOptions.rehypePlugins || []),
+    ],
+    prismTheme: reqOptions.prismTheme || DEFAULT_OPTIONS.prismTheme,
     filepath: this.resourcePath,
-  });
+  };
   let result;
 
   try {

packages/docusaurus-plugin-content-blog/src/index.js

@@ -29,6 +29,9 @@ const DEFAULT_OPTIONS = {
   blogPostComponent: '@theme/BlogPostPage',
   blogTagsListComponent: '@theme/BlogTagsListPage',
   blogTagsPostsComponent: '@theme/BlogTagsPostsPage',
+  remarkPlugins: [],
+  rehypePlugins: [],
+  prismTheme: '',
 };
 
 module.exports = function(context, opts) {
@@ -341,6 +344,7 @@ module.exports = function(context, opts) {
     },
 
     configureWebpack(config, isServer, {getBabelLoader, getCacheLoader}) {
+      const {rehypePlugins, remarkPlugins, prismTheme} = options;
       return {
         module: {
           rules: [
@@ -350,7 +354,14 @@ module.exports = function(context, opts) {
               use: [
                 getCacheLoader(isServer),
                 getBabelLoader(isServer),
-                '@docusaurus/mdx-loader',
+                {
+                  loader: '@docusaurus/mdx-loader',
+                  options: {
+                    remarkPlugins,
+                    rehypePlugins,
+                    prismTheme,
+                  },
+                },
                 {
                   loader: path.resolve(__dirname, './markdownLoader.js'),
                 },

packages/docusaurus-plugin-content-docs/src/index.js

@@ -23,6 +23,9 @@ const DEFAULT_OPTIONS = {
   // TODO: Settle themeing.
   docLayoutComponent: '@theme/DocPage',
   docItemComponent: '@theme/DocItem',
+  remarkPlugins: [],
+  rehypePlugins: [],
+  prismTheme: '',
 };
 
 module.exports = function(context, opts) {
@@ -158,6 +161,7 @@ module.exports = function(context, opts) {
     },
 
     configureWebpack(config, isServer, {getBabelLoader, getCacheLoader}) {
+      const {rehypePlugins, remarkPlugins, prismTheme} = options;
       return {
         module: {
           rules: [
@@ -167,7 +171,14 @@ module.exports = function(context, opts) {
               use: [
                 getCacheLoader(isServer),
                 getBabelLoader(isServer),
-                '@docusaurus/mdx-loader',
+                {
+                  loader: '@docusaurus/mdx-loader',
+                  options: {
+                    remarkPlugins,
+                    rehypePlugins,
+                    prismTheme,
+                  },
+                },
                 {
                   loader: path.resolve(__dirname, './markdown/index.js'),
                   options: {

website/docs/creating-pages.md

@@ -11,7 +11,7 @@ In this section, we will learn about creating ad-hoc pages in Docusaurus using R
 
 In the `pages` directory, create a file called `hello.js` with the following contents:
 
-```js
+```jsx
 import React from 'react';
 import Layout from '@theme/Layout';
 

website/docs/deployment.md

@@ -32,7 +32,7 @@ You may refer to GitHub Pages' documentation [User, Organization, and Project Pa
 
 Example:
 
-```js
+```jsx
 module.exports = {
   ...
   url: 'https://endiliey.github.io', // Your website URL

website/docs/plugins-api.md

@@ -15,7 +15,7 @@ yarn add docusaurus-plugin-name
 
 Then you add it in your site's `docusaurus.config.js` plugin arrays:
 
-```js
+```jsx
 module.exports = {
   plugins: [
     {
@@ -35,7 +35,7 @@ module.exports = {
 
 Docusaurus can also load plugins from your local directory, you can do something like the following:
 
-```js
+```jsx
 const path = require('path');
 
 module.exports = {
@@ -53,7 +53,7 @@ Plugins are modules which export a function that takes in the context, options a
 
 For examples, please refer to several official plugins created.
 
-```js
+```jsx
 const DEFAULT_OPTIONS = {
   // Some defaults.
 };