mirror of
https://github.com/facebook/docusaurus.git
synced 2025-06-11 07:12:29 +02:00
docs(v2): describe adding a syntax highlighting language (#1858)
This commit is contained in:
parent
e408d72d26
commit
9fb9674862
1 changed files with 24 additions and 7 deletions
|
@ -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
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue