fix: fix code block related style

docs/zh/plugins/markdown/revealjs/README.md

@@ -231,7 +231,3 @@ Reveal.js 选项，请参见[reveal.js config](https://revealjs.com/config/)，R
 @[code css](@vuepress/plugin-revealjs/src/client/styles/vars.css)
 
 [client-config]: https://vuejs.press/zh/guide/configuration.html#%E5%AE%A2%E6%88%B7%E7%AB%AF%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6
-
-```
-
-```

plugins/markdown/plugin-markdown-tab/src/client/styles/code-tabs.scss

@@ -3,7 +3,7 @@
 
   margin: 0.75rem 0 -0.75rem;
   padding: 0;
-  border-radius: 6px 6px 0 0;
+  border-radius: var(--code-border-radius) var(--code-border-radius) 0 0;
 
   background: var(--code-tabs-c-bg);
   list-style: none;
@@ -15,11 +15,6 @@
   @media print {
     display: none;
   }
-
-  @media (max-width: 419px) {
-    margin-inline: -1.5rem;
-    border-radius: 0;
-  }
 }
 
 .vp-code-tab-nav {
@@ -29,7 +24,7 @@
   margin: 0;
   padding: 6px 12px;
   border-width: 0;
-  border-radius: 6px 6px 0 0;
+  border-radius: var(--code-border-radius) var(--code-border-radius) 0 0;
 
   background: transparent;
   color: var(--code-tabs-c-text);
@@ -56,8 +51,8 @@
     bottom: 0;
     z-index: 1;
 
-    width: 6px;
-    height: 6px;
+    width: var(--code-border-radius);
+    height: var(--code-border-radius);
   }
 
   &::before {
@@ -115,39 +110,6 @@
   &.active {
     display: block;
   }
-
-  .code-block-title-bar {
-    border-radius: 0;
-  }
-
-  div[class*='language-'] {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-
-    @media (max-width: 419px) {
-      margin: 0.75rem -1.5rem;
-      border-radius: 0;
-    }
-
-    &.line-numbers-mode::after {
-      border-top-left-radius: 0;
-    }
-
-    pre {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-
-      @media (max-width: 419px) {
-        border-radius: 0;
-      }
-    }
-
-    code {
-      @media print {
-        white-space: pre-wrap;
-      }
-    }
-  }
 }
 
 .vp-code-tab-title {

plugins/markdown/plugin-markdown-tab/src/client/styles/tabs.scss

@@ -1,24 +1,19 @@
+:root {
+  --tab-border-radius: 0.5rem;
+}
+
 .vp-tabs {
   margin: 1.5rem 0;
   border: 1px solid var(--vp-c-border);
-  border-radius: 8px;
-
-  @media (max-width: 419px) {
-    [vp-content] > & {
-      margin-inline: -1.5rem;
-      border: none;
-      border-bottom: 1px solid var(--vp-c-border);
-      border-radius: 0;
-    }
-  }
+  border-radius: var(--tab-border-radius);
 }
 
 .vp-tabs-nav {
   overflow-x: auto;
 
   margin: 0;
   padding: 0;
-  border-radius: 0.5rem 0.5rem 0 0;
+  border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0;
 
   background: var(--tab-c-bg-nav);
   list-style: none;
@@ -30,10 +25,6 @@
   @media print {
     display: none;
   }
-
-  @media (max-width: 419px) {
-    border-radius: 0;
-  }
 }
 
 .vp-tab-nav {
@@ -43,7 +34,7 @@
   margin: 0;
   padding: 0.5em 1em;
   border: none;
-  border-radius: 0.5rem 0.5rem 0 0;
+  border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0;
 
   background: transparent;
   color: var(--tab-c-nav);
@@ -113,7 +104,7 @@
   display: none;
 
   padding: 1rem 0.75rem;
-  border-radius: 0 0 0.5rem 0.5rem;
+  border-radius: 0 0 var(--tab-border-radius) var(--tab-border-radius);
 
   background: var(--tab-c-bg);
 

plugins/markdown/plugin-revealjs/src/client/styles/reveal-js.scss

@@ -7,12 +7,6 @@
   @media print {
     page-break-inside: avoid;
   }
-
-  @media (max-width: 419px) {
-    width: calc(100% + 3rem);
-    min-height: 300px;
-    margin: 0 -1.5rem;
-  }
 }
 
 .reveal-loading {

themes/theme-default/src/client/components/VPPage.vue

@@ -19,7 +19,7 @@ defineSlots<{
     <div vp-content>
       <slot name="content-top" />
 
-      <Content />
+      <Content id="content" />
 
       <slot name="content-bottom" />
     </div>

themes/theme-default/src/client/styles/content/code.scss

@@ -1,23 +1,43 @@
 @use '../variables' as *;
 
-// code block additional styles
-div[class*='language-'] {
-  margin: 0.75rem 0;
-  transition:
-    background-color var(--vp-t-color),
-    color var(--vp-t-color);
-
+#content {
   @media (max-width: $MQMobileNarrow) {
     --code-border-radius: 0;
+    --tab-border-radius: 0;
 
-    margin: 0.75rem -1.5rem;
-  }
+    // code block
+    > div[class*='language-'],
+    > .code-block-with-title > div[class*='language-'] {
+      margin-inline: -1.5rem;
+    }
+
+    // code block title bar
+    .code-block-title-bar {
+      margin-inline: -1.5rem;
+    }
+
+    // code tabs
+    > .vp-code-tabs {
+      .vp-code-tabs-nav {
+        margin-inline: -1.5rem;
+        border-radius: 0;
+      }
+
+      div[class*='language-'] {
+        margin-inline: -1.5rem;
+      }
+    }
+
+    // tabs
+    > .vp-tabs {
+      margin-inline: -1.5rem;
+      border-inline: none;
+    }
 
-  // transitions for code notation highlighting
-  .line {
-    &.diff,
-    &.highlighted {
-      transition: background-color var(--vp-t-color);
+    // reveal.js
+    .vp-reveal {
+      width: calc(100% + 3rem);
+      margin: 0 -1.5rem;
     }
   }
 }

tools/highlighter-helper/src/client/styles/base.scss

@@ -10,9 +10,16 @@
 
 div[class*='language-'] {
   position: relative;
+
+  margin-block: 0.75rem;
   border-radius: var(--code-border-radius);
+
   background-color: var(--code-c-bg);
 
+  transition:
+    background-color var(--vp-t-color),
+    color var(--vp-t-color);
+
   &::before {
     content: attr(data-ext);
 
@@ -54,6 +61,10 @@ div[class*='language-'] {
 
       -webkit-font-smoothing: auto;
       -moz-osx-font-smoothing: auto;
+
+      @media print {
+        white-space: pre-wrap;
+      }
     }
   }
 }

tools/highlighter-helper/src/client/styles/code-block-title.scss

@@ -21,7 +21,7 @@
   margin: 0.75rem 0 -0.75rem;
   padding: 0.5rem 1rem;
   border-bottom: solid 1px var(--code-title-divider);
-  border-radius: 6px 6px 0 0;
+  border-radius: var(--code-border-radius) var(--code-border-radius) 0 0;
 
   background: var(--code-title-c-bg);
   color: var(--code-title-c-text);
@@ -36,7 +36,7 @@
     color var(--vp-t-color);
 
   @media (max-width: 419px) {
-    margin: 0.75rem -1.5rem -0.75rem;
+    margin-block: 0.75rem -0.75rem;
     border-radius: 0;
   }
 }

tools/highlighter-helper/src/client/styles/notation-diff.scss

@@ -11,10 +11,13 @@
 div[class*='language-'] {
   .line.diff {
     display: inline-block;
+
     width: 100%;
     margin: 0 calc(-1 * var(--code-padding-x));
     padding: 0 var(--code-padding-x);
 
+    transition: background-color var(--vp-t-color);
+
     &::before {
       position: absolute;
       left: 10px;

tools/highlighter-helper/src/client/styles/notation-highlight.scss

@@ -15,4 +15,6 @@ div[class*='language-'] .line.highlighted {
   padding: 0 var(--code-padding-x);
 
   background-color: var(--code-c-highlight-bg);
+
+  transition: background-color var(--vp-t-color);
 }