fix: properly apply dark/light classes in code blocks (#1546)

src/node/markdown/plugins/highlight.ts

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