feat(plugin-shiki): move <pre> style attr to preWrapper (#166)

vuepress · May 29, 2024 · 3942641 · 3942641
1 parent 816e6c8
commit 3942641
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 60 deletions.
diff --git a/plugins/plugin-shiki/src/node/markdown/preWrapperPlugin.ts b/plugins/plugin-shiki/src/node/markdown/preWrapperPlugin.ts
@@ -4,7 +4,7 @@ import type { Markdown } from 'vuepress/markdown'
 import type { PreWrapperOptions } from '../types.js'
 import { resolveAttr, resolveLanguage } from '../utils.js'
 
-const PRE_ATTRS_REGEXP = /<pre([\s\S]*?class="[^"]*")([^>]*)>/
+const PRE_ATTRS_REGEXP = /<pre([\s\S]*?)style="([^"]*)"([^>]*)>/
 
 export const preWrapperPlugin = (
   md: Markdown,
@@ -48,16 +48,16 @@ export const preWrapperPlugin = (
     }
 
     const title = resolveAttr(info, 'title') || lang
-    let attrs = ''
+    let styles = ''
 
     // before: maybe `v-pre class="shiki *"`
     // after: style="*" tab-index="*"
-    result = result.replace(PRE_ATTRS_REGEXP, (_, before, after) => {
-      attrs = after.trim()
+    result = result.replace(PRE_ATTRS_REGEXP, (_, before, style, after) => {
+      styles = style.trim()
       // Keep `v-pre class="*"`, remove the rest.
-      return `<pre${before.trimEnd()}>`
+      return `<pre ${before.trim()}${after.trimEnd()}>`
     })
 
-    return `<div class="${languageClass}" data-ext="${lang}" data-title="${title}" ${attrs}>${result}</div>`
+    return `<div class="${languageClass}" data-ext="${lang}" data-title="${title}" style="${styles}">${result}</div>`
   }
 }
diff --git a/plugins/plugin-shiki/src/node/transformers/getTransformers.ts b/plugins/plugin-shiki/src/node/transformers/getTransformers.ts
@@ -8,6 +8,7 @@ import type { ShikiTransformer } from 'shiki'
 import type { ShikiHighlightOptions } from '../types.js'
 import {
   addClassTransformer,
+  cleanupTransformer,
   emptyLineTransformer,
   removeEscapeTransformer,
 } from './vuepressTransformers.js'
@@ -40,6 +41,7 @@ export const getTransformers = (
 
   transformers.push(
     addClassTransformer,
+    cleanupTransformer,
     removeEscapeTransformer,
     emptyLineTransformer,
   )

diff --git a/plugins/plugin-shiki/src/node/transformers/vuepressTransformers.ts b/plugins/plugin-shiki/src/node/transformers/vuepressTransformers.ts
@@ -9,6 +9,13 @@ export const addClassTransformer: ShikiTransformer = {
   },
 }
 
+export const cleanupTransformer: ShikiTransformer = {
+  name: 'vuepress:cleanup',
+  pre(node) {
+    delete node.properties.tabindex
+  },
+}
+
 /**
  * This `transformer` is primarily for the usage instructions of themes.
  * When developers need to provide an example like `// [!code xxx]`,