fix(plugin-shiki): refine css variables and allow overriding default …

…code block color
vuepress · Jul 19, 2024 · 201db1d · 201db1d
1 parent 5fc0740
commit 201db1d
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 8 deletions.
diff --git a/plugins/features/plugin-copy-code/src/client/styles/copy-code.scss b/plugins/features/plugin-copy-code/src/client/styles/copy-code.scss
@@ -1,7 +1,7 @@
 :root {
   --code-copy-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2' /%3e%3c/svg%3e");
   --code-copied-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4' /%3e%3c/svg%3e");
-  --copy-code-color: var(--code-line-number-color, #9e9e9e);
+  --copy-code-color: var(--code-c-line-number, #9e9e9e);
   --copy-code-hover: var(--code-highlight-bg-color, rgb(0 0 0 / 50%));
 }
 

diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/_mixins.scss b/plugins/markdown/plugin-prismjs/src/client/styles/_mixins.scss
@@ -6,12 +6,12 @@
   --code-c-bg: #{$code-bg-color};
 
   // highlight
-  --code-highlight-bg-color: #{color.scale(
+  --code-c-highlight-bg: #{color.scale(
       $code-bg-color,
       $saturation: if(color.whiteness($code-bg-color) < 50%, 5%, 10%),
       $lightness: if(color.whiteness($code-bg-color) < 50%, 5%, -5%)
     )};
 
   // line-number
-  --code-line-number-color: #{color.scale($code-text-color, $alpha: -33%)};
+  --code-c-line-number: #{color.scale($code-text-color, $alpha: -33%)};
 }
diff --git a/plugins/markdown/plugin-shiki/src/client/styles/shiki.scss b/plugins/markdown/plugin-shiki/src/client/styles/shiki.scss
@@ -1,10 +1,9 @@
 :root {
   // base color
   --code-c-text: #9e9e9e;
-  --code-c-bg: #282c34;
 
   // highlight
-  --code-highlight-bg-color: rgb(0 0 0 / 66%);
+  --code-c-highlight-bg: rgb(0 0 0 / 66%);
 }
 
 .shiki span {
@@ -16,9 +15,9 @@
 }
 
 div[data-highlighter='shiki'] {
-  background-color: var(--shiki-light-bg, var(--code-c-bg));
+  background-color: var(--code-c-bg, --shiki-light-bg);
 
   [data-theme='dark'] & {
-    background-color: var(--shiki-dark-bg, var(--code-c-bg));
+    background-color: var(--code-c-bg, --shiki-dark-bg);
   }
 }
diff --git a/tools/highlighter-helper/src/client/styles/line-number.scss b/tools/highlighter-helper/src/client/styles/line-number.scss
@@ -42,7 +42,7 @@ div[class*='language-'] {
       width: var(--code-line-number-width);
       padding-top: var(--code-padding-y);
 
-      color: var(--code-line-number-color, --code-c-text);
+      color: var(--code-c-line-number, --code-c-text);
 
       font-size: 0.875em;
       line-height: var(--code-line-height);