3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-15 09:12:24 +02:00
Code Issues Projects Releases Packages Wiki Activity

docs(v2): dark mode syntax highlighting (#2153)

Browse source
This commit is contained in:
Yangshun Tay 2019-12-29 16:40:17 +08:00 • committed by GitHub
parent da6966d208
commit 08ca95af01
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 25 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

6
packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
View file

@ -41,9 +41,11 @@ export default ({children, className: languageClassName, metastring}) => {
const target = useRef(null);
const button = useRef(null);
let highlightLines = [];
const {theme} = useThemeContext();
const prismTheme =
theme === 'dark' ? prism.darkTheme : prism.theme || defaultTheme;
const lightModeTheme = prism.theme || defaultTheme;
const darkModeTheme = prism.darkTheme || lightModeTheme;
const prismTheme = theme === 'dark' ? darkModeTheme : lightModeTheme;
if (metastring && highlightLinesRangeRegex.test(metastring)) {
const highlightLinesRange = metastring.match(highlightLinesRangeRegex)[1];

6
packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
View file

@ -48,9 +48,11 @@ export default ({
const target = useRef(null);
const button = useRef(null);
let highlightLines = [];
const {theme} = useThemeContext();
const prismTheme =
theme === 'dark' ? prism.darkTheme : prism.theme || defaultTheme;
const lightModeTheme = prism.theme || defaultTheme;
const darkModeTheme = prism.darkTheme || lightModeTheme;
const prismTheme = theme === 'dark' ? darkModeTheme : lightModeTheme;
if (metastring && highlightLinesRangeRegex.test(metastring)) {
const highlightLinesRange = metastring.match(highlightLinesRangeRegex)[1];

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

@ -256,7 +256,7 @@ function HighlightSomeText(highlight) {
}
```
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 will have to tweak the color accordingly.
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
/* /src/css/custom.css */
@ -266,6 +266,11 @@ To accomplish this, Docusaurus adds the `docusaurus-highlight-code-line` class t
margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 var(--ifm-pre-padding);
}
/* If you have a different syntax highlighting theme for dark mode. */
html[data-theme='dark'] .docusaurus-highlight-code-line {
background-color: /* Color which works with dark mode syntax highlighting theme */
}
```
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.

9
website/docs/theme-classic.md
View file

@ -115,19 +115,22 @@ Docusaurus uses [Prism React Renderer](https://github.com/FormidableLabs/prism-r
### Theme
By default, we use [Palenight](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/themes/palenight.js) as syntax highlighting theme. You can specify a custom theme from the [list of available themes](https://github.com/FormidableLabs/prism-react-renderer#theming), e.g.:
By default, we use [Palenight](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/themes/palenight.js) as syntax highlighting theme. You can specify a custom theme from the [list of available themes](https://github.com/FormidableLabs/prism-react-renderer#theming). If you want to use a different syntax highlighting theme when the site is in dark mode, you may also do so.
```js
```js {5,6}
// docusaurus/config.js
module.exports = {
themeConfig: {
prism: {
theme: require('prism-react-renderer/themes/dracula'),
theme: require('prism-react-renderer/themes/github'),
darkTheme: require('prism-react-renderer/themes/dracula'),
},
},
};
```
**Note:** If you use the line highlighting Markdown syntax, you might need to specify a different highlight background color for the dark mode syntax highlighting theme. Refer to the [docs for guidance](markdown-features.mdx#line-highlighting).
### Default language
You can set a default language for code blocks if no language is added after the opening triple backticks (i.e. ```). Note that a valid [language name](https://prismjs.com/#supported-languages) must be passed, e.g.:

6
website/src/css/custom.css
View file

@ -33,8 +33,12 @@ html[data-theme='dark'] {
}
.docusaurus-highlight-code-line {
background-color: rgb(72, 77, 91);
background-color: rgb(0, 0, 0, 0.1);
display: block;
margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 var(--ifm-pre-padding);
}
html[data-theme='dark'] .docusaurus-highlight-code-line {
background-color: rgb(0, 0, 0, 0.3);
}