From ad1526aade18d9c3f29a73fcfb6c2c72afa800c4 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Thu, 14 Apr 2022 19:16:39 +0300 Subject: [PATCH] refactor: control base styling of code blocks via CSS vars (#7172) Co-authored-by: sebastienlorber --- .../src/__tests__/validateThemeConfig.test.ts | 1 + .../CodeBlock/CopyButton/styles.module.css | 4 +++- .../src/theme/CodeBlock/index.tsx | 20 ++++++++++--------- .../src/theme/CodeBlock/styles.module.css | 5 +++-- .../src/validateThemeConfig.ts | 4 +++- .../src/hooks/usePrismTheme.ts | 6 +++--- packages/docusaurus-theme-common/src/index.ts | 1 + .../src/utils/codeBlockUtils.ts | 19 ++++++++++++++++++ .../src/utils/useThemeConfig.ts | 2 +- 9 files changed, 45 insertions(+), 17 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts b/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts index 10c4f62d1b..4817935c52 100644 --- a/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts +++ b/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts @@ -481,6 +481,7 @@ describe('themeConfig', () => { const prismConfig = { prism: { additionalLanguages: ['kotlin', 'java'], + theme: darkTheme, }, }; expect(testValidateThemeConfig(prismConfig)).toEqual({ diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/CopyButton/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/CopyButton/styles.module.css index f91a3d6aac..8333e37d16 100644 --- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/CopyButton/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/CopyButton/styles.module.css @@ -7,7 +7,9 @@ .copyButton { display: flex; - background: inherit; + /* TODO: move to base button styling */ + background: var(--prism-background-color); + color: var(--prism-color); border: 1px solid var(--ifm-color-emphasis-300); border-radius: var(--ifm-global-radius); padding: 0.4rem; diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx index 717ef19cea..f734ca0b15 100644 --- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx @@ -16,6 +16,7 @@ import { containsLineNumbers, ThemeClassNames, usePrismTheme, + getPrismCssVariables, } from '@docusaurus/theme-common'; import CopyButton from '@theme/CodeBlock/CopyButton'; import type {Props} from '@theme/CodeBlock'; @@ -50,6 +51,8 @@ export default function CodeBlock({ const codeBlockTitle = parseCodeBlockTitle(metastring) || title; const prismTheme = usePrismTheme(); + const prismCssVariables = getPrismCssVariables(prismTheme); + // 
 tags in markdown map to CodeBlocks and they may contain JSX children.
   // When the children is not a simple string, we just return a styled block
   // without actually highlighting.
@@ -61,7 +64,7 @@ export default function CodeBlock({
         theme={prismTheme}
         code=""
         language={'text' as Language}>
-        {({className, style}) => (
+        {({className}) => (
           
+            style={prismCssVariables}>
             {children}
           

         )}
@@ -99,7 +102,7 @@ export default function CodeBlock({
       theme={prismTheme}
       code={code}
       language={(language ?? 'text') as Language}>
-      {({className, style, tokens, getLineProps, getTokenProps}) => (
+      {({className, tokens, getLineProps, getTokenProps}) => (
         

-          {codeBlockTitle && (
-            

-              {codeBlockTitle}
-            

           )}
-          

+          style={prismCssVariables}>
+          {codeBlockTitle && (
+            
{codeBlockTitle}

+          )}
+          

             
["'])(?.*?)\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;
+}
diff --git a/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts b/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts
index 684b573b96..9a944c433b 100644
--- a/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts
+++ b/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts
@@ -53,7 +53,7 @@ export type AnnouncementBarConfig = {
 };
 
 export type PrismConfig = {
-  theme?: PrismTheme;
+  theme: PrismTheme;
   darkTheme?: PrismTheme;
   defaultLanguage?: string;
   additionalLanguages: string[];