fix(build): use addClass from shiki-processor (#1557)

reverts #1546 (fixed in upstream)
fixes #1555

package.json

@@ -88,7 +88,6 @@
     "@vueuse/core": "^9.4.0",
     "body-scroll-lock": "4.0.0-beta.0",
     "shiki": "^0.11.1",
-    "shiki-processor": "^0.1.0",
     "vite": "^3.1.8",
     "vue": "^3.2.41"
   },
@@ -157,6 +156,7 @@
     "semver": "^7.3.8",
     "simple-git-hooks": "^2.8.1",
     "sirv": "^2.0.2",
+    "shiki-processor": "^0.1.1",
     "supports-color": "^9.2.3",
     "typescript": "~4.8.4",
     "vitest": "^0.24.3",

src/node/markdown/plugins/highlight.ts

@@ -1,12 +1,13 @@
-import { IThemeRegistration, HtmlRendererOptions } from 'shiki'
+import type { HtmlRendererOptions, IThemeRegistration } from 'shiki'
 import {
+  addClass,
   createDiffProcessor,
   createFocusProcessor,
   createHighlightProcessor,
   createRangeProcessor,
+  defineProcessor,
   getHighlighter,
-  Processor,
-  defineProcessor
+  type Processor
 } from 'shiki-processor'
 import type { ThemeOptions } from '../markdown'
 
@@ -68,7 +69,6 @@ export async function highlight(
     processors
   })
 
-  const classRE = /<pre[^>]*class="(.*?)"/
   const styleRE = /<pre[^>]*(style=".*?")/
   const preRE = /^<pre(.*?)>/
   const vueRE = /-vue$/
@@ -93,21 +93,29 @@ export async function highlight(
       )
     }
 
-    const dark = cleanup(
-      highlighter.codeToHtml(str, {
-        lang,
-        lineOptions,
-        theme: getThemeName(theme.dark)
-      })
-    ).replace(classRE, (_, cls) => _.replace(cls, 'vp-code-dark'))
+    const dark = addClass(
+      cleanup(
+        highlighter.codeToHtml(str, {
+          lang,
+          lineOptions,
+          theme: getThemeName(theme.dark)
+        })
+      ),
+      'vp-code-dark',
+      'pre'
+    )
 
-    const light = cleanup(
-      highlighter.codeToHtml(str, {
-        lang,
-        lineOptions,
-        theme: getThemeName(theme.light)
-      })
-    ).replace(classRE, (_, cls) => _.replace(cls, 'vp-code-light'))
+    const light = addClass(
+      cleanup(
+        highlighter.codeToHtml(str, {
+          lang,
+          lineOptions,
+          theme: getThemeName(theme.light)
+        })
+      ),
+      'vp-code-light',
+      'pre'
+    )
 
     return dark + light
   }