diff --git a/packages/docusaurus/lib/core/App.js b/packages/docusaurus/lib/core/App.js index e7a29e6214..8a63c807f7 100644 --- a/packages/docusaurus/lib/core/App.js +++ b/packages/docusaurus/lib/core/App.js @@ -13,9 +13,6 @@ import metadata from '@generated/metadata'; // eslint-disable-line import siteConfig from '@generated/docusaurus.config'; //eslint-disable-line import DocusaurusContext from '@docusaurus/context'; // eslint-disable-line -// TODO: Allow choosing prismjs theme. -import 'prismjs/themes/prism.css'; - function App() { const [context, setContext] = useState({}); return ( diff --git a/packages/docusaurus/lib/load/config.js b/packages/docusaurus/lib/load/config.js index 563c331c37..1f75fe0946 100644 --- a/packages/docusaurus/lib/load/config.js +++ b/packages/docusaurus/lib/load/config.js @@ -98,8 +98,6 @@ function loadConfig(siteDir, deleteCache = true) { // e.g: if they want to include some.field so they can access it later from `props.siteConfig`. const {customFields = []} = config; - // TODO: Check that plugins mentioned exist. - // Don't allow unrecognized fields. const allowedFields = [ ...REQUIRED_FIELDS, diff --git a/packages/docusaurus/lib/webpack/base.js b/packages/docusaurus/lib/webpack/base.js index 71c4e70e6d..0d70526d3f 100644 --- a/packages/docusaurus/lib/webpack/base.js +++ b/packages/docusaurus/lib/webpack/base.js @@ -109,31 +109,10 @@ module.exports = function createBaseConfig(props, isServer) { .end(); applyBabel(jsRule); - /* - Equivalent to: - // ... - { - test: /(\.mdx?)$/, - use: [ - 'babel-loader', - { - loader: '@mdx-js/loader', - options: { hastPlugins: [[rehypePrism, { ignoreMissing: true }]] } - }, - 'docusaurus/md-loader, - ] - } - */ const mdRule = config.module.rule('markdown').test(/(\.mdx?)$/); applyBabel(mdRule); mdRule - .use('mdx-js-loader') - .loader('@mdx-js/loader') - .options({ - hastPlugins: [[rehypePrism, {ignoreMissing: true}]], - }); - mdRule - .use('docusaurus/md-loader') + .use('@docusaurus/mdx-loader') .loader(mdLoader) .options({ siteConfig, @@ -141,6 +120,7 @@ module.exports = function createBaseConfig(props, isServer) { translatedDir, docsDir, sourceToMetadata, + hastPlugins: [[rehypePrism, {ignoreMissing: true}]], }); applyStyle(config.module.rule('css'), { diff --git a/packages/docusaurus/lib/webpack/loaders/markdown/index.js b/packages/docusaurus/lib/webpack/loaders/markdown/index.js index 09f81b5d70..09857002a5 100644 --- a/packages/docusaurus/lib/webpack/loaders/markdown/index.js +++ b/packages/docusaurus/lib/webpack/loaders/markdown/index.js @@ -6,12 +6,16 @@ */ const fm = require('front-matter'); +const mdx = require('@mdx-js/mdx'); const {getOptions} = require('loader-utils'); const path = require('path'); const {resolve} = require('url'); -module.exports = function(fileString) { - const options = getOptions(this); +module.exports = async function(fileString) { + const callback = this.async(); + const options = Object.assign({}, getOptions(this), { + filepath: this.resourcePath, + }); const {versionedDir, docsDir, translatedDir, sourceToMetadata} = options; // Extract content of markdown (without frontmatter). @@ -69,5 +73,26 @@ module.exports = function(fileString) { }); content = lines.join('\n'); } - return content; + + let result; + + try { + result = await mdx(content, options); + } catch (err) { + return callback(err); + } + + // TODO: Allow choosing prismjs theme + // prismjs/themes/XXXXXX.css https://github.com/PrismJS/prism/tree/master/themes + // prism-themes/themes/XXXXXX.css https://github.com/PrismJS/prism-themes/tree/master/themes + const prismThemeImport = 'prism-themes/themes/prism-atom-dark.css'; + + const code = ` + import React from 'react'; + import { MDXTag } from '@mdx-js/tag'; + import '${prismThemeImport}'; + ${result} + `; + + return callback(null, code); }; diff --git a/packages/docusaurus/package.json b/packages/docusaurus/package.json index 594b1fbb39..38a5b06a54 100644 --- a/packages/docusaurus/package.json +++ b/packages/docusaurus/package.json @@ -33,8 +33,8 @@ "@babel/preset-react": "^7.0.0", "@docusaurus/utils": "^1.0.0", "@mapbox/rehype-prism": "^0.3.1", - "@mdx-js/loader": "^0.20.1", - "@mdx-js/mdx": "^0.20.1", + "@mdx-js/mdx": "^0.20.3", + "@mdx-js/tag": "^0.20.3", "babel-jest": "^24.1.0", "babel-loader": "^8.0.0", "babel-plugin-dynamic-import-node": "^2.2.0", @@ -54,6 +54,7 @@ "lodash": "^4.17.11", "mini-css-extract-plugin": "^0.4.1", "portfinder": "^1.0.13", + "prism-themes": "^1.0.1", "prismjs": "^1.15.0", "react-dev-utils": "^8.0.0", "react-helmet": "^5.2.0", diff --git a/yarn.lock b/yarn.lock index 0591072038..426d005e0d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1565,16 +1565,7 @@ refractor "^2.3.0" unist-util-visit "^1.1.3" -"@mdx-js/loader@^0.20.1": - version "0.20.3" - resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-0.20.3.tgz#73c056ec3eef9f993cac28e9102898c8862f9def" - integrity sha512-rjJZ5bBTmRfrV6Wo4dAV7wBv5ChmpLJ+s/lziZ58F1NfijSSYq795qXrW+NMJAhBVr07lYp6FQrUJ3PsX2fHyw== - dependencies: - "@mdx-js/mdx" "^0.20.3" - "@mdx-js/tag" "^0.20.3" - loader-utils "^1.1.0" - -"@mdx-js/mdx@^0.20.1", "@mdx-js/mdx@^0.20.3": +"@mdx-js/mdx@^0.20.3": version "0.20.3" resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-0.20.3.tgz#1f32b4a4a0cc176a3192ef51a0a3502cdfdca3f0" integrity sha512-IIlssEIPPAqo04krm270ifGjSVPqtTmjlryYGi8/4VXHCdi42l8v2piTJPo2NVc7J+HizY1uxxZb6AeoFsO/Iw== @@ -10314,6 +10305,11 @@ pretty-time@^1.1.0: resolved "https://registry.yarnpkg.com/pretty-time/-/pretty-time-1.1.0.tgz#ffb7429afabb8535c346a34e41873adf3d74dd0e" integrity sha512-28iF6xPQrP8Oa6uxE6a1biz+lWeTOAPKggvjB8HAs6nVMKZwf5bG++632Dx614hIWgUPkgivRfG+a8uAXGTIbA== +prism-themes@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/prism-themes/-/prism-themes-1.0.1.tgz#8e68972176f5e4fbc0859cd8e9474a0bbfaf2e41" + integrity sha512-tRYOqg2tT5/eB++iX+rqRnqESkCKuoV+0PrUiGKdWMr5lApd/hwfu+72Hi0OS50wmcuIty3GB1HrRqoBD+Cpfg== + prismjs@^1.15.0, prismjs@~1.15.0: version "1.15.0" resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.15.0.tgz#8801d332e472091ba8def94976c8877ad60398d9"