fix(theme-yun): code-group & snippets & line-numbers

demo/yun/pages/posts/custom-block.md

@@ -1,47 +0,0 @@
----
-title: Custom Blocks Test
-categories:
-  - Test
----
-
-```md
-::: info
-This is an info box.
-:::
-
-::: tip
-This is a tip.
-:::
-
-::: warning
-This is a warning.
-:::
-
-::: danger
-This is a dangerous warning.
-:::
-
-::: details Details
-This is a details block.
-:::
-```
-
-::: info
-This is an info box.
-:::
-
-::: tip
-This is a tip.
-:::
-
-::: warning
-This is a warning.
-:::
-
-::: danger
-This is a dangerous warning.
-:::
-
-::: details Details
-This is a details block.
-:::

demo/yun/pages/posts/markdown.md

@@ -0,0 +1,411 @@
+---
+title: Markdown Extensions Test
+title_zh: Markdown 扩展测试
+categories:
+  - Test
+  - Markdown
+---
+
+::: tip
+
+More info see [Markdown Extensions](https://valaxy.site/guide/markdown).
+
+:::
+
+## Emoji :tada:
+
+**Input**
+
+```
+:tada: :100:
+```
+
+**Output**
+
+:tada: :100:
+
+A [list of all emojis](https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/full.json) is available.
+
+## Table of Contents
+
+**Input**
+
+```
+[[toc]]
+```
+
+**Output**
+
+[[toc]]
+
+Rendering of the TOC can be configured using the `markdown.toc` option.
+
+## 代码行高亮
+
+**Input**
+
+````
+```js{4}
+export default {
+  data () {
+    return {
+      msg: 'Highlighted!'
+    }
+  }
+}
+```
+````
+
+**Output**
+
+```js{4}
+export default {
+  data () {
+    return {
+      msg: 'Highlighted!'
+    }
+  }
+}
+```
+
+**Input**
+
+````md
+```ts {1}
+// line-numbers is disabled by default
+const line2 = 'This is line 2'
+const line3 = 'This is line 3'
+```
+
+```ts:line-numbers {1}
+// line-numbers is enabled
+const line2 = 'This is line 2'
+const line3 = 'This is line 3'
+```
+
+```ts:line-numbers=2 {1}
+// line-numbers is enabled and start from 2
+const line3 = 'This is line 3'
+const line4 = 'This is line 4'
+```
+````
+
+**Output**
+
+```ts {1}
+// line-numbers is disabled by default
+const line2 = 'This is line 2'
+const line3 = 'This is line 3'
+```
+
+```ts:line-numbers {1}
+// line-numbers is enabled
+const line2 = 'This is line 2'
+const line3 = 'This is line 3'
+```
+
+```ts:line-numbers=2 {1}
+// line-numbers is enabled and start from 2
+const line3 = 'This is line 3'
+const line4 = 'This is line 4'
+````
+
+## Colored Diffs in Code Blocks
+
+Adding the `// [!code --]` or `// [!code ++]` comments on a line will create a diff of that line, while keeping the colors of the codeblock.
+
+**Input**
+
+Note that only one space is required after `!code`, here are two to prevent processing.
+
+````
+```js
+export default {
+  data () {
+    return {
+      msg: 'Removed' // [!code  --]
+      msg: 'Added' // [!code  ++]
+    }
+  }
+}
+```
+````
+
+**Output**
+
+```js
+export default {
+  data() {
+    return {
+      msg: 'Removed', // [!code --]
+      msg: 'Added', // [!code ++]
+    }
+  }
+}
+```
+
+## Errors and Warnings in Code Blocks
+
+Adding the `// [!code warning]` or `// [!code error]` comments on a line will color it accordingly.
+
+**Input**
+
+Note that only one space is required after `!code`, here are two to prevent processing.
+
+````
+```js
+export default {
+  data () {
+    return {
+      msg: 'Error', // [!code  error]
+      msg: 'Warning' // [!code  warning]
+    }
+  }
+}
+```
+````
+
+**Output**
+
+```js
+export default {
+  data() {
+    return {
+      msg: 'Error', // [!code error]
+      msg: 'Warning' // [!code warning]
+    }
+  }
+}
+```
+
+## Import Code Snippets
+
+You can import code snippets from existing files via following syntax:
+
+```md
+<<< @/filepath
+```
+
+It also supports [line highlighting](#line-highlighting-in-code-blocks):
+
+```md
+<<< @/filepath{highlightLines}
+```
+
+**Input**
+
+```md
+<<< @/snippets/snippet.js{2}
+```
+
+**Code file**
+
+<<< @/snippets/snippet.js
+
+**Output**
+
+<<< @/snippets/snippet.js
+
+::: tip
+The value of `@` corresponds to the source root. By default it's the blog root, unless `srcDir` is configured. Alternatively, you can also import from relative paths:
+
+```md
+<<< ../snippets/snippet.js
+```
+
+:::
+
+You can also use a [VS Code region](https://code.visualstudio.com/docs/editor/codebasics#_folding) to only include the corresponding part of the code file. You can provide a custom region name after a `#` following the filepath:
+
+**Input**
+
+```md
+<<< @/snippets/snippet-with-region.js#snippet{1}
+```
+
+**Code file**
+
+<<< @/snippets/snippet-with-region.js
+
+**Output**
+
+<<< @/snippets/snippet-with-region.js#snippet{1}
+
+You can also specify the language inside the braces (`{}`) like this:
+
+```md
+<<< @/snippets/snippet.cs{c#}
+
+<!-- with line highlighting: -->
+
+<<< @/snippets/snippet.cs{1,2,4-6 c#}
+
+<!-- with line numbers: -->
+
+<<< @/snippets/snippet.cs{1,2,4-6 c#:line-numbers}
+```
+
+This is helpful if source language cannot be inferred from your file extension.
+
+## Code Groups
+
+You can group multiple code blocks like this:
+
+**Input**
+
+````md
+::: code-group
+
+```js [config.js]
+/**
+ * @type {import('vitepress').UserConfig}
+ */
+const config = {
+  // ...
+}
+
+export default config
+```
+
+```ts [config.ts]
+import type { UserConfig } from 'vitepress'
+
+const config: UserConfig = {
+  // ...
+}
+
+export default config
+```
+
+:::
+````
+
+**Output**
+
+::: code-group
+
+```js [config.js]
+/**
+ * @type {import('vitepress').UserConfig}
+ */
+const config = {
+  // ...
+}
+
+export default config
+```
+
+```ts [config.ts]
+import type { UserConfig } from 'vitepress'
+
+const config: UserConfig = {
+  // ...
+}
+
+export default config
+```
+
+:::
+
+You can also [import snippets](#import-code-snippets) in code groups:
+
+**Input**
+
+```md
+::: code-group
+
+<!-- filename is used as title by default -->
+
+<<< @/snippets/snippet.js
+
+<!-- you can provide a custom one too -->
+
+<<< @/snippets/snippet-with-region.js#snippet{1,2 ts:line-numbers} [snippet with region]
+
+:::
+```
+
+**Output**
+
+::: code-group
+
+<<< @/snippets/snippet.js
+
+<<< @/snippets/snippet-with-region.js#snippet{1,2 ts:line-numbers} [snippet with region]
+
+:::
+
+## Container
+
+::: zh-CN
+
+通过对 `markdownIt` 进行配置，你可以自由设置自定义块区域的文字以及图标及图标的颜色。
+
+:::
+
+::: en
+
+By configuring `markdownIt`, you can set the text and icon (and its color) for
+custom block.
+
+:::
+
+::: tip
+
+tip
+
+:::
+
+::: warning
+
+warning
+
+:::
+
+::: danger
+
+danger
+
+:::
+
+::: info
+
+info
+
+:::
+
+::: details Click to expand
+
+details
+
+:::
+
+## KaTeX
+
+**Input**
+
+```md
+When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are
+$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
+
+**Maxwell's equations:**
+
+| equation                                                                                                                                                                  | description                                                                            |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
+| $\nabla \cdot \vec{\mathbf{B}}  = 0$                                                                                                                                      | divergence of $\vec{\mathbf{B}}$ is zero                                               |
+| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t}  = \vec{\mathbf{0}}$                                                          | curl of $\vec{\mathbf{E}}$ is proportional to the rate of change of $\vec{\mathbf{B}}$ |
+| $\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}}    \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _wha?_                                                                                 |
+```
+
+**Output**
+
+When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are
+$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
+
+**Maxwell's equations:**
+
+| equation                                                                                                                                                                  | description                                                                            |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
+| $\nabla \cdot \vec{\mathbf{B}}  = 0$                                                                                                                                      | divergence of $\vec{\mathbf{B}}$ is zero                                               |
+| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t}  = \vec{\mathbf{0}}$                                                          | curl of $\vec{\mathbf{E}}$ is proportional to the rate of change of $\vec{\mathbf{B}}$ |
+| $\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}}    \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _wha?_                                                                                 |

demo/yun/snippets/init.ansi

@@ -0,0 +1,16 @@
+┌  Welcome to VitePress!
+│
+◇  Where should VitePress initialize the config?
+│  ./docs
+│
+◇  Site title:
+│  My Awesome Project
+│
+◇  Site description:
+│  A VitePress Site
+│
+◆  Theme:
+│  ● Default Theme (Out of the box, good-looking docs)
+│  ○ Default Theme + Customization
+│  ○ Custom Theme
+└

demo/yun/snippets/snippet-with-region.js

@@ -0,0 +1,7 @@
+// #region snippet
+function foo() {
+  // ..
+}
+// #endregion snippet
+
+export default foo

demo/yun/snippets/snippet.js

@@ -0,0 +1,3 @@
+export default function () {
+  // ..
+}

docs/pages/guide/markdown.md

@@ -416,4 +416,3 @@ $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
 | $\nabla \cdot \vec{\mathbf{B}}  = 0$                                                                                                                                      | divergence of $\vec{\mathbf{B}}$ is zero                                               |
 | $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t}  = \vec{\mathbf{0}}$                                                          | curl of $\vec{\mathbf{E}}$ is proportional to the rate of change of $\vec{\mathbf{B}}$ |
 | $\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}}    \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _wha?_                                                                                 |
