3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-13 08:12:48 +02:00
Code Issues Projects Releases Packages Wiki Activity

docs(v2): describe adding a syntax highlighting language (#1858)

Browse source
This commit is contained in:
bravo-kernel 2019-10-20 11:54:59 +02:00 • committed by Endi
parent e408d72d26
commit 9fb9674862
1 changed files with 24 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

27
website/docs/markdown-features.mdx
View file

@ -195,26 +195,43 @@ Code blocks are text blocks wrapped around by strings of 3 backticks. You may ch
<!-- TODO: We need to allow users to pick syntax highlighting themes (maybe other than swizzling) --> <!-- TODO: We need to allow users to pick syntax highlighting themes (maybe other than swizzling) -->
Use the matching language meta string for your code block, and Docusaurus will pick up syntax highlighting automatically, powered by [Prism React Renderer](https://github.com/FormidableLabs/prism-react-renderer). Just in case you need it, [here](https://prismjs.com/#supported-languages) is a list of supported languages and their corresponding meta strings. Use the matching language meta string for your code block, and Docusaurus will pick up syntax highlighting automatically, powered by [Prism React Renderer](https://github.com/FormidableLabs/prism-react-renderer).
```jsx ```jsx
console.log('Every repo must come with a mascot.'); console.log('Every repo must come with a mascot.');
``` ```
You can change the [theme](https://github.com/FormidableLabs/prism-react-renderer#theming) by simply 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 `prismTheme` as `themeConfig` in your docusaurus.config.js.
Example: For example, if you prefer to use the `dracula` highlighting theme:
```js ```js
// docusaurus.config.js // docusaurus.config.js
module.exports = { module.exports = {
themeConfig: { themeConfig: {
prismTheme: require('prism-react-renderer/themes/palenight'), prismTheme: require('prism-react-renderer/themes/dracula'),
}, },
}; };
``` ```
By default, the Prism theme we use is [Palenight](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/themes/palenight.js). By default, Docusaurus comes with this subset of
[commonly used languages](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js).
To add syntax highlighting for any of the other
[Prism supported languages](https://prismjs.com/#supported-languages),
install the `prismjs` npm package, then swizzle the `CodeBlock`
component and add the desired language(s) there.
For example, if you want to add highlighting for the `powershell` language:
```js
// src/theme/CodeBlock/index.js
import Prism from 'prism-react-renderer/prism';
(typeof global !== 'undefined' ? global : window).Prism = Prism;
require('prismjs/components/prism-powershell');
```
### Interactive code editor ### Interactive code editor