Merge branch 'main' into plugin-git-component

Author: Mister-Hope

docs/package.json

@@ -40,7 +40,7 @@
     "@vueuse/core": "^12.7.0",
     "katex": "0.16.21",
     "mathjax-full": "3.2.2",
-    "sass-embedded": "^1.85.0",
+    "sass-embedded": "^1.85.1",
     "sass-loader": "^16.0.5",
     "vue": "^3.5.13",
     "vuepress": "catalog:"

docs/plugins/markdown/prismjs.md

@@ -400,6 +400,36 @@ body > div {
 }
 ```
 
+### codeBlockTitle
+
+- Type: `boolean | CodeBlockTitleRender`
+
+  ```ts
+  type CodeBlockTitleRender = (title: string, code: string) => string
+  ```
+
+- Default: `true`
+
+- Details: Whether to enable code block title rendering. Add `title="Title"` after the code block <code>\`\`\`</code> to set the title.
+
+  Pass `CodeBlockTitleRender` to customize the title rendering.
+
+- Example:
+
+  **Input:**
+
+  ````md {1}
+  ```ts title="foo/baz.js"
+  console.log('hello')
+  ```
+  ````
+
+  **Output:**
+
+  ```ts title="foo/baz.js"
+  console.log('hello')
+  ```
+
 ::: tip
 
 In the new version, some functionalities similar to [shiki](https://shiki.style/packages/transformers) have been implemented, allowing you to style code blocks using the same syntax.

docs/plugins/markdown/shiki.md

@@ -394,6 +394,36 @@ body > div {
 }
 ```
 
+### codeBlockTitle
+
+- Type: `boolean | CodeBlockTitleRender`
+
+  ```ts
+  type CodeBlockTitleRender = (title: string, code: string) => string
+  ```
+
+- Default: `true`
+
+- Details: Whether to enable code block title rendering. Add `title="Title"` after the code block <code>\`\`\`</code> to set the title.
+
+  Pass `CodeBlockTitleRender` to customize the title rendering.
+
+- Example:
+
+  **Input:**
+
+  ````md {1}
+  ```ts title="foo/baz.js"
+  console.log('hello')
+  ```
+  ````
+
+  **Output:**
+
+  ```ts title="foo/baz.js"
+  console.log('hello')
+  ```
+
 ### notationDiff
 
 - Type: `boolean`

docs/zh/plugins/markdown/prismjs.md

@@ -400,6 +400,36 @@ body > div {
 }
 ```
 
+### codeBlockTitle
+
+- 类型：`boolean | CodeBlockTitleRender`
+
+  ```ts
+  type CodeBlockTitleRender = (title: string, code: string) => string
+  ```
+
+- 默认值：`true`
+
+- 详情：是否启用代码块标题渲染。在代码块 <code>\`\`\`</code> 后面添加 `title="标题"` 来设置标题。
+
+  传入 `CodeBlockTitleRender` 以自定义标题渲染。
+
+- 示例：
+
+  **输入：**
+
+  ````md {1}
+  ```ts title="foo/baz.js"
+  console.log('hello')
+  ```
+  ````
+
+  **输出：**
+
+  ```ts title="foo/baz.js"
+  console.log('hello')
+  ```
+
 ::: tip
 
 在新的版本中，实现了类似于 [shiki](https://shiki.style/packages/transformers) 的部分功能，

docs/zh/plugins/markdown/shiki.md

@@ -396,6 +396,36 @@ body > div {
 }
 ```
 