-

packages/valaxy-theme-yun/styles/common/markdown.scss

@@ -65,3 +65,31 @@
     background-color: var(--va-c-text);
   }
 }
+
+.markdown-body {
+  div[class*='language-'].line-numbers-mode {
+    /*rtl:ignore*/
+    padding-left: 32px;
+  }
+
+  .line-numbers-wrapper {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    /*rtl:ignore*/
+    left: 0;
+    z-index: 3;
+    /*rtl:ignore*/
+    border-right: 1px solid var(--va-code-block-divider-color);
+    padding-top: 20px;
+    width: 32px;
+    text-align: center;
+    font-family: var(--va-font-family-mono);
+    line-height: var(--va-code-line-height);
+    font-size: var(--va-code-font-size);
+    color: var(--va-code-line-number-color);
+    transition:
+      border-color 0.5s,
+      color 0.5s;
+  }
+}

packages/valaxy-theme-yun/styles/components/custom-block.scss

@@ -1 +0,0 @@
-@use 'valaxy/client/styles/components/custom-block.scss' as *;

packages/valaxy-theme-yun/styles/index.scss

@@ -9,4 +9,5 @@
 
 // override the default style of star-markdown-css
 @use "./common/markdown.scss" as *;
-@use './components/custom-block.scss' as *;
+@use 'valaxy/client/styles/components/code-group.scss' as *;
+@use 'valaxy/client/styles/components/custom-block.scss' as *;

