feat: add shiki/prismjs class names to distinguish highlight library

vuepress · May 29, 2024 · ee77167 · ee77167
1 parent cc8f441
commit ee77167
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 the `prismjs` class name to distinguish the highlight library used for the current code block.
+     */
+    return `<div class="prismjs ${languageClass}" data-ext="${language.ext}" data-title="${title}">${result}</div>`
   }
 }