+### codeBlockTitle
+
+- 类型：`boolean | CodeBlockTitleRender`
+
+  ```ts
+  type CodeBlockTitleRender = (title: string, code: string) => string
+  ```
+
+- 默认值：`true`
+
+- 详情：是否启用代码块标题渲染。在代码块 <code>\`\`\`</code> 后面添加 `title="标题"` 来设置标题。
+
+  传入 `CodeBlockTitleRender` 以自定义标题渲染。
+
+- 示例：
+
+  **输入：**
+
+  ````md {1}
+  ```ts title="foo/baz.js"
+  console.log('hello')
+  ```
+  ````
+
+  **输出：**
+
+  ```ts title="foo/baz.js"
+  console.log('hello')
+  ```
+
 ### notationDiff
 
 - 类型：`boolean`

e2e/package.json

@@ -30,7 +30,7 @@
     "@vuepress/plugin-theme-data": "workspace:*",
     "@vuepress/plugin-watermark": "workspace:*",
     "@vuepress/theme-default": "workspace:*",
-    "sass-embedded": "^1.85.0",
+    "sass-embedded": "^1.85.1",
     "sass-loader": "^16.0.5",
     "vue": "^3.5.13",
     "vuepress": "catalog:"

package.json

@@ -34,12 +34,12 @@
     "@commitlint/cli": "^19.7.1",
     "@commitlint/config-conventional": "^19.7.1",
     "@lerna-lite/cli": "^3.12.1",
-    "@lerna-lite/publish": "^3.12.1",
+    "@lerna-lite/publish": "^3.12.2",
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-node-resolve": "^16.0.0",
-    "@types/node": "^22.13.5",
+    "@types/node": "^22.13.9",
     "@types/webpack-env": "^1.18.8",
-    "@vitest/coverage-istanbul": "3.0.6",
+    "@vitest/coverage-istanbul": "3.0.7",
     "conventional-changelog-cli": "^5.0.0",
     "cpx2": "^8.0.0",
     "cross-env": "^7.0.3",
@@ -49,26 +49,26 @@
     "husky": "^9.1.7",
     "nano-staged": "^0.8.0",
     "postcss-html": "^1.8.0",
-    "prettier": "^3.5.2",
+    "prettier": "^3.5.3",
     "prettier-config-vuepress": "^5.0.0",
     "rimraf": "^6.0.1",
-    "rollup": "^4.34.8",
+    "rollup": "^4.34.9",
     "rollup-plugin-dts": "^6.1.1",
-    "rollup-plugin-esbuild": "^6.2.0",
+    "rollup-plugin-esbuild": "^6.2.1",
     "rollup-plugin-resolve-shebang": "^1.0.1",
-    "sass-embedded": "^1.85.0",
-    "sort-package-json": "^2.14.0",
-    "stylelint": "^16.14.1",
+    "sass-embedded": "^1.85.1",
+    "sort-package-json": "^2.15.1",
+    "stylelint": "^16.15.0",
     "stylelint-config-hope": "^8.0.0",
     "stylelint-config-html": "^1.1.0",
     "tsconfig-vuepress": "^5.2.1",
     "tsx": "^4.19.3",
-    "typescript": "^5.7.3",
+    "typescript": "^5.8.2",
     "vite": "~6.1.1",
-    "vitest": "3.0.6",
+    "vitest": "3.0.7",
     "vuepress": "catalog:"
   },
-  "packageManager": "pnpm@10.4.1",
+  "packageManager": "pnpm@10.5.2",
   "engines": {
     "node": "^18.19.0 || >= 20.6.0"
   },

plugins/markdown/plugin-prismjs/src/node/markdown/preWrapperPlugin.ts

@@ -1,5 +1,5 @@
 import type { Markdown } from 'vuepress/markdown'
-import { resolveAttr, resolveLanguage } from '../utils/index.js'
+import { resolveLanguage } from '../utils/index.js'
 
 export interface MarkdownItPreWrapperOptions {
   /**
@@ -33,12 +33,9 @@ export const preWrapperPlugin = (
     const language = resolveLanguage(info)
     const languageClass = `${langPrefix}${language.name}`
 
-    // resolve title from token info
-    const title = resolveAttr(info, 'title') ?? language.ext
-
     /**
      * Add information to dataset for current code block.
      */
-    return `<div class="${languageClass}" data-highlighter="prismjs" data-ext="${language.ext}" data-title="${title}">${result.replace(` class="${languageClass}"`, '')}</div>`
+    return `<div class="${languageClass}" data-highlighter="prismjs" data-ext="${language.ext}">${result.replace(` class="${languageClass}"`, '')}</div>`
   }
 }

plugins/markdown/plugin-prismjs/src/node/options.ts

@@ -1,4 +1,5 @@
 import type {
+  MarkdownItCodeBlockTitleOptions,
   MarkdownItCollapsedLinesOptions,
   MarkdownItLineNumbersOptions,
 } from '@vuepress/highlighter-helper'
@@ -11,7 +12,8 @@ import type { PrismjsHighlightOptions } from './types.js'
 /**
  * Options of @vuepress/plugin-prismjs
  */
-export type PrismjsPluginOptions = MarkdownItLineNumbersOptions &
+export type PrismjsPluginOptions = MarkdownItCodeBlockTitleOptions &
+  MarkdownItLineNumbersOptions &
   MarkdownItPreWrapperOptions &
   MarkdownItPrismjsHighlightOptions &
   Pick<MarkdownItCollapsedLinesOptions, 'collapsedLines'> &

plugins/markdown/plugin-prismjs/src/node/prepareClientConfigFile.ts

@@ -11,6 +11,7 @@ export const prepareClientConfigFile = (
     lineNumbers = true,
     highlightLines = true,
     collapsedLines = 'disable',
+    codeBlockTitle = true,
     notationDiff,
     notationErrorLevel,
     notationFocus,
@@ -88,6 +89,12 @@ export const prepareClientConfigFile = (
     setups.push('setupCollapsedLines()')
   }
 
+  if (codeBlockTitle) {
+    imports.push(
+      `import "${getModulePath('@vuepress/highlighter-helper/styles/code-block-title.css', import.meta)}"`,
+    )
+  }
+
   let code = imports.join('\n')
 
   if (setups.length) {

plugins/markdown/plugin-prismjs/src/node/prismjsPlugin.ts

@@ -1,4 +1,5 @@
 import {
+  codeBlockTitle as codeBlockTitlePlugin,
   collapsedLines as collapsedLinesPlugin,
   lineNumbers as lineNumbersPlugin,
 } from '@vuepress/highlighter-helper'
@@ -15,14 +16,21 @@ export const prismjsPlugin = (options: PrismjsPluginOptions = {}): Plugin => {
     preWrapper: true,
     lineNumbers: true,
     collapsedLines: false,
+    codeBlockTitle: true,
     ...options,
   }
 
   return {
     name: '@vuepress/plugin-prismjs',
 
     extendsMarkdown(md) {
-      const { preloadLanguages, preWrapper, lineNumbers, collapsedLines } = opt
+      const {
+        preloadLanguages,
+        preWrapper,
+        lineNumbers,
+        collapsedLines,
+        codeBlockTitle,
+      } = opt
 
       if (preloadLanguages?.length) {
         loadLanguages(preloadLanguages)
@@ -40,6 +48,8 @@ export const prismjsPlugin = (options: PrismjsPluginOptions = {}): Plugin => {
           md.use(lineNumbersPlugin, { lineNumbers, removeLastLine: true })
         if (collapsedLines !== 'disable')
           md.use(collapsedLinesPlugin, { collapsedLines, removeLastLine: true })
+
+        md.use(codeBlockTitlePlugin, { codeBlockTitle })
       }
     },
 

plugins/markdown/plugin-prismjs/src/node/utils/index.ts

@@ -1,4 +1,3 @@
 export * from './escapeRegExp.js'
 export * from './languages.js'
 export * from './resolveLanguage.js'
-export * from './resolveAttr.js'