feat(v2): allow custom syntax highlighting theme (#1674)

facebook · Jul 18, 2019 · 2d6aaea · 2d6aaea
1 parent 0daed4a
commit 2d6aaea
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 189 deletions.
diff --git a/packages/docusaurus-theme-classic/package.json b/packages/docusaurus-theme-classic/package.json
@@ -8,12 +8,12 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@mdx-js/mdx": "^1.0.20",
-    "@mdx-js/react": "^1.0.20",
+    "@mdx-js/mdx": "^1.1.0",
+    "@mdx-js/react": "^1.0.27",
     "classnames": "^2.2.6",
     "clipboard": "^2.0.4",
     "infima": "0.2.0-alpha.2",
-    "prism-react-renderer": "^0.1.6",
+    "prism-react-renderer": "^0.1.7",
     "react-toggle": "^4.0.2"
   },
   "peerDependencies": {

diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
@@ -10,9 +10,15 @@ import classnames from 'classnames';
 import Highlight, {defaultProps} from 'prism-react-renderer';
 import nightOwlTheme from 'prism-react-renderer/themes/nightOwl';
 import Clipboard from 'clipboard';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import styles from './styles.module.css';
 
 export default ({children, className: languageClassName}) => {
+  const {
+    siteConfig: {
+      themeConfig: {prismTheme},
+    },
+  } = useDocusaurusContext();
   const [showCopied, setShowCopied] = useState(false);
   const target = useRef(null);
   const button = useRef(null);
@@ -46,7 +52,7 @@ export default ({children, className: languageClassName}) => {
   return (
     <Highlight
       {...defaultProps}
-      theme={nightOwlTheme}
+      theme={prismTheme || nightOwlTheme}
       code={children.trim()}
       language={language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (

diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
@@ -12,6 +12,7 @@ import Highlight, {defaultProps} from 'prism-react-renderer';
 import nightOwlTheme from 'prism-react-renderer/themes/nightOwl';
 import Clipboard from 'clipboard';
 import Loading from '@theme/Loading';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import styles from './styles.module.css';
 
 /* Live playground is not small in size, lazy load it is better */
@@ -23,6 +24,11 @@ const Playground = LoadableVisibility({
 });
 
 export default ({children, className: languageClassName, live, ...props}) => {
+  const {
+    siteConfig: {
+      themeConfig: {prismTheme},
+    },
+  } = useDocusaurusContext();
   const [showCopied, setShowCopied] = useState(false);
   const target = useRef(null);
   const button = useRef(null);
@@ -48,7 +54,7 @@ export default ({children, className: languageClassName, live, ...props}) => {
       <Playground
         scope={{...React}}
         code={children.trim()}
-        theme={nightOwlTheme}
+        theme={prismTheme || nightOwlTheme}
         {...props}
       />
     );
@@ -67,7 +73,7 @@ export default ({children, className: languageClassName, live, ...props}) => {
   return (
     <Highlight
       {...defaultProps}
-      theme={nightOwlTheme}
+      theme={prismTheme || nightOwlTheme}
       code={children.trim()}
       language={language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (

diff --git a/website/docs/markdown-features.mdx b/website/docs/markdown-features.mdx
@@ -159,7 +159,20 @@ Use the matching language meta string for your code block, and Docusaurus will p
 console.log('Every repo must come with a mascot.');
 ```
 
-**Work in Progress** Currently the Prism theme we use is [Night Owl](https://github.com/FormidableLabs/prism-react-renderer/blob/master/themes/nightOwl.js). We will support customized theme in a future version.
+You can change the [theme](https://github.com/FormidableLabs/prism-react-renderer#theming) by simply passing `prismTheme` as `themeConfig` in your docusaurus.config.js.
+
+Example:
+
+```js
+// docusaurus.config.js
+module.exports = {
+  themeConfig: {
+    prismTheme: require('prism-react-renderer/themes/vsDark')
+  }
+};
+```
+
+By default, the Prism theme we use is [Night Owl](https://github.com/FormidableLabs/prism-react-renderer/blob/master/themes/nightOwl.js).
 
 ### Interactive code editor