3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-01 10:22:30 +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

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

@ -101,8 +101,8 @@ Documents use the following markdown header fields that are enclosed by a line `
- `hide_title`: Whether to hide the title at the top of the doc. By default it is `false`.
- `sidebar_label`: The text shown in the document sidebar and in the next/previous button for this document. If this field is not present, the document's `sidebar_label` will default to its `title`.
- `custom_edit_url`: The URL for editing this document. If this field is not present, the document's edit URL will fall back to `editUrl` from options fields passed to `docusaurus-plugin-content-docs`.
- `description`: Description of this document page.
- `image`: Cover or thumbnail image that will be used when displaying the link to your post.
- `description`: Description of this document page.
- `image`: Cover or thumbnail image that will be used when displaying the link to your post.
- `keywords`: Keywords for search engines.
Example:
@ -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) -->
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
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
// docusaurus.config.js
module.exports = {
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