mirror of
https://github.com/facebook/docusaurus.git
synced 2025-06-09 14:22:27 +02:00
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>
This commit is contained in:
parent
3b9309fa87
commit
c507028cb0
5 changed files with 64 additions and 10 deletions
|
@ -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
|
||||
|
||||
|
|
|
@ -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}) => (
|
||||
|
|
|
@ -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}) => (
|
||||
|
|
|
@ -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'),
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
|
|
@ -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',
|
||||
},
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue