feat: add shiki/prismjs class names to differentiate highlight pl…

…ugins (#181) Co-authored-by: Mister-Hope <mister-hope@outlook.com>
vuepress · May 30, 2024 · 0ef4c98 · 0ef4c98
1 parent 3c4159b
commit 0ef4c98
Show file tree

Hide file tree

Showing 5 changed files with 131 additions and 130 deletions.
diff --git a/plugins/markdown/plugin-prismjs/src/node/markdown/highlightPlugin.ts b/plugins/markdown/plugin-prismjs/src/node/markdown/highlightPlugin.ts
@@ -55,11 +55,6 @@ export const highlightPlugin = (
       notationHighlight(parser)
     }
 
-    /**
-     * Add the `prismjs` class name to distinguish the highlight library used for the current code block.
-     */
-    parser.pre.classList.push('prismjs')
-
     parser.pre.classList.push(languageClass)
 
     return parser.stringify()

diff --git a/plugins/markdown/plugin-prismjs/src/node/markdown/preWrapperPlugin.ts b/plugins/markdown/plugin-prismjs/src/node/markdown/preWrapperPlugin.ts
@@ -27,6 +27,9 @@ export const preWrapperPlugin = (
     // resolve title from token info
     const title = resolveAttr(info, 'title') ?? language.ext
 
-    return `<div class="${languageClass}" data-ext="${language.ext}" data-title="${title}">${result}</div>`
+    /**
+     * Add information to dataset for current code block.
+     */
+    return `<div class="${languageClass}" data-highlighter="prismjs" data-ext="${language.ext}" data-title="${title}">${result}</div>`
   }
 }