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

docs(v2:) Divide markdown-features/code-blocks to smaller sections (#5061)

Browse source 
* Divide `markdown-features/code-blocks` to smaller sections

This PR adds few more heading to split the content to small topics.

This way users like me will be able to scroll directly to the specific section, instead of reading all the documentation.

I add to read the entire section because It was not divided into sections. Not a great user experience.

* Use `<h3>` heading
This commit is contained in:
Rami Yushuvaev 2021-06-25 20:25:15 +03:00 • committed by GitHub
parent 4d93c894f2
commit 3fe7389ee2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

8
website/docs/guides/markdown-features/markdown-features-code-blocks.mdx
View file

@ -39,6 +39,8 @@ Use the matching language meta string for your code block, and Docusaurus will p
console.log('Every repo must come with a mascot.');
```
### Theming {#theming}
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:
@ -53,6 +55,8 @@ module.exports = {
};
```
### Supported Languages {#supported-languages}
By default, Docusaurus comes with a subset of [commonly used languages](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js).
:::caution
@ -142,6 +146,8 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
}
```
### Multiple line highlighting {#multiple-line-highlighting}
To highlight multiple lines, separate the line numbers by commas or use the range syntax to select a chunk of lines. This feature uses the `parse-number-range` library and you can find [more syntax](https://www.npmjs.com/package/parse-numeric-range) on their project details.
```jsx {1,4-6,11}
@ -172,6 +178,8 @@ function MyComponent(props) {
export default MyComponent;
```
### Highlighting with comments {#highlighting-with-comments}
You can also use comments with `highlight-next-line`, `highlight-start`, and `highlight-end` to select which lines are highlighted.
```jsx