chore: tweak

Author: pengzhanbo

docs/plugins/markdown/prismjs.md

@@ -405,7 +405,7 @@ body > div {
 - Type: `boolean | CodeBlockTitleRender`
 
   ```ts
-  type CodeBlockTitleRender = (title: string) => string
+  type CodeBlockTitleRender = (title: string, code: string) => string
   ```
 
 - Default: `true`
@@ -419,14 +419,14 @@ body > div {
   **Input:**
 
   ````md {1}
-  ```ts title="Code Block Title"
+  ```ts title="foo/baz.js"
   console.log('hello')
   ```
   ````
 
   **Output:**
 
-  ```ts title="Code Block Title"
+  ```ts title="foo/baz.js"
   console.log('hello')
   ```
 

docs/plugins/markdown/shiki.md

@@ -399,7 +399,7 @@ body > div {
 - Type: `boolean | CodeBlockTitleRender`
 
   ```ts
-  type CodeBlockTitleRender = (title: string) => string
+  type CodeBlockTitleRender = (title: string, code: string) => string
   ```
 
 - Default: `true`
@@ -413,14 +413,14 @@ body > div {
   **Input:**
 
   ````md {1}
-  ```ts title="Code Block Title"
+  ```ts title="foo/baz.js"
   console.log('hello')
   ```
   ````
 
   **Output:**
 
-  ```ts title="Code Block Title"
+  ```ts title="foo/baz.js"
   console.log('hello')
   ```
 

docs/zh/plugins/markdown/prismjs.md

@@ -405,7 +405,7 @@ body > div {
 - 类型：`boolean | CodeBlockTitleRender`
 
   ```ts
-  type CodeBlockTitleRender = (title: string) => string
+  type CodeBlockTitleRender = (title: string, code: string) => string
   ```
 
 - 默认值：`true`
@@ -419,14 +419,14 @@ body > div {
   **输入：**
 
   ````md {1}
-  ```ts title="代码块标题"
+  ```ts title="foo/baz.js"
   console.log('hello')
   ```
   ````
 
   **输出：**
 
-  ```ts title="代码块标题"
+  ```ts title="foo/baz.js"
   console.log('hello')
   ```
 

docs/zh/plugins/markdown/shiki.md

@@ -401,7 +401,7 @@ body > div {
 - 类型：`boolean | CodeBlockTitleRender`
 
   ```ts
-  type CodeBlockTitleRender = (title: string) => string
+  type CodeBlockTitleRender = (title: string, code: string) => string
   ```
 
 - 默认值：`true`
@@ -415,14 +415,14 @@ body > div {
   **输入：**
 
   ````md {1}
-  ```ts title="代码块标题"
+  ```ts title="foo/baz.js"
   console.log('hello')
   ```
   ````
 
   **输出：**
 
-  ```ts title="代码块标题"
+  ```ts title="foo/baz.js"
   console.log('hello')
   ```
 

plugins/markdown/plugin-prismjs/tests/__snapshots__/prismjs-preWrapper.spec.ts.snap

@@ -1,11 +1,7 @@
 :root {
-  --code-title-c-text: var(--vp-c-text);
-  --code-title-c-bg: var(--code-c-highlight-bg);
-  --code-title-bar-c-bg: var(--code-c-bg);
-}
-
-[data-theme='dark'] {
-  --code-title-c-bg: #181819;
+  --code-title-c-text: var(--vp-c-text-mute);
+  --code-title-c-bg: var(--code-c-bg);
+  --code-title-divider: var(--code-c-highlight-bg, var(--code-c-text));
 }
 
 .code-block-title {
@@ -18,11 +14,11 @@
     overflow-x: auto;
 
     margin: 0.75rem 0 -0.75rem;
-    padding: 0;
+    padding: 0 12px;
+    border-bottom: solid 1px var(--code-title-divider);
     border-radius: 6px 6px 0 0;
 
     background: var(--code-title-c-bg);
-    list-style: none;
 
     white-space: nowrap;
 
@@ -38,38 +34,16 @@
 
       display: inline-block;
 
-      min-width: 3rem;
       margin: 0;
-      padding: 6px 12px;
-      border-width: 0;
-      border-radius: 6px 6px 0 0;
+      padding: 8px 12px;
 
-      background: var(--code-title-bar-c-bg);
       color: var(--code-title-c-text);
 
-      font-weight: 600;
+      font-weight: 500;
       font-size: 0.875em;
-      line-height: 1.4;
+      line-height: 1.7;
 
       transition: background var(--vp-t-color);
-
-      &::after {
-        content: ' ';
-
-        position: absolute;
-        bottom: 0;
-        left: 100%;
-        z-index: 1;
-
-        width: 6px;
-        height: 6px;
-
-        background: radial-gradient(
-          12px at right top,
-          transparent 50%,
-          var(--code-c-bg) 50%
-        );
-      }
     }
   }
 }

plugins/markdown/plugin-shiki/tests/__snapshots__/shiki-preWrapper.spec.ts.snap

@@ -1,4 +1,4 @@
-export type CodeBlockTitleRender = (title: string) => string
+export type CodeBlockTitleRender = (title: string, code: string) => string
 
 export interface MarkdownItCodeBlockTitleOptions {
   /**

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

@@ -5,8 +5,13 @@ import type {
   MarkdownItCodeBlockTitleOptions,
 } from './options.js'
 
-const defaultTitleRender: CodeBlockTitleRender = (title: string) =>
-  `<div class="code-block-title-bar"><span class="title">${title}</span></div>`
+const defaultTitleRender: CodeBlockTitleRender = (title, code) =>
+  `<div class="code-block-title">
+  <div class="code-block-title-bar">
+    <span class="title" data-title="${title}">${title}</span>
+  </div>
+  ${code}
+</div>`
 
 export const codeBlockTitle = (
   md: Markdown,
@@ -31,6 +36,6 @@ export const codeBlockTitle = (
 
     if (!title) return rawCode
 
-    return `<div class="code-block-title">${titleRender(title)}${rawCode}</div>`
+    return titleRender(title, rawCode)
   }
 }