feat(v2): add ability default lang for code blocks (#1910)

* feat(v2): add ability default lang for code blocks

* Add support for CodeBlock

* changelog

* more changelog

* Add checks

* docs

* docs

* Fix changelog

* revert config

* Update theme-classic.md

* Update packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js

Co-Authored-By: Endi <endiliey@gmail.com>

CHANGELOG-2.x.md

@@ -4,6 +4,16 @@
 
 - **HOTFIX for 2.0.0-alpha.32** - Fix build compilation if exists only one code tab.
 - Add table of contents highlighting on scroll.
+- **BREAKING** `prismTheme` is renamed to `theme` as part new `prism` object in `themeConfig` field in your `docusaurus.config.js`. Eg: 
+  ```diff
+   themeConfig: {
+  -   prismTheme: require('prism-react-renderer/themes/dracula'),
+  +   prism: {
+  +     theme: require('prism-react-renderer/themes/dracula'),
+  +   },
+  },
+  ```
+- Added new `prism` option `defaultLanguage` that is used if the language is not specified in code blocks.
 
 ## 2.0.0-alpha.32
 

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

@@ -19,7 +19,7 @@ const highlightLinesRangeRegex = /{([\d,-]+)}/;
 export default ({children, className: languageClassName, metastring}) => {
   const {
     siteConfig: {
-      themeConfig: {prismTheme},
+      themeConfig: {prism = {}},
     },
   } = useDocusaurusContext();
   const [showCopied, setShowCopied] = useState(false);
@@ -48,9 +48,13 @@ export default ({children, className: languageClassName, metastring}) => {
     };
   }, [button.current, target.current]);
 
-  const language =
+  let language =
     languageClassName && languageClassName.replace(/language-/, '');
 
+  if (!language && prism.defaultLanguage) {
+    language = prism.defaultLanguage;
+  }
+
   const handleCopyCode = () => {
     window.getSelection().empty();
     setShowCopied(true);
@@ -61,7 +65,7 @@ export default ({children, className: languageClassName, metastring}) => {
   return (
     <Highlight
       {...defaultProps}
-      theme={prismTheme || defaultTheme}
+      theme={prism.theme || defaultTheme}
       code={children.trim()}
       language={language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (

packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js

@@ -26,7 +26,7 @@ export default ({
 }) => {
   const {
     siteConfig: {
-      themeConfig: {prismTheme},
+      themeConfig: {prism = {}},
     },
   } = useDocusaurusContext();
   const [showCopied, setShowCopied] = useState(false);
@@ -60,15 +60,19 @@ export default ({
       <Playground
         scope={{...React}}
         code={children.trim()}
-        theme={prismTheme || defaultTheme}
+        theme={prism.theme || defaultTheme}
         {...props}
       />
     );
   }
 
-  const language =
+  let language =
     languageClassName && languageClassName.replace(/language-/, '');
 
+  if (!language && prism.defaultLanguage) {
+    language = prism.defaultLanguage;
+  }
+
   const handleCopyCode = () => {
     window.getSelection().empty();
     setShowCopied(true);
@@ -79,7 +83,7 @@ export default ({
   return (
     <Highlight
       {...defaultProps}
-      theme={prismTheme || defaultTheme}
+      theme={prism.theme || defaultTheme}
       code={children.trim()}
       language={language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (

website/docs/markdown-features.mdx

@@ -201,7 +201,7 @@ Use the matching language meta string for your code block, and Docusaurus will p
 console.log('Every repo must come with a mascot.');
 ```
 
-By default, the Prism [syntax highlighting theme](https://github.com/FormidableLabs/prism-react-renderer#theming) we use is [Palenight](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/themes/palenight.js). You can change this to another theme by passing `prismTheme` as `themeConfig` in your docusaurus.config.js.
+By default, the Prism [syntax highlighting theme](https://github.com/FormidableLabs/prism-react-renderer#theming) we use is [Palenight](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/themes/palenight.js). You can change this to another theme by passing `theme` field in `prism` as `themeConfig` in your docusaurus.config.js.
 
 For example, if you prefer to use the `dracula` highlighting theme:
 
@@ -209,7 +209,9 @@ For example, if you prefer to use the `dracula` highlighting theme:
 // docusaurus.config.js
 module.exports = {
   themeConfig: {
-    prismTheme: require('prism-react-renderer/themes/dracula'),
+    prism: {
+      theme: require('prism-react-renderer/themes/dracula'),
+    },
   },
 };
 ```

website/docs/theme-classic.md

@@ -49,3 +49,37 @@ module.exports = {
 Outbound links automatically get `target="_blank" rel="noopener noreferrer"`.
 
 ## Footer
+
+## `CodeBlock`
+
+Docusaurus uses [Prism React Renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight code blocks.
+
+### Theme
+
+By default, we use [Palenight](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/themes/palenight.js) as syntax highlighting theme. You can specify a custom theme from the [list of available themes](https://github.com/FormidableLabs/prism-react-renderer#theming), e.g.:
+
+```js
+// docusaurus/config.js
+module.exports = {
+  themeConfig: {
+    prism: {
+      theme: require('prism-react-renderer/themes/dracula'),
+    },
+  }
+}
+```
+
+### Default language
+
+You can set a default language for code blocks if no language is added after the opening triple backticks (i.e. ```). Note that a valid [language name](https://prismjs.com/#supported-languages) must be passed, e.g.:
+
+```js
+// docusaurus/config.js
+module.exports = {
+  themeConfig: {
+    prism: {
+      defaultLanguage: 'javascript',
+    },
+  }
+}
+```