From 28359b95181ef0961ea8e5e0058319615f0a5f67 Mon Sep 17 00:00:00 2001
From: Mister-Hope <mister-hope@outlook.com>
Date: Mon, 27 May 2024 17:12:11 +0800
Subject: [PATCH] fix: fix preWrapper plugin (#157)

---
 .../src/node/markdown/preWrapperPlugin.ts     |  2 +-
 .../src/node/markdown/preWrapperPlugin.ts     | 25 ++++++++++++++++---
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/plugins/plugin-prismjs/src/node/markdown/preWrapperPlugin.ts b/plugins/plugin-prismjs/src/node/markdown/preWrapperPlugin.ts
index 4d64d3abc6..1300b060f6 100644
--- a/plugins/plugin-prismjs/src/node/markdown/preWrapperPlugin.ts
+++ b/plugins/plugin-prismjs/src/node/markdown/preWrapperPlugin.ts
@@ -11,7 +11,7 @@ export const preWrapperPlugin = (
   md.renderer.rules.fence = (...args) => {
     const result = rawFence(...args)
 
-    if (!preWrapper) {
+    if (!preWrapper || !result.startsWith('<pre')) {
       return result
     }
 
diff --git a/plugins/plugin-shiki/src/node/markdown/preWrapperPlugin.ts b/plugins/plugin-shiki/src/node/markdown/preWrapperPlugin.ts
index 6a371b5ada..f25c199690 100644
--- a/plugins/plugin-shiki/src/node/markdown/preWrapperPlugin.ts
+++ b/plugins/plugin-shiki/src/node/markdown/preWrapperPlugin.ts
@@ -11,6 +11,12 @@ export const preWrapperPlugin = (
   const rawFence = md.renderer.rules.fence!
 
   md.renderer.rules.fence = (...args) => {
+    let result = rawFence(...args)
+
+    if (!result.startsWith('<pre')) {
+      return result
+    }
+
     const [tokens, idx, options] = args
     const token = tokens[idx]
 
@@ -18,18 +24,29 @@ export const preWrapperPlugin = (
     const info = token.info ? md.utils.unescapeAll(token.info).trim() : ''
 
     const lang = resolveLanguage(info)
-    const title = resolveAttr(info, 'title') || lang
     const languageClass = `${options.langPrefix}${lang}`
 
-    let result = rawFence(...args)
-
     if (!preWrapper) {
-      // remove `<code>` attributes
+      /**
+       * remove `<code>` attributes
+       *
+       * In the source code of `markdown-it fence line 71, line 74`,
+       * `fence` writes `class="language-*"` onto the `code` element,
+       * whereas in past versions, `vuepress` wrote it on the `pre` element.
+       * Therefore, this behavior needs to be reset.
+       *
+       * Even though `shiki` directly returns the contents within `<pre>`
+       * at `line 48` of `markdown-it`, I believe it is still prudent to make this adjustment.
+       *
+       * @see https://github.com/markdown-it/markdown-it/blob/master/lib/renderer.mjs
+       */
       result = result.replace(/<code[^]*?>/, '<code>')
       result = `<pre class="${languageClass}"${result.slice('<pre'.length)}`
       return result
     }
 
+    const title = resolveAttr(info, 'title') || lang
+
     return `<div class="${languageClass}" data-ext="${lang}" data-title="${title}">${result}</div>`
   }
 }