diff --git a/CHANGELOG-2.x.md b/CHANGELOG-2.x.md index a642982a46..76124230f1 100644 --- a/CHANGELOG-2.x.md +++ b/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 diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js index 044710053c..d50872b797 100644 --- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js +++ b/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 ( {({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 index 097801fb05..f70d66bb82 100644 --- a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js +++ b/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 ({ ); } - 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 ( {({className, style, tokens, getLineProps, getTokenProps}) => ( diff --git a/website/docs/markdown-features.mdx b/website/docs/markdown-features.mdx index b895262004..5c7deb63f4 100644 --- a/website/docs/markdown-features.mdx +++ b/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'), + }, }, }; ``` diff --git a/website/docs/theme-classic.md b/website/docs/theme-classic.md index e80e97a7fe..b07801485c 100644 --- a/website/docs/theme-classic.md +++ b/website/docs/theme-classic.md @@ -48,4 +48,38 @@ module.exports = { Outbound links automatically get `target="_blank" rel="noopener noreferrer"`. -## Footer \ No newline at end of file +## 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', + }, + } +} +```