From 20cb2d22213a9245e53c212b42c4754f9f7e0c8e Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Thu, 14 Apr 2022 12:18:41 +0300 Subject: [PATCH 1/4] refactor: make changeable bg color highlighted code line via CSS var --- .../src/theme/CodeBlock/index.tsx | 5 ++++- .../src/theme/CodeBlock/styles.module.css | 17 +++++++++++++++++ .../markdown-features-code-blocks.mdx | 13 +++++-------- website/src/css/custom.css | 13 ++----------- 4 files changed, 28 insertions(+), 20 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx index 717ef19ceaaf..eec417f03c87 100644 --- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx @@ -137,7 +137,10 @@ export default function CodeBlock({ }); if (highlightLines.includes(i)) { - lineProps.className += ' docusaurus-highlight-code-line'; + lineProps.className = clsx( + lineProps.className, + styles.highlightedCodeLine, + ); } const lineTokens = line.map((token, key) => ( diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css index 92a92bdd53c2..063cc8afe3eb 100644 --- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css @@ -5,6 +5,16 @@ * LICENSE file in the root directory of this source tree. */ +/* Deliberately has zero specificity, so that to be able to override +the background in custom CSS file due bug https://github.com/facebook/docusaurus/issues/3678 */ +:where(:root) { + --docusaurus-highlighted-code-line-bg: rgb(72 77 91); +} + +:where([data-theme='dark']) { + --docusaurus-highlighted-code-line-bg: rgb(100 100 100); +} + .codeBlockContainer { margin-bottom: var(--ifm-leading); box-shadow: var(--ifm-global-shadow-lw); @@ -51,6 +61,13 @@ padding: var(--ifm-pre-padding); } +.highlightedCodeLine { + background-color: var(--docusaurus-highlighted-code-line-bg); + display: block; + margin: 0 calc(-1 * var(--ifm-pre-padding)); + padding: 0 var(--ifm-pre-padding); +} + .codeBlockLinesWithNumbering { display: table; padding: var(--ifm-pre-padding) 0; diff --git a/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx b/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx index 07990cd9b986..af40a5a1b50c 100644 --- a/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx +++ b/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx @@ -198,20 +198,17 @@ Supported commenting syntax: We will do our best to infer which set of comment styles to use based on the language, and default to allowing _all_ comment styles. If there's a comment style that is not currently supported, we are open to adding them! Pull requests welcome. -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. +You can also set your own background color for highlighted code line in your `src/css/custom.css` which will better fit to 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 title="/src/css/custom.css" -.docusaurus-highlight-code-line { - background-color: rgb(72, 77, 91); - display: block; - margin: 0 calc(-1 * var(--ifm-pre-padding)); - padding: 0 var(--ifm-pre-padding); +:root { + --docusaurus-highlighted-code-line-bg: rgb(72, 77, 91); } /* If you have a different syntax highlighting theme for dark mode. */ -[data-theme='dark'] .docusaurus-highlight-code-line { +[data-theme='dark'] { /* Color which works with dark mode syntax highlighting theme */ - background-color: rgb(100, 100, 100); + --docusaurus-highlighted-code-line-bg: rgb(100, 100, 100); } ``` diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 728c5d628a99..e8cfb0874c83 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -18,12 +18,14 @@ --site-color-svg-icon-favorite: #e9669e; --site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 25%); --site-color-feedback-background: #fff; + --docusaurus-highlighted-code-line-bg: rgb(0 0 0 / 10%); } html[data-theme='dark'] { --site-color-feedback-background: #f0f8ff; --site-color-favorite-background: #1d1e1e; --site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 10%); + --docusaurus-highlighted-code-line-bg: rgb(66 66 66 / 30%); } [data-theme='light'] { @@ -56,17 +58,6 @@ html[data-theme='dark'] { ); } -.docusaurus-highlight-code-line { - background-color: rgb(0 0 0 / 10%); - display: block; - margin: 0 calc(-1 * var(--ifm-pre-padding)); - padding: 0 var(--ifm-pre-padding); -} - -[data-theme='dark'] .docusaurus-highlight-code-line { - background-color: rgb(66 66 66 / 30%); -} - .header-github-link:hover { opacity: 0.6; } From 916f922e7ae90d69c17be3137a6119d110103b0e Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Fri, 15 Apr 2022 11:52:48 +0300 Subject: [PATCH 2/4] Fixes --- .../src/theme/CodeBlock/styles.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css index 9433509e3569..cb5cf7dedb48 100644 --- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css @@ -100,7 +100,7 @@ the background in custom CSS file due bug https://github.com/facebook/docusaurus opacity: 0.4; } -:global(.docusaurus-highlight-code-line) .codeLineNumber::before { +.highlightedCodeLine .codeLineNumber::before { opacity: 0.8; } From 2b16689aad5370d1bc3386503fc5117413533324 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Fri, 15 Apr 2022 15:40:14 +0300 Subject: [PATCH 3/4] Fixes --- .../templates/classic/src/css/custom.css | 13 ++----------- .../templates/facebook/src/css/custom.css | 7 ------- .../src/theme/CodeBlock/Container/index.tsx | 2 +- .../src/theme/CodeBlock/Line/index.tsx | 8 +++++++- .../theme/CodeBlock/Line/styles.module.css | 19 ++++++++++++++++++- .../src/utils/ThemeClassNames.ts | 5 ++++- .../markdown-features-code-blocks.mdx | 4 +++- 7 files changed, 35 insertions(+), 23 deletions(-) diff --git a/packages/create-docusaurus/templates/classic/src/css/custom.css b/packages/create-docusaurus/templates/classic/src/css/custom.css index 311dc090d973..2bc6a4cfdef4 100644 --- a/packages/create-docusaurus/templates/classic/src/css/custom.css +++ b/packages/create-docusaurus/templates/classic/src/css/custom.css @@ -14,6 +14,7 @@ --ifm-color-primary-lighter: #359962; --ifm-color-primary-lightest: #3cad6e; --ifm-code-font-size: 95%; + --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); } /* For readability concerns, you should choose a lighter palette in dark mode. */ @@ -25,15 +26,5 @@ --ifm-color-primary-light: #29d5b0; --ifm-color-primary-lighter: #32d8b4; --ifm-color-primary-lightest: #4fddbf; -} - -.docusaurus-highlight-code-line { - background-color: rgba(0, 0, 0, 0.1); - display: block; - margin: 0 calc(-1 * var(--ifm-pre-padding)); - padding: 0 var(--ifm-pre-padding); -} - -[data-theme='dark'] .docusaurus-highlight-code-line { - background-color: rgba(0, 0, 0, 0.3); + --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); } diff --git a/packages/create-docusaurus/templates/facebook/src/css/custom.css b/packages/create-docusaurus/templates/facebook/src/css/custom.css index 29e525236964..c11ab1671663 100644 --- a/packages/create-docusaurus/templates/facebook/src/css/custom.css +++ b/packages/create-docusaurus/templates/facebook/src/css/custom.css @@ -35,10 +35,3 @@ --ifm-color-primary-lighter: #32d8b4; --ifm-color-primary-lightest: #4fddbf; } - -.docusaurus-highlight-code-line { - background-color: rgb(72, 77, 91); - display: block; - margin: 0 calc(-1 * var(--ifm-pre-padding)); - padding: 0 var(--ifm-pre-padding); -} diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Container/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Container/index.tsx index 293d700dad35..a44675a602e2 100644 --- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Container/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Container/index.tsx @@ -28,7 +28,7 @@ export default function CodeBlockContainer({ className={clsx( props.className, styles.codeBlockContainer, - ThemeClassNames.common.codeBlock, + ThemeClassNames.common.codeBlock.container, )} /> ); diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/index.tsx index 79505f42d756..12bee480f12b 100644 --- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/index.tsx @@ -6,6 +6,8 @@ */ import React from 'react'; +import clsx from 'clsx'; +import {ThemeClassNames} from '@docusaurus/theme-common'; import type {Props} from '@theme/CodeBlock/Line'; import styles from './styles.module.css'; @@ -26,7 +28,11 @@ export default function CodeBlockLine({ }); if (highlight) { - lineProps.className += ' docusaurus-highlight-code-line'; + lineProps.className = clsx( + lineProps.className, + styles.highlightedCodeLine, + ThemeClassNames.common.codeBlock.highlightedCodeLine, + ); } const lineTokens = line.map((token, key) => ( diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/styles.module.css index 7597f007c5b2..64edaaff865a 100644 --- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/styles.module.css @@ -5,6 +5,23 @@ * LICENSE file in the root directory of this source tree. */ +/* Intentionally has zero specificity, so that to be able to override +the background in custom CSS file due bug https://github.com/facebook/docusaurus/issues/3678 */ +:where(:root) { + --docusaurus-highlighted-code-line-bg: rgb(72 77 91); +} + +:where([data-theme='dark']) { + --docusaurus-highlighted-code-line-bg: rgb(100 100 100); +} + +.highlightedCodeLine { + background-color: var(--docusaurus-highlighted-code-line-bg); + display: block; + margin: 0 calc(-1 * var(--ifm-pre-padding)); + padding: 0 var(--ifm-pre-padding); +} + .codeLine { display: table-row; counter-increment: line-count; @@ -25,7 +42,7 @@ opacity: 0.4; } -:global(.docusaurus-highlight-code-line) .codeLineNumber::before { +.highlightedCodeLine .codeLineNumber::before { opacity: 0.8; } diff --git a/packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts b/packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts index ec3ffc11a969..65d72429067b 100644 --- a/packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts +++ b/packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts @@ -39,7 +39,10 @@ export const ThemeClassNames = { editThisPage: 'theme-edit-this-page', lastUpdated: 'theme-last-updated', backToTopButton: 'theme-back-to-top-button', - codeBlock: 'theme-code-block', + codeBlock: { + container: 'theme-code-block', + highlightedCodeLine: 'theme-code-block-highlighted-line', + }, }, layout: { // TODO add other stable classNames here diff --git a/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx b/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx index af40a5a1b50c..bb16c7e47c97 100644 --- a/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx +++ b/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx @@ -198,7 +198,7 @@ Supported commenting syntax: We will do our best to infer which set of comment styles to use based on the language, and default to allowing _all_ comment styles. If there's a comment style that is not currently supported, we are open to adding them! Pull requests welcome. -You can also set your own background color for highlighted code line in your `src/css/custom.css` which will better fit to 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. +You can set your own background color for highlighted code line in your `src/css/custom.css` which will better fit to 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 title="/src/css/custom.css" :root { @@ -212,6 +212,8 @@ You can also set your own background color for highlighted code line in your `sr } ``` +If you also need to style the highlighted code line in some other way, you can target on `theme-code-block-highlighted-line` CSS class. + ### Highlighting with metadata string {#highlighting-with-metadata-string} You can also specify highlighted line ranges within the language meta string (leave a space after the language). 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. From ca53c66e7fc742892c1ec4bbdcf05e69a65e3324 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Fri, 15 Apr 2022 16:20:23 +0300 Subject: [PATCH 4/4] Fixes --- .../src/theme/CodeBlock/Container/index.tsx | 2 +- .../src/theme/CodeBlock/Line/index.tsx | 3 +-- .../docusaurus-theme-common/src/utils/ThemeClassNames.ts | 5 +---- 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Container/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Container/index.tsx index a44675a602e2..293d700dad35 100644 --- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Container/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Container/index.tsx @@ -28,7 +28,7 @@ export default function CodeBlockContainer({ className={clsx( props.className, styles.codeBlockContainer, - ThemeClassNames.common.codeBlock.container, + ThemeClassNames.common.codeBlock, )} /> ); diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/index.tsx index 12bee480f12b..84b4fd0c407a 100644 --- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/index.tsx @@ -7,7 +7,6 @@ import React from 'react'; import clsx from 'clsx'; -import {ThemeClassNames} from '@docusaurus/theme-common'; import type {Props} from '@theme/CodeBlock/Line'; import styles from './styles.module.css'; @@ -31,7 +30,7 @@ export default function CodeBlockLine({ lineProps.className = clsx( lineProps.className, styles.highlightedCodeLine, - ThemeClassNames.common.codeBlock.highlightedCodeLine, + 'theme-code-block-highlighted-line', ); } diff --git a/packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts b/packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts index 65d72429067b..ec3ffc11a969 100644 --- a/packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts +++ b/packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts @@ -39,10 +39,7 @@ export const ThemeClassNames = { editThisPage: 'theme-edit-this-page', lastUpdated: 'theme-last-updated', backToTopButton: 'theme-back-to-top-button', - codeBlock: { - container: 'theme-code-block', - highlightedCodeLine: 'theme-code-block-highlighted-line', - }, + codeBlock: 'theme-code-block', }, layout: { // TODO add other stable classNames here