packages/valaxy/client/styles/common/code.scss

@@ -41,64 +41,64 @@ html:not(.dark) .vp-code-dark {
     position: relative;
     background-color: var(--va-code-block-bg);
     overflow-x: auto;
-
-    code {
-      padding: 0 24px;
-      line-height: var(--va-code-line-height);
-      font-size: var(--va-code-font-size);
-      color: var(--va-code-block-color);
-      transition: color 0.5s;
-      width: fit-content;
-
-      text-align: left;
-      white-space: pre;
-      word-spacing: normal;
-      word-break: normal;
-      word-wrap: normal;
-      -moz-tab-size: 4;
-      -o-tab-size: 4;
-      tab-size: 4;
-      -webkit-hyphens: none;
-      -moz-hyphens: none;
-      -ms-hyphens: none;
-      hyphens: none;
-    }
-
-    pre {
-      position: relative;
-      z-index: 1;
-      margin: 0;
-      padding: 20px 0;
-      background: transparent;
-      overflow-x: auto;
-
-      // expand
-      code {
-        display: block;
-      }
-    }
   }
 }
 
-// marker
 .markdown-body {
-  .highlight-lines {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    padding: 20px 0;
-    width: 100%;
-    line-height: var(--va-code-line-height);
-    font-family: var(--va-font-mono);
-    font-size: var(--va-code-font-size);
-    user-select: none;
-    overflow: hidden;
+  [class*='language-'] pre,
+  [class*='language-'] code {
+    /*rtl:ignore*/
+    direction: ltr;
+    /*rtl:ignore*/
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+  }
 
-    .highlighted {
-      background-color: var(--va-code-line-highlight-color);
-      transition: background-color 0.5s;
-    }
+  [class*='language-'] pre {
+    position: relative;
+    z-index: 1;
+    margin: 0;
+    padding: 20px 0;
+    background: transparent;
+    overflow-x: auto;
+  }
+
+  [class*='language-'] code {
+    display: block;
+    padding: 0 24px;
+    width: fit-content;
+    min-width: 100%;
+    line-height: var(--va-code-line-height);
+    font-size: var(--va-code-font-size);
+    color: var(--va-code-block-color);
+    transition: color 0.5s;
+  }
+
+  [class*='language-'] code .highlighted {
+    background-color: var(--va-code-line-highlight-color);
+    transition: background-color 0.5s;
+    margin: 0 -24px;
+    padding: 0 24px;
+    width: calc(100% + 2 * 24px);
+    display: inline-block;
+  }
+
+  [class*='language-'] code .highlighted.error {
+    background-color: var(--va-code-line-error-color);
+  }
+
+  [class*='language-'] code .highlighted.warning {
+    background-color: var(--va-code-line-warning-color);
   }
 
   // copy

packages/valaxy/client/styles/common/markdown.scss

@@ -23,13 +23,34 @@
     }
   }
 
