From 8356ed1a790869568e86e1d5745373890ae3c450 Mon Sep 17 00:00:00 2001 From: Elvis Date: Tue, 24 Mar 2020 01:56:44 -0500 Subject: [PATCH] docs(v2): demonstrate highlighting with comments --- website/docs/markdown-features.mdx | 45 ++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/website/docs/markdown-features.mdx b/website/docs/markdown-features.mdx index 75269709203f..fdd3f6a38416 100644 --- a/website/docs/markdown-features.mdx +++ b/website/docs/markdown-features.mdx @@ -267,6 +267,51 @@ function HighlightSomeText(highlight) { } ``` +You can also use comments with `highlight-next-line`, `highlight-start`, and `highlight-end` to select which lines are highlighted. + + ```jsx + function HighlightSomeText(highlight) { + if (highlight) { + // highlight-next-line + return 'This text is highlighted!'; + } + + return 'Nothing highlighted'; + } + + function HighlightMoreText(highlight) { + // highlight-start + if (highlight) { + return 'This range is highlighted!'; + } + // highlight-end + + return 'Nothing highlighted'; + } + ``` + +```jsx +function HighlightSomeText(highlight) { + if (highlight) { + // highlight-next-line + return 'This text is highlighted!'; + } + + return 'Nothing highlighted'; +} +function HighlightMoreText(highlight) { + // highlight-start + if (highlight) { + return 'This range is highlighted!'; + } + // highlight-end + + return 'Nothing highlighted'; +} +``` + +JS style (`/* */` and `//`), JSX style (`{ /* */ }`), Python style (`# `), and HTML style (``) are supported. + To accomplish this, Docusaurus adds the `docusaurus-highlight-code-line` class to the highlighted lines. You will need to define your own styling for this CSS, possibly in your `src/css/custom.css` with a custom background color which is dependent on your selected syntax highlighting theme. The color given below works for the default highlighting theme (Palenight), so if you are using another theme, you will have to tweak the color accordingly. ```css