diff --git a/website/docs/markdown-features.mdx b/website/docs/markdown-features.mdx index 91b293871c..3697b82b22 100644 --- a/website/docs/markdown-features.mdx +++ b/website/docs/markdown-features.mdx @@ -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 -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