diff --git a/docs/zh/plugins/markdown/revealjs/README.md b/docs/zh/plugins/markdown/revealjs/README.md
index 9aa052ff47..e7a16d69ce 100644
--- a/docs/zh/plugins/markdown/revealjs/README.md
+++ b/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
-
-```
-
-```
diff --git a/plugins/markdown/plugin-markdown-tab/src/client/styles/code-tabs.scss b/plugins/markdown/plugin-markdown-tab/src/client/styles/code-tabs.scss
index aad537eca8..6b558789d9 100644
--- a/plugins/markdown/plugin-markdown-tab/src/client/styles/code-tabs.scss
+++ b/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 {
diff --git a/plugins/markdown/plugin-markdown-tab/src/client/styles/tabs.scss b/plugins/markdown/plugin-markdown-tab/src/client/styles/tabs.scss
index 825928a597..c3690600da 100644
--- a/plugins/markdown/plugin-markdown-tab/src/client/styles/tabs.scss
+++ b/plugins/markdown/plugin-markdown-tab/src/client/styles/tabs.scss
@@ -1,16 +1,11 @@
+: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 {
@@ -18,7 +13,7 @@
 
   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);
 
diff --git a/plugins/markdown/plugin-revealjs/src/client/styles/reveal-js.scss b/plugins/markdown/plugin-revealjs/src/client/styles/reveal-js.scss
index 05d9c42de0..fe6fd489fa 100644
--- a/plugins/markdown/plugin-revealjs/src/client/styles/reveal-js.scss
+++ b/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 {
diff --git a/themes/theme-default/src/client/components/VPPage.vue b/themes/theme-default/src/client/components/VPPage.vue
index 3aae7e04f1..4cb316a2d4 100644
--- a/themes/theme-default/src/client/components/VPPage.vue
+++ b/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>
diff --git a/themes/theme-default/src/client/styles/content/code.scss b/themes/theme-default/src/client/styles/content/code.scss
index 532f87e4ac..3414d6a224 100644
--- a/themes/theme-default/src/client/styles/content/code.scss
+++ b/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;
     }
   }
 }
diff --git a/tools/highlighter-helper/src/client/styles/base.scss b/tools/highlighter-helper/src/client/styles/base.scss
index 919b21796f..fdb0cd9f80 100644
--- a/tools/highlighter-helper/src/client/styles/base.scss
+++ b/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;
+      }
     }
   }
 }
diff --git a/tools/highlighter-helper/src/client/styles/code-block-title.scss b/tools/highlighter-helper/src/client/styles/code-block-title.scss
index 9186d904d0..4da6d6db47 100644
--- a/tools/highlighter-helper/src/client/styles/code-block-title.scss
+++ b/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;
   }
 }
diff --git a/tools/highlighter-helper/src/client/styles/notation-diff.scss b/tools/highlighter-helper/src/client/styles/notation-diff.scss
index b602063680..232f6d15a1 100644
--- a/tools/highlighter-helper/src/client/styles/notation-diff.scss
+++ b/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;
diff --git a/tools/highlighter-helper/src/client/styles/notation-highlight.scss b/tools/highlighter-helper/src/client/styles/notation-highlight.scss
index 6d97bd6354..1909fdcfd4 100644
--- a/tools/highlighter-helper/src/client/styles/notation-highlight.scss
+++ b/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);
 }