diff --git a/packages/docusaurus-mdx-loader/README.md b/packages/docusaurus-mdx-loader/README.md index 8fc5bbb40b..65463d2a04 100644 --- a/packages/docusaurus-mdx-loader/README.md +++ b/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) \ No newline at end of file +- 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 diff --git a/packages/docusaurus-mdx-loader/src/index.js b/packages/docusaurus-mdx-loader/src/index.js index 663b765825..8d0d04ff0b 100644 --- a/packages/docusaurus-mdx-loader/src/index.js +++ b/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 { diff --git a/packages/docusaurus-plugin-content-blog/src/index.js b/packages/docusaurus-plugin-content-blog/src/index.js index 8788118de7..b419a6232c 100644 --- a/packages/docusaurus-plugin-content-blog/src/index.js +++ b/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'), }, diff --git a/packages/docusaurus-plugin-content-docs/src/index.js b/packages/docusaurus-plugin-content-docs/src/index.js index c582a5a4bd..badee80d4c 100644 --- a/packages/docusaurus-plugin-content-docs/src/index.js +++ b/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: { diff --git a/website/docs/creating-pages.md b/website/docs/creating-pages.md index 940d15af53..0d239760a4 100644 --- a/website/docs/creating-pages.md +++ b/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'; diff --git a/website/docs/deployment.md b/website/docs/deployment.md index ce0471ed79..b0b29a9686 100644 --- a/website/docs/deployment.md +++ b/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 diff --git a/website/docs/plugins-api.md b/website/docs/plugins-api.md index 010fe16b7d..dba6ac29eb 100644 --- a/website/docs/plugins-api.md +++ b/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. };