Merge pull request #1184 from DoubleW2w/feature/add-codeblock-title

Feat(code_block_title): 添加代码块标题插件及相关设置

Author: obgnail

plugin/fence_enhance/index.js

@@ -32,6 +32,9 @@ class FenceEnhancePlugin extends BasePlugin {
     if (this.config.HIGHLIGHT_BY_LANGUAGE) {
       new HighlightHelper(this).process()
     }
+    if (this.config.ENABLE_CODE_TITLE) {
+      codeTitle(this)
+    }
     if (this.config.ENABLE_LANGUAGE_FOLD) {
       await foldLanguage(this)
     }
@@ -416,6 +419,42 @@ const visibleTabs = ({ utils }) => {
   utils.insertStyleFile("fence-enhance-visible-tabs", "./plugin/fence_enhance/resource/visible-tabs.css")
 }
 
+const codeTitle = ({ utils }) => {
+  const className = "plugin-code-title"
+  const REGEX = /.+?\s+title="([^"]+)"/
+
+  const rerender = (cid) => {
+    if (!cid) return
+    const fence = document.querySelector(`.md-fences[cid="${cid}"]`)
+    if (!fence) return
+
+    let barEl = fence.querySelector(`.${className}`)
+    const title = fence.getAttribute("lang")?.match(REGEX)?.[1]
+    if (!title) {
+      barEl?.remove()
+    } else {
+      if (!barEl) {
+        barEl = document.createElement("div")
+        barEl.className = className
+        fence.prepend(barEl)
+      }
+      barEl.textContent = title
+    }
+  }
+
+  utils.insertStyle("plugin-fence-enhance-code-title",
+    `.md-fences .${className} {
+      padding: 6px 14px;
+      border-bottom: 1px solid var(--code-title-border, #d0d0d0);
+      margin-bottom: 6px;
+      color: var(--code-title-text, currentColor);
+      user-select: none;
+  }`)
+
+  utils.eventHub.addEventListener(utils.eventHub.eventType.afterAddCodeBlock, cid => rerender(cid))
+  utils.eventHub.addEventListener(utils.eventHub.eventType.afterUpdateCodeBlockLang, ([node] = []) => rerender(node?.cid))
+}
+
 // doc: https://codemirror.net/5/doc/manual.html
 class EditorHotkeyHelper {
   constructor(plugin) {

plugin/global/locales/en.json

@@ -715,12 +715,14 @@
     "$label.HIGHLIGHT_LINE_COLOR_ON_HOVER": "Hover Background Color",
     "$label.HIGHLIGHT_ON_FOCUS": "Highlight on Focus",
     "$label.HIGHLIGHT_LINE_COLOR_ON_FOCUS": "Focus Background Color",
+    "$label.ENABLE_CODE_TITLE": "Code Title",
     "$title.buttonGeneral": "Button",
     "$title.functionButtons": "Function Buttons",
     "$title.buttonHotkeys": "Code Block Hotkeys",
     "$title.lineHighlighting": "Line Highlighting",
     "$tooltip.viewCodeMirrorKeymapsManual": "CodeMirror keymaps reference",
-    "$tooltip.viewVitePressLineHighlighting": "VitePress syntax reference",
+    "$tooltip.viewVitePressLineHighlighting": "Syntax reference",
+    "$tooltip.viewVuePressCodeTitle": "Syntax reference",
     "$tooltip.viewFocusLineHighlightingEffect": "Preview effect",
     "$tooltip.viewSideBySideEffect": "Preview effect",
     "$tooltip.viewVisibleTabsEffect": "Preview effect",

plugin/global/locales/zh-CN.json

@@ -715,12 +715,14 @@
     "$label.HIGHLIGHT_LINE_COLOR_ON_HOVER": "高亮背景色",
     "$label.HIGHLIGHT_ON_FOCUS": "光标聚焦高亮",
     "$label.HIGHLIGHT_LINE_COLOR_ON_FOCUS": "高亮背景色",
+    "$label.ENABLE_CODE_TITLE": "代码标题",
     "$title.buttonGeneral": "按钮",
     "$title.functionButtons": "功能按钮",
     "$title.buttonHotkeys": "代码块快捷键",
     "$title.lineHighlighting": "行高亮",
     "$tooltip.viewCodeMirrorKeymapsManual": "CodeMirror 风格的快捷键",
     "$tooltip.viewVitePressLineHighlighting": "行高亮语法",
+    "$tooltip.viewVuePressCodeTitle": "代码标题语法",
     "$tooltip.viewFocusLineHighlightingEffect": "查看效果",
     "$tooltip.viewSideBySideEffect": "查看效果",
     "$tooltip.viewVisibleTabsEffect": "查看效果",

plugin/global/locales/zh-TW.json

@@ -715,12 +715,14 @@
     "$label.HIGHLIGHT_LINE_COLOR_ON_HOVER": "高亮背景色",
     "$label.HIGHLIGHT_ON_FOCUS": "游標聚焦高亮",
     "$label.HIGHLIGHT_LINE_COLOR_ON_FOCUS": "高亮背景色",
+    "$label.ENABLE_CODE_TITLE": "程式碼區塊標題",
     "$title.buttonGeneral": "按鈕",
     "$title.functionButtons": "功能按鈕",
     "$title.buttonHotkeys": "程式碼區塊快捷鍵",
     "$title.lineHighlighting": "行高亮",
     "$tooltip.viewCodeMirrorKeymapsManual": "CodeMirror 風格的快捷鍵",
     "$tooltip.viewVitePressLineHighlighting": "行高亮語法",
+    "$tooltip.viewVuePressCodeTitle": "程式碼區塊標題語法",
     "$tooltip.viewFocusLineHighlightingEffect": "查看效果",
     "$tooltip.viewSideBySideEffect": "查看效果",
     "$tooltip.viewVisibleTabsEffect": "查看效果",

plugin/global/settings/settings.default.toml

@@ -1230,6 +1230,11 @@ HIGHLIGHT_ON_FOCUS = false
 # Highlight line background color on cursor focus
 HIGHLIGHT_LINE_COLOR_ON_FOCUS = "rgba(142, 150, 170, 0.14)"
 
+# =========== [ Code Title ] ===========
+# Enable code title
+# See: https://vuepress.vuejs.org/guide/markdown.html#code-blocks
+ENABLE_CODE_TITLE = false
+
 # =========== [ Advanced ] ===========
 # Auto-align wrapped lines: Maintain proper indentation for long, wrapped text lines. Note: High rendering performance cost
 # See: https://github.com/codemirror/codemirror5/issues/2085

plugin/preferences/actions.js

@@ -17,6 +17,7 @@ module.exports = (plugin) => {
     viewMarkdownlintRules: openUrl("https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md"),
     viewCodeMirrorKeymapsManual: openUrl("https://codemirror.net/5/doc/manual.html#keymaps"),
     viewVitePressLineHighlighting: openUrl(`https://vitepress.dev/${i18n.locale === "zh-CN" ? "zh/" : ""}guide/markdown#line-highlighting-in-code-blocks`),
+    viewVuePressCodeTitle: openUrl("https://vuepress.vuejs.org/guide/markdown.html#code-title"),
     viewFocusLineHighlightingEffect: openUrl("https://codemirror.net/5/demo/activeline.html"),
     viewAbcVisualOptionsManual: openUrl("https://docs.abcjs.net/visual/render-abc-options.html"),
     viewVisibleTabsEffect: openUrl("https://codemirror.net/5/demo/visibletabs.html"),

plugin/preferences/schemas.js

@@ -590,6 +590,7 @@ const schema_fence_enhance = () => [
     Switch("HIGHLIGHT_ON_HOVER"),
     Text("HIGHLIGHT_LINE_COLOR_ON_HOVER").ShowIf(When.true("HIGHLIGHT_ON_HOVER")),
   ),
+  Switch("ENABLE_CODE_TITLE").ActionTooltip("viewVuePressCodeTitle"),
   Group("advanced",
     Switch("SIDE_BY_SIDE_VIEW").Tooltip("stylisticConfusion").ActionTooltip("viewSideBySideEffect"),
     Switch("VISIBLE_TABS").ActionTooltip("viewVisibleTabsEffect"),