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

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,15 +201,17 @@ 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:
 
 ```js {4}
 // 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

@@ -48,4 +48,38 @@ module.exports = {
 
 Outbound links automatically get `target="_blank" rel="noopener noreferrer"`.
 
-## Footer
+## 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',
+ },
+ }
+}
+```