From b722f0b4e0b5dd4aecdeb98a6c33451523da7509 Mon Sep 17 00:00:00 2001 From: Mister-Hope Date: Thu, 8 May 2025 15:09:06 +0800 Subject: [PATCH 1/3] fix: fix code block related style --- .../src/client/styles/code-tabs.scss | 46 ++----------------- .../src/client/styles/tabs.scss | 25 ++++------ .../src/client/styles/reveal-js.scss | 6 --- .../src/client/styles/content/code.scss | 41 +++++++++++------ .../src/client/styles/base.scss | 11 +++++ .../src/client/styles/code-block-title.scss | 4 +- .../src/client/styles/notation-diff.scss | 3 ++ .../src/client/styles/notation-highlight.scss | 2 + 8 files changed, 57 insertions(+), 81 deletions(-) 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/styles/content/code.scss b/themes/theme-default/src/client/styles/content/code.scss index 532f87e4ac..ea55aaf21f 100644 --- a/themes/theme-default/src/client/styles/content/code.scss +++ b/themes/theme-default/src/client/styles/content/code.scss @@ -1,23 +1,36 @@ @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); - +[vp-content] { @media (max-width: $MQMobileNarrow) { --code-border-radius: 0; + --tab-border-radius: 0; - margin: 0.75rem -1.5rem; - } + // code block + 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; + } + + // 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..20b75f03a1 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: 0.75rem 0; 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); } From 429c9186dee45281c5cf9c2d6a8f0df1dab317e4 Mon Sep 17 00:00:00 2001 From: Mister-Hope Date: Thu, 8 May 2025 15:19:51 +0800 Subject: [PATCH 2/3] fix: fix styles --- docs/zh/plugins/markdown/revealjs/README.md | 4 ---- .../src/client/components/VPPage.vue | 2 +- .../src/client/styles/content/code.scss | 17 ++++++++++++----- 3 files changed, 13 insertions(+), 10 deletions(-) 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/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<{
- +
diff --git a/themes/theme-default/src/client/styles/content/code.scss b/themes/theme-default/src/client/styles/content/code.scss index ea55aaf21f..3414d6a224 100644 --- a/themes/theme-default/src/client/styles/content/code.scss +++ b/themes/theme-default/src/client/styles/content/code.scss @@ -1,12 +1,13 @@ @use '../variables' as *; -[vp-content] { +#content { @media (max-width: $MQMobileNarrow) { --code-border-radius: 0; --tab-border-radius: 0; // code block - div[class*='language-'] { + > div[class*='language-'], + > .code-block-with-title > div[class*='language-'] { margin-inline: -1.5rem; } @@ -16,9 +17,15 @@ } // code tabs - > .vp-code-tabs .vp-code-tabs-nav { - margin-inline: -1.5rem; - border-radius: 0; + > .vp-code-tabs { + .vp-code-tabs-nav { + margin-inline: -1.5rem; + border-radius: 0; + } + + div[class*='language-'] { + margin-inline: -1.5rem; + } } // tabs From f14cc3e73b95dc826a2510f675ad7163f24eaca9 Mon Sep 17 00:00:00 2001 From: Mister-Hope Date: Thu, 8 May 2025 15:20:56 +0800 Subject: [PATCH 3/3] chore: tweaks --- tools/highlighter-helper/src/client/styles/base.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tools/highlighter-helper/src/client/styles/base.scss b/tools/highlighter-helper/src/client/styles/base.scss index 20b75f03a1..fdb0cd9f80 100644 --- a/tools/highlighter-helper/src/client/styles/base.scss +++ b/tools/highlighter-helper/src/client/styles/base.scss @@ -11,7 +11,7 @@ div[class*='language-'] { position: relative; - margin: 0.75rem 0; + margin-block: 0.75rem; border-radius: var(--code-border-radius); background-color: var(--code-c-bg);