From e530e66805b2d5c8f1d46f90bade5747f0490bd3 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Tue, 29 Oct 2019 13:48:21 +0300 Subject: [PATCH 01/11] feat(v2): add ability default lang for code blocks --- .../src/theme/CodeBlock/index.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) 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 097801fb0549..d257a00e2e7f 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}) => ( From c5edbcac226b68a2a422adf008ff93abca190baa Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 4 Nov 2019 04:15:36 +0300 Subject: [PATCH 02/11] Add support for CodeBlock --- .../src/theme/CodeBlock/index.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js index 044710053c8a..7db1376af870 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 === 'undefined' && 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}) => ( From b952fca86e109105c66c42a2c0d36a6e09c7ae61 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 4 Nov 2019 04:15:54 +0300 Subject: [PATCH 03/11] changelog --- CHANGELOG-2.x.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/CHANGELOG-2.x.md b/CHANGELOG-2.x.md index d9f03c0a2b07..636d5b136759 100644 --- a/CHANGELOG-2.x.md +++ b/CHANGELOG-2.x.md @@ -14,6 +14,15 @@ - Prioritize `@docusaurus/core` dependencies/ node_modules over user's node_modules. This fix a bug whereby if user has core-js@3 on its own node_modules but docusaurus depends on core-js@2, we previously encounter `Module not found: core-js/modules/xxxx` (because core-js@3 doesn't have that). Another example is if user installed webpack@3 but docusaurus depends on webpack@4. - Added code block line highlighting feature (thanks @lex111)! If you have previously swizzled the `CodeBlock` theme component, it is recommended to update your source code to have this feature. +- **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'), + + }, + }, + ``` ## 2.0.0-alpha.31 From 52b54847e1060ba66303900ec7b26fc84a196b9a Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 4 Nov 2019 04:20:08 +0300 Subject: [PATCH 04/11] more changelog --- CHANGELOG-2.x.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG-2.x.md b/CHANGELOG-2.x.md index 636d5b136759..5bc6f162b57c 100644 --- a/CHANGELOG-2.x.md +++ b/CHANGELOG-2.x.md @@ -23,6 +23,7 @@ Another example is if user installed webpack@3 but docusaurus depends on webpack + }, }, ``` +- Added new `prism` option `defaultLanguage` that is used if the language is not specified in code blocks ## 2.0.0-alpha.31 From d26e23179d6907b7db8ec19e77e835733e25ab9d Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 4 Nov 2019 04:38:24 +0300 Subject: [PATCH 05/11] Add checks --- packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js | 2 +- .../src/theme/CodeBlock/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js index 7db1376af870..57d7a3a50be6 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: {prism}, + themeConfig: {prism = {}}, }, } = useDocusaurusContext(); const [showCopied, setShowCopied] = useState(false); 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 d257a00e2e7f..f70d66bb82ef 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: {prism}, + themeConfig: {prism = {}}, }, } = useDocusaurusContext(); const [showCopied, setShowCopied] = useState(false); From 0aa83e78b308a070940f7aeb9792c8fe59da43e0 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 4 Nov 2019 04:38:46 +0300 Subject: [PATCH 06/11] docs --- website/docs/markdown-features.mdx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/website/docs/markdown-features.mdx b/website/docs/markdown-features.mdx index b8952620047d..5c7deb63f471 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'), + }, }, }; ``` From deaec47365fda5f0ca4b7be6b7f0b857c68edee4 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 4 Nov 2019 17:43:51 +0300 Subject: [PATCH 07/11] docs --- website/docs/theme-classic.md | 36 ++++++++++++++++++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/website/docs/theme-classic.md b/website/docs/theme-classic.md index e80e97a7fe41..342547991d8c 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 + +## Code Blocks + +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', + }, + } +} +``` From 368f96ae70889e65870a09e528cc83f2761c5333 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 4 Nov 2019 17:45:16 +0300 Subject: [PATCH 08/11] Fix changelog --- CHANGELOG-2.x.md | 1 - 1 file changed, 1 deletion(-) diff --git a/CHANGELOG-2.x.md b/CHANGELOG-2.x.md index 2b93cc688355..760efa839d05 100644 --- a/CHANGELOG-2.x.md +++ b/CHANGELOG-2.x.md @@ -2,7 +2,6 @@ ## Unreleased -- Added code block line highlighting feature (thanks @lex111)! If you have previously swizzled the `CodeBlock` theme component, it is recommended to update your source code to have this feature. - **BREAKING** `prismTheme` is renamed to `theme` as part new `prism` object in `themeConfig` field in your `docusaurus.config.js`. Eg: ```diff themeConfig: { From b68791c03a23eff9f3972c119105084c92250d67 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 4 Nov 2019 17:46:29 +0300 Subject: [PATCH 09/11] revert config --- website/docusaurus.config.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index c7e87b8196c2..741aa0ebdb80 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -25,7 +25,6 @@ module.exports = { }, ], ], - scripts: ['https://buttons.github.io/buttons.js'], presets: [ [ '@docusaurus/preset-classic', @@ -61,9 +60,6 @@ module.exports = { indexName: 'docusaurus-2', algoliaOptions: {}, }, - prism: { - defaultLanguage: 'PHP', - }, navbar: { title: 'Docusaurus', logo: { @@ -138,10 +134,6 @@ module.exports = { label: 'Twitter', href: 'https://twitter.com/docusaurus', }, - { - html: - 'Star', - }, ], }, ], From fadac894353b7b3f3132d16f00e4590bef031bbf Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 4 Nov 2019 18:55:58 +0300 Subject: [PATCH 10/11] Update theme-classic.md --- website/docs/theme-classic.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/theme-classic.md b/website/docs/theme-classic.md index 342547991d8c..b07801485cbf 100644 --- a/website/docs/theme-classic.md +++ b/website/docs/theme-classic.md @@ -50,7 +50,7 @@ Outbound links automatically get `target="_blank" rel="noopener noreferrer"`. ## Footer -## Code Blocks +## `CodeBlock` Docusaurus uses [Prism React Renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight code blocks. From b12868c284e73946a8d17a64a34b76a97d205f66 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Tue, 5 Nov 2019 10:24:57 +0300 Subject: [PATCH 11/11] Update packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js Co-Authored-By: Endi --- packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js index 57d7a3a50be6..d50872b79723 100644 --- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js +++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js @@ -51,7 +51,7 @@ export default ({children, className: languageClassName, metastring}) => { let language = languageClassName && languageClassName.replace(/language-/, ''); - if (language === 'undefined' && prism.defaultLanguage) { + if (!language && prism.defaultLanguage) { language = prism.defaultLanguage; }