+  // custom block
   .custom-block {
     margin: 16px 0;
 
+    p {
+      margin: 8px 0;
+      line-height: 24px;
+    }
+
     p:first-child {
       margin: 0;
     }
   }
+
+  .custom-block div[class*='language-'] {
+    margin: 8px 0;
+    border-radius: 8px;
+  }
+
+  .custom-block div[class*='language-'] code {
+    font-weight: 400;
+    background-color: transparent;
+  }
+
+  .custom-block .vp-code-group .tabs {
+    margin: 0;
+    border-radius: 8px 8px 0 0;
+  }
 }
 
 

packages/valaxy/client/styles/components/code-group.scss

@@ -0,0 +1,85 @@
+.vp-code-group {
+  margin-top: 16px;
+}
+
+.vp-code-group .tabs {
+  position: relative;
+  display: flex;
+  margin-right: -24px;
+  margin-left: -24px;
+  padding: 0 12px;
+  background-color: var(--va-code-tab-bg);
+  overflow-x: auto;
+  overflow-y: hidden;
+  box-shadow: inset 0 -1px var(--va-code-tab-divider);
+}
+
+@media (min-width: 640px) {
+  .vp-code-group .tabs {
+    margin-right: 0;
+    margin-left: 0;
+    border-radius: 8px 8px 0 0;
+  }
+}
+
+.vp-code-group .tabs input {
+  position: fixed;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.vp-code-group .tabs label {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px solid transparent;
+  padding: 0 12px;
+  line-height: 48px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--va-code-tab-text-color);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color 0.25s;
+}
+
+.vp-code-group .tabs label::after {
+  position: absolute;
+  right: 8px;
+  bottom: -1px;
+  left: 8px;
+  z-index: 1;
+  height: 2px;
+  border-radius: 2px;
+  content: '';
+  background-color: transparent;
+  transition: background-color 0.25s;
+}
+
+.vp-code-group label:hover {
+  color: var(--va-code-tab-hover-text-color);
+}
+
+.vp-code-group input:checked + label {
+  color: var(--va-code-tab-active-text-color);
+}
+
+.vp-code-group input:checked + label::after {
+  background-color: var(--va-code-tab-active-bar-color);
+}
+
+.vp-code-group div[class*='language-'],
+.vp-block {
+  display: none;
+  margin-top: 0 !important;
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+}
+
+.vp-code-group div[class*='language-'].active,
+.vp-block.active {
+  display: block;
+}
+
+.vp-block {
+  padding: 20px 24px;
+}

