feat(markdown): add title support for code blocks (close #1277) (#1456)

Co-authored-by: meteorlxy <meteor.lxy@foxmail.com>

packages/markdown/src/plugins/codePlugin/codePlugin.ts

@@ -1,4 +1,5 @@
 import type { PluginWithOptions } from 'markdown-it'
+import { resolveAttr } from './resolveAttr.js'
 import {
   isHighlightLine,
   resolveHighlightLines,
@@ -27,7 +28,7 @@ export interface CodePluginOptions {
    *
    * - Required for `highlightLines`
    * - Required for `lineNumbers`
-   * - Required for language display of default theme
+   * - Required for title display of default theme
    */
   preWrapper?: boolean
 
@@ -130,9 +131,12 @@ export const codePlugin: PluginWithOptions<CodePluginOptions> = (
       result = `${result}<div class="line-numbers" aria-hidden="true">${lineNumbersCode}</div>`
     }
 
+    // resolve title from token info
+    const title = resolveAttr(info, 'title') ?? language.ext
+
     result = `<div class="${languageClass}${
       useLineNumbers ? ' line-numbers-mode' : ''
-    }" data-ext="${language.ext}">${result}</div>`
+    }" data-ext="${language.ext}" data-title="${title}">${result}</div>`
 
     return result
   }

packages/markdown/src/plugins/codePlugin/resolveAttr.ts

@@ -0,0 +1,12 @@
+/**
+ * Resolve the specified attribute from token info
+ */
+export const resolveAttr = (info: string, attr: string): string | null => {
+  // try to match specified attr mark
+  const pattern = `\\b${attr}\\s*=\\s*(?<quote>['"])(?<content>.+)\\k<quote>(\\s|$)`
+  const regex = new RegExp(pattern, 'i')
+  const match = info.match(regex)
+
+  // return content if matched, null if not specified
+  return match?.groups?.content ?? null
+}