diff --git a/packages/docusaurus-mdx-loader/README.md b/packages/docusaurus-mdx-loader/README.md new file mode 100644 index 0000000000..c7b87817c1 --- /dev/null +++ b/packages/docusaurus-mdx-loader/README.md @@ -0,0 +1,48 @@ +# `@docusaurus/mdx-loader` + +Docusaurus webpack loader of [MDX](https://github.com/mdx-js/mdx) + +The extra idea here is to simplify things by adding prismjs syntax highlighting by default through https://github.com/mapbox/rehype-prism and add the prism css theme import directly. + + +## Installation + +```sh +yarn add @docusaurus/mdx-loader +``` + +## Usage +```js + +// ... +module: { + rules: [ + // ... + { + test: /\.css$/, + // Make sure your webpack loader can import css files too + }, + { + test: /\.mdx?$/, + use: [ + 'babel-loader', + { + loader: '@docuaurus/mdx-loader', + options: { + // .. See options + } + } + ] + } + ] +} +``` + +## Options + +### `prismTheme` + - Default: `prism-themes/themes/prism-atom-dark.css`; + +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 diff --git a/packages/docusaurus-mdx-loader/package.json b/packages/docusaurus-mdx-loader/package.json new file mode 100644 index 0000000000..9e99c4cfba --- /dev/null +++ b/packages/docusaurus-mdx-loader/package.json @@ -0,0 +1,15 @@ +{ + "name": "@docusaurus/mdx-loader", + "version": "1.0.0", + "description": "Docusaurus Loader for MDX", + "main": "src/index.js", + "license": "MIT", + "dependencies": { + "@mapbox/rehype-prism": "^0.3.1", + "@mdx-js/mdx": "^1.0.0-rc.0", + "@mdx-js/react": "^1.0.0-rc.0", + "loader-utils": "^1.2.3", + "prism-themes": "^1.1.0", + "prismjs": "^1.16.0" + } +} diff --git a/packages/docusaurus-mdx-loader/src/index.js b/packages/docusaurus-mdx-loader/src/index.js new file mode 100644 index 0000000000..b6c819523a --- /dev/null +++ b/packages/docusaurus-mdx-loader/src/index.js @@ -0,0 +1,38 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +const {getOptions} = require('loader-utils'); +const mdx = require('@mdx-js/mdx'); +const rehypePrism = require('@mapbox/rehype-prism'); + +const DEFAULT_OPTIONS = { + rehypePlugins: [[rehypePrism, {ignoreMissing: true}]], + prismTheme: 'prism-themes/themes/prism-atom-dark.css', +}; + +module.exports = async function(content) { + const callback = this.async(); + + const options = Object.assign(DEFAULT_OPTIONS, getOptions(this), { + filepath: this.resourcePath, + }); + let result; + + try { + result = await mdx(content, options); + } catch (err) { + return callback(err); + } + + const code = ` + import React from 'react'; + import { mdx } from '@mdx-js/react'; + import '${options.prismTheme}'; + ${result} + `; + + return callback(null, code); +}; diff --git a/packages/docusaurus-plugin-content-docs/package.json b/packages/docusaurus-plugin-content-docs/package.json index acbe2a1aba..09b2fe3fd2 100644 --- a/packages/docusaurus-plugin-content-docs/package.json +++ b/packages/docusaurus-plugin-content-docs/package.json @@ -7,8 +7,7 @@ "dependencies": { "@babel/polyfill": "^7.4.0", "@docusaurus/utils": "^1.0.0", - "@mapbox/rehype-prism": "^0.3.1", - "@mdx-js/mdx": "^0.20.3", + "@docusaurus/mdx-loader": "^1.0.0", "front-matter": "^3.0.1", "fs-extra": "^7.0.1", "globby": "^9.1.0", @@ -16,7 +15,6 @@ "loader-utils": "^1.2.3" }, "peerDependencies": { - "@docusaurus/core": "^2.0.0", - "@mdx-js/tag": "^0.20.3" + "@docusaurus/core": "^2.0.0" } } diff --git a/packages/docusaurus-plugin-content-docs/src/index.js b/packages/docusaurus-plugin-content-docs/src/index.js index 7a786cba8a..0e58aa899f 100644 --- a/packages/docusaurus-plugin-content-docs/src/index.js +++ b/packages/docusaurus-plugin-content-docs/src/index.js @@ -9,7 +9,6 @@ const globby = require('globby'); const importFresh = require('import-fresh'); const path = require('path'); const {getSubFolder, idx, normalizeUrl} = require('@docusaurus/utils'); -const rehypePrism = require('@mapbox/rehype-prism'); const createOrder = require('./order'); const loadSidebars = require('./sidebars'); @@ -246,6 +245,9 @@ class DocusaurusPluginContentDocs { ], }, }, + { + loader: '@docusaurus/mdx-loader', + }, { loader: path.resolve(__dirname, './markdown/index.js'), options: { @@ -254,7 +256,6 @@ class DocusaurusPluginContentDocs { translatedDir, docsDir: this.content.docsDir, sourceToMetadata: this.content.sourceToMetadata, - hastPlugins: [[rehypePrism, {ignoreMissing: true}]], }, }, ], diff --git a/packages/docusaurus-plugin-content-docs/src/markdown/index.js b/packages/docusaurus-plugin-content-docs/src/markdown/index.js index 09857002a5..f22e12d7e6 100644 --- a/packages/docusaurus-plugin-content-docs/src/markdown/index.js +++ b/packages/docusaurus-plugin-content-docs/src/markdown/index.js @@ -6,7 +6,6 @@ */ const fm = require('front-matter'); -const mdx = require('@mdx-js/mdx'); const {getOptions} = require('loader-utils'); const path = require('path'); const {resolve} = require('url'); @@ -74,25 +73,5 @@ module.exports = async function(fileString) { content = lines.join('\n'); } - 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); + return callback(null, content); }; diff --git a/packages/docusaurus/package.json b/packages/docusaurus/package.json index 3a689fb1ed..aa49e63970 100644 --- a/packages/docusaurus/package.json +++ b/packages/docusaurus/package.json @@ -33,7 +33,6 @@ "@babel/preset-react": "^7.0.0", "@docusaurus/utils": "^1.0.0", "@hot-loader/react-dom": "^16.8.4", - "@mdx-js/tag": "^0.20.3", "babel-jest": "^24.1.0", "babel-loader": "^8.0.0", "babel-plugin-dynamic-import-node": "^2.2.0", @@ -56,8 +55,6 @@ "lodash": "^4.17.11", "mini-css-extract-plugin": "^0.4.1", "portfinder": "^1.0.13", - "prism-themes": "^1.1.0", - "prismjs": "^1.16.0", "react-dev-utils": "^8.0.0", "react-helmet": "^5.2.0", "react-hot-loader": "^4.8.2", diff --git a/yarn.lock b/yarn.lock index 3aa3b6e942..bc66ceb439 100644 --- a/yarn.lock +++ b/yarn.lock @@ -36,6 +36,26 @@ semver "^5.4.1" source-map "^0.5.0" +"@babel/core@^7.2.2": + version "7.4.3" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.4.3.tgz#198d6d3af4567be3989550d97e068de94503074f" + integrity sha512-oDpASqKFlbspQfzAE7yaeTmdljSH2ADIvBlb0RwbStltTuWa0+7CCI1fYVINNv9saHPa1W7oaKeuNuKj+RQCvA== + dependencies: + "@babel/code-frame" "^7.0.0" + "@babel/generator" "^7.4.0" + "@babel/helpers" "^7.4.3" + "@babel/parser" "^7.4.3" + "@babel/template" "^7.4.0" + "@babel/traverse" "^7.4.3" + "@babel/types" "^7.4.0" + convert-source-map "^1.1.0" + debug "^4.1.0" + json5 "^2.1.0" + lodash "^4.17.11" + resolve "^1.3.2" + semver "^5.4.1" + source-map "^0.5.0" + "@babel/generator@7.0.0-beta.44": version "7.0.0-beta.44" resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-beta.44.tgz#c7e67b9b5284afcf69b309b50d7d37f3e5033d42" @@ -265,6 +285,15 @@ "@babel/traverse" "^7.4.0" "@babel/types" "^7.4.0" +"@babel/helpers@^7.4.3": + version "7.4.3" + resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.4.3.tgz#7b1d354363494b31cb9a2417ae86af32b7853a3b" + integrity sha512-BMh7X0oZqb36CfyhvtbSmcWc3GXocfxv3yNsAEuM0l+fAqSO22rQrUpijr3oE/10jCTrB6/0b9kzmG4VetCj8Q== + dependencies: + "@babel/template" "^7.4.0" + "@babel/traverse" "^7.4.3" + "@babel/types" "^7.4.0" + "@babel/highlight@7.0.0-beta.44": version "7.0.0-beta.44" resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.44.tgz#18c94ce543916a80553edcdcf681890b200747d5" @@ -288,6 +317,11 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.4.2.tgz#b4521a400cb5a871eab3890787b4bc1326d38d91" integrity sha512-9fJTDipQFvlfSVdD/JBtkiY0br9BtfvW2R8wo6CX/Ej2eMuV0gWPk1M67Mt3eggQvBqYW1FCEk8BN7WvGm/g5g== +"@babel/parser@^7.4.3": + version "7.4.3" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.4.3.tgz#eb3ac80f64aa101c907d4ce5406360fe75b7895b" + integrity sha512-gxpEUhTS1sGA63EGQGuA+WESPR/6tz6ng7tSHFCmaTJK/cGK8y37cBTspX+U2xCAue2IQVvF6Z0oigmjwD8YGQ== + "@babel/plugin-proposal-async-generator-functions@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.2.0.tgz#b289b306669dce4ad20b0252889a15768c9d417e" @@ -773,6 +807,21 @@ globals "^11.1.0" lodash "^4.17.11" +"@babel/traverse@^7.4.3": + version "7.4.3" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.4.3.tgz#1a01f078fc575d589ff30c0f71bf3c3d9ccbad84" + integrity sha512-HmA01qrtaCwwJWpSKpA948cBvU5BrmviAief/b3AVw936DtcdsTexlbyzNuDnthwhOQ37xshn7hvQaEQk7ISYQ== + dependencies: + "@babel/code-frame" "^7.0.0" + "@babel/generator" "^7.4.0" + "@babel/helper-function-name" "^7.1.0" + "@babel/helper-split-export-declaration" "^7.4.0" + "@babel/parser" "^7.4.3" + "@babel/types" "^7.4.0" + debug "^4.1.0" + globals "^11.1.0" + lodash "^4.17.11" + "@babel/types@7.0.0-beta.44": version "7.0.0-beta.44" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.44.tgz#6b1b164591f77dec0a0342aca995f2d046b3a757" @@ -1575,10 +1624,10 @@ refractor "^2.3.0" unist-util-visit "^1.1.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== +"@mdx-js/mdx@^1.0.0-rc.0": + version "1.0.0-rc.0" + resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.0.0-rc.0.tgz#c31c8dae9c08e6494018e0fde4a0d87a7364f7a8" + integrity sha512-PpDmC9i1LJKAK/BNce75D8QZS05ccfVMJZKGalogvGw0b8R+vQcMBtlklbVOqk10oVBe1TYYbRdniOkt1ziHMw== dependencies: "@babel/plugin-proposal-object-rest-spread" "^7.3.2" "@babel/plugin-syntax-jsx" "^7.2.0" @@ -1586,6 +1635,7 @@ detab "^2.0.0" hast-util-raw "^5.0.0" mdast-util-to-hast "^4.0.0" + remark-mdx "^1.0.0-rc.0" remark-parse "^6.0.0" remark-squeeze-paragraphs "^3.0.1" to-style "^1.3.3" @@ -1593,10 +1643,10 @@ unist-builder "^1.0.1" unist-util-visit "^1.3.0" -"@mdx-js/tag@^0.20.3": - version "0.20.3" - resolved "https://registry.yarnpkg.com/@mdx-js/tag/-/tag-0.20.3.tgz#9e2306040b6469248c45a5f5baf44d0014db0493" - integrity sha512-Co3gUFmNDv9z2LjuvLTpTj2NaOSHFxuoZjohcG0YK/KfECO+Ns9idzThMYjfEDe1vAf4c824rqlBYseedJdFNw== +"@mdx-js/react@^1.0.0-rc.0": + version "1.0.0-rc.0" + resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-1.0.0-rc.0.tgz#1863287fe20a396c13280e155a29dbf9f8a40889" + integrity sha512-yE/eEUDBkdSdsSdXvantAn8Q6CdM+u2Nor2IRaN8Fe+p8IGpMfHqLFS3WSIZpodGB4PYUxRsGINDl7ITSZXQyg== "@mrmlnc/readdir-enhanced@^2.2.1": version "2.2.1" @@ -6962,7 +7012,7 @@ is-accessor-descriptor@^1.0.0: dependencies: kind-of "^6.0.0" -is-alphabetical@^1.0.0: +is-alphabetical@^1.0.0, is-alphabetical@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.2.tgz#1fa6e49213cb7885b75d15862fb3f3d96c884f41" integrity sha512-V0xN4BYezDHcBSKb1QHUFMlR4as/XEuCZBzMJUU4n7+Cbt33SmUnSol+pnXFvLxSHNq2CemUXNdaXV6Flg7+xg== @@ -11270,6 +11320,19 @@ relateurl@0.2.x: resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9" integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk= +remark-mdx@^1.0.0-rc.0: + version "1.0.0-rc.0" + resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-1.0.0-rc.0.tgz#c6886f208bf7ca06368fd10a123106af7284dbac" + integrity sha512-hCh7/HV8aSGGWRudqThCXsxuu6j3FaXh5x2nfqLysm+50la2evldzXWxZmBU15WoNwTP5W4akXKFad+tMt1Eig== + dependencies: + "@babel/core" "^7.2.2" + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-proposal-object-rest-spread" "^7.3.2" + "@babel/plugin-syntax-jsx" "^7.2.0" + is-alphabetical "^1.0.2" + remark-parse "^6.0.0" + unified "^7.0.0" + remark-parse@^6.0.0: version "6.0.3" resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-6.0.3.tgz#c99131052809da482108413f87b0ee7f52180a3a"