packages/valaxy/client/styles/components/custom-block.scss

@@ -170,7 +170,7 @@
 .custom-block a {
   color: inherit;
   font-weight: 600;
-  text-decoration: underline;
+  // text-decoration: underline;
   text-underline-offset: 2px;
   transition: opacity 0.25s;
 }

packages/valaxy/client/styles/css-vars.scss

@@ -10,6 +10,7 @@ $c-primary: #0078e7 !default;
   )
 );
 
+@use './css-vars/borders.css' as *;
 @use './css-vars/palette.css' as *;
 @use './css-vars/function.css' as *;
 
@@ -73,7 +74,16 @@ $c-primary: #0078e7 !default;
   --va-code-lang-color: var(--va-c-text-3);
 
   --va-code-line-highlight-color: var(--va-c-default-soft);
-  --va-code-line-number-color: var(--va-c-text-dark-3);
+  --va-code-line-number-color: var(--va-c-text-3);
+
+  --va-code-line-diff-add-color: var(--va-c-green-soft);
+  --va-code-line-diff-add-symbol-color: var(--va-c-green-1);
+
+  --va-code-line-diff-remove-color: var(--va-c-red-soft);
+  --va-code-line-diff-remove-symbol-color: var(--va-c-red-1);
+
+  --va-code-line-warning-color: var(--va-c-yellow-soft);
+  --va-code-line-error-color: var(--va-c-red-soft);
 
   // copy
   --va-code-copy-code-border-color: var(--va-c-divider);
@@ -82,6 +92,14 @@ $c-primary: #0078e7 !default;
   --va-code-copy-code-hover-bg: var(--va-c-bg);
   --va-code-copy-code-active-text: var(--va-c-text-2);
   --va-code-copy-copied-text-content: 'Copied';
+
+  // code-group
+  --va-code-tab-divider: var(--va-code-block-divider-color);
+  --va-code-tab-text-color: var(--va-c-text-2);
+  --va-code-tab-bg: var(--va-code-block-bg);
+  --va-code-tab-hover-text-color: var(--va-c-text-1);
+  --va-code-tab-active-text-color: var(--va-c-text-1);
+  --va-code-tab-active-bar-color: var(--va-c-brand-1);
 }
 
 .dark {