From 178895f067e0f38e1c76d3efe64a75612cd4ad3a Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Thu, 27 Oct 2022 11:39:45 +0530
Subject: [PATCH] fix: properly apply dark/light classes in code blocks (#1546)

---
 src/node/markdown/plugins/highlight.ts | 40 +++++++++++---------------
 1 file changed, 16 insertions(+), 24 deletions(-)

diff --git a/src/node/markdown/plugins/highlight.ts b/src/node/markdown/plugins/highlight.ts
index aadd433813f..9f0c807c131 100644
--- a/src/node/markdown/plugins/highlight.ts
+++ b/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(
-      cleanup(
-        highlighter.codeToHtml(str, {
-          lang,
-          lineOptions,
-          theme: getThemeName(theme.dark)
-        })
-      ),
-      'vp-code-dark',
-      'pre'
-    )
+    const dark = cleanup(
+      highlighter.codeToHtml(str, {
+        lang,
+        lineOptions,
+        theme: getThemeName(theme.dark)
+      })
+    ).replace(classRE, (_, cls) => _.replace(cls, 'vp-code-dark'))
 
-    const light = addClass(
-      cleanup(
-        highlighter.codeToHtml(str, {
-          lang,
-          lineOptions,
-          theme: getThemeName(theme.light)
-        })
-      ),
-      'vp-code-light',
-      'pre'
-    )
+    const light = cleanup(
+      highlighter.codeToHtml(str, {
+        lang,
+        lineOptions,
+        theme: getThemeName(theme.light)
+      })
+    ).replace(classRE, (_, cls) => _.replace(cls, 'vp-code-light'))
 
     return dark + light
   }