3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-15 18:17:35 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: control base styling of code blocks via CSS vars (#7172)

Browse source 
Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>
This commit is contained in:
Alexey Pyltsyn 2022-04-14 19:16:39 +03:00 • committed by GitHub
parent fe064a87a6
commit ad1526aade
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 45 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

19
packages/docusaurus-theme-common/src/utils/codeBlockUtils.ts
View file

@ -6,6 +6,8 @@
*/
import rangeParser from 'parse-numeric-range';
import type {PrismTheme} from 'prism-react-renderer';
import type {CSSProperties} from 'react';
const codeBlockTitleRegex = /title=(?<quote>["'])(?<title>.*?)\1/;
const highlightLinesRangeRegex = /\{(?<range>[\d,-]+)\}/;
@ -173,3 +175,20 @@ export function parseLines(
code = lines.join('\n');
return {highlightLines, code};
}
export function getPrismCssVariables(prismTheme: PrismTheme): CSSProperties {
const mapping: {[name: keyof PrismTheme['plain']]: string} = {
color: '--prism-color',
backgroundColor: '--prism-background-color',
};
const properties: CSSProperties = {};
Object.entries(prismTheme.plain).forEach(([key, value]) => {
const varName = mapping[key];
if (varName && typeof value === 'string') {
// @ts-expect-error: why css variables not in inline style type?
properties[varName] = value;
}
});
return properties;
}