feat(v2): add support specify new languages for Prism (#2250)

* feat(v2): add support specify new languages for Prism

* Do It Right

* More fix

* Fix up!

* Fixes

* Move to dev dependencies

Co-authored-by: Yangshun Tay <tay.yang.shun@gmail.com>

packages/docusaurus-theme-classic/package.json

@@ -22,7 +22,8 @@
   "peerDependencies": {
     "@docusaurus/core": "^2.0.0",
     "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react-dom": "^16.8.4",
+    "webpack": "^4.41.2"
   },
   "engines": {
     "node": ">=10.9.0"

packages/docusaurus-theme-classic/src/index.js

@@ -6,6 +6,7 @@
  */
 
 const path = require('path');
+const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
 
 // Need to be inlined to prevent dark mode FOUC
 // Make sure that the 'storageKey' is the same as the one in `/theme/hooks/useTheme.js`
@@ -38,8 +39,10 @@ module.exports = function(context, options) {
   const {
     siteConfig: {themeConfig},
   } = context;
-  const {disableDarkMode = false} = themeConfig || {};
+  const {disableDarkMode = false, prism: {additionalLanguages = []} = {}} =
+    themeConfig || {};
   const {customCss} = options || {};
+
   return {
     name: 'docusaurus-theme-classic',
 
@@ -52,9 +55,25 @@ module.exports = function(context, options) {
         'infima/dist/css/default/default.css',
         'remark-admonitions/styles/infima.css',
         customCss,
+        path.resolve(__dirname, './prism-include-languages'),
       ];
     },
 
+    configureWebpack() {
+      const prismLanguages = additionalLanguages
+        .map(lang => `prism-${lang}`)
+        .join('|');
+
+      return {
+        plugins: [
+          new ContextReplacementPlugin(
+            /prismjs[\\/]components$/,
+            new RegExp(`^./(${prismLanguages})$`),
+          ),
+        ],
+      };
+    },
+
     injectHtmlTags() {
       if (disableDarkMode) {
         return {};

packages/docusaurus-theme-classic/src/prism-include-languages.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import Prism from 'prism-react-renderer/prism';
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import siteConfig from '@generated/docusaurus.config';
+
+(() => {
+  if (ExecutionEnvironment.canUseDOM) {
+    const {
+      themeConfig: {prism: {additionalLanguages = []} = {}},
+    } = siteConfig;
+
+    window.Prism = Prism;
+
+    additionalLanguages.forEach(lang => {
+      require(`prismjs/components/prism-${lang}`); // eslint-disable-line
+    });
+
+    delete window.Prism;
+  }
+})();

website/docs/markdown-features.mdx

@@ -225,15 +225,22 @@ module.exports = {
 
 By default, Docusaurus comes with this subset of [commonly used languages](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js).
 
-To add syntax highlighting for any of the other [Prism supported languages](https://prismjs.com/#supported-languages), install the `prismjs` npm package, then swizzle the `CodeBlock` component and add the desired language(s) there.
+To add syntax highlighting for any of the other [Prism supported languages](https://prismjs.com/#supported-languages),
+define it in an array of additional languages.
 
 For example, if you want to add highlighting for the `powershell` language:
 
 ```js
-// src/theme/CodeBlock/index.js
+// docusaurus/config.js
-import Prism from 'prism-react-renderer/prism';
+module.exports = {
-(typeof global !== 'undefined' ? global : window).Prism = Prism;
+  ...
-require('prismjs/components/prism-powershell');
+  themeConfig: {
+    prism: {
+      additionalLanguages: ['powershell'],
+    },
+    ...
+  },
+};
 ```
 
 ### Line highlighting