Repository: vuepress/vuepress-next
Pull request #1132 (2022-10-17 05:32:43)

feat(markdown): make ext as attr instead of class
This change make it possible to support ext marker automatically:



Patch:
diff --git a/docs/reference/node-api.md b/docs/reference/node-api.md
index 39ba934b..84d0e658 100644
--- a/docs/reference/node-api.md
+++ b/docs/reference/node-api.md
@@ -25,7 +25,7 @@ const createBuildApp: (config: AppConfig) => BuildApp
 - Parameters:
 
 | Parameter | Type        | Description                      |
-|-----------|-------------|----------------------------------|
+| --------- | ----------- | -------------------------------- |
 | config    | `AppConfig` | Config to create a VuePress app. |
 
 - Details:
@@ -66,7 +66,7 @@ const createDevApp: (config: AppConfig) => DevApp
 - Parameters:
 
 | Parameter | Type        | Description                      |
-|-----------|-------------|----------------------------------|
+| --------- | ----------- | -------------------------------- |
 | config    | `AppConfig` | Config to create a VuePress app. |
 
 - Details:
@@ -187,6 +187,7 @@ const dev = async () => {
 ### dir
 
 - Utils:
+
   - `dir.cache()`: resolve to cache directory
   - `dir.temp()`: resolve to temp directory
   - `dir.source()`: resolve to source directory
@@ -223,10 +224,10 @@ writeTemp(file: string, content: string): Promise<string>
 
 - Parameters:
 
-| Parameter | Type     | Description                                                                   |
-|-----------|----------|-------------------------------------------------------------------------------|
-| file      | `string` | Filepath of the temp file that going to be wrote. Relative to temp directory. |
-| content   | `string` | Content of the temp file that going to be wrote.                              |
+| Parameter | Type     | Description                                                                     |
+| --------- | -------- | ------------------------------------------------------------------------------- |
+| file      | `string` | Filepath of the temp file that going to be written. Relative to temp directory. |
+| content   | `string` | Content of the temp file that going to be written.                              |
 
 - Details:
 
@@ -237,11 +238,11 @@ writeTemp(file: string, content: string): Promise<string>
 - Example:
 
 ```ts
-export default  {
+export default {
   // write temp file in onPrepared hook
   async onPrepared() {
-    await app.writeTemp('foo.js', 'export const foo = \'bar\'')
-  }
+    await app.writeTemp('foo.js', "export const foo = 'bar'")
+  },
 }
 ```
 
@@ -328,10 +329,10 @@ const createPage: (app: App, options: PageOptions) => Promise<Page>
 
 - Parameters:
 
-| Parameter | Type          | Description                       |
-|-----------|---------------|-----------------------------------|
-| app       | `App`         | The VuePress app instance.        |
-| options   | `PageOptions` | Options to create VuePress page.  |
+| Parameter | Type          | Description                      |
+| --------- | ------------- | -------------------------------- |
+| app       | `App`         | The VuePress app instance.       |
+| options   | `PageOptions` | Options to create VuePress page. |
 
 - Details:
 
@@ -342,7 +343,7 @@ const createPage: (app: App, options: PageOptions) => Promise<Page>
 ```ts
 import { createPage } from '@vuepress/core'
 
-export default  {
+export default {
   // create an extra page in onInitialized hook
   async onInitialized(app) {
     app.pages.push(
@@ -413,6 +414,7 @@ Hello, world.
   Language of the page.
 
 - Example:
+
   - `'en-US'`
   - `'zh-CN'`
 
@@ -525,6 +527,7 @@ interface PageData {
   Date of the page, in 'yyyy-MM-dd' format.
 
 - Example:
+
   - `'0000-00-00'`
   - `'2021-08-16`'
 
@@ -573,6 +576,7 @@ interface MarkdownLink {
   It would be `null` if the page does not come from a Markdown source file.
 
 - Example:
+
   - `'/'`
   - `'/foo.html'`
 
@@ -591,6 +595,7 @@ interface MarkdownLink {
   It is inferred from the relative file path of the Markdown source file and the key of `locales` option in user config.
 
 - Example:
+
   - `'/'`
   - `'/en/'`
   - `'/zh/'`
diff --git a/ecosystem/plugin-search/src/client/composables/useSearchIndex.ts b/ecosystem/plugin-search/src/client/composables/useSearchIndex.ts
index 2e757157..242251b2 100644
--- a/ecosystem/plugin-search/src/client/composables/useSearchIndex.ts
+++ b/ecosystem/plugin-search/src/client/composables/useSearchIndex.ts
@@ -9,7 +9,7 @@ export const searchIndex: SearchIndexRef = ref(searchIndexRaw)
 
 export const useSearchIndex = (): SearchIndexRef => searchIndex
 
-if (import.meta.webpackHot || import.meta.hot) {
+if (__VUEPRESS_DEV__ && (import.meta.webpackHot || import.meta.hot)) {
   __VUE_HMR_RUNTIME__.updateSearchIndex = (data: SearchIndex) => {
     searchIndex.value = data
   }
diff --git a/ecosystem/plugin-theme-data/src/client/composables/useThemeData.ts b/ecosystem/plugin-theme-data/src/client/composables/useThemeData.ts
index a7980885..7e7c3474 100644
--- a/ecosystem/plugin-theme-data/src/client/composables/useThemeData.ts
+++ b/ecosystem/plugin-theme-data/src/client/composables/useThemeData.ts
@@ -13,7 +13,7 @@ export const useThemeData = <
   T extends ThemeData = ThemeData
 >(): ThemeDataRef<T> => themeData as ThemeDataRef<T>
 
-if (import.meta.webpackHot || import.meta.hot) {
+if (__VUEPRESS_DEV__ && (import.meta.webpackHot || import.meta.hot)) {
   __VUE_HMR_RUNTIME__.updateThemeData = (data: ThemeData) => {
     themeData.value = data
   }
diff --git a/ecosystem/theme-default/src/client/styles/_variables.scss b/ecosystem/theme-default/src/client/styles/_variables.scss
index e3350532..c29df602 100644
--- a/ecosystem/theme-default/src/client/styles/_variables.scss
+++ b/ecosystem/theme-default/src/client/styles/_variables.scss
@@ -4,8 +4,3 @@
 $MQNarrow: 959px !default;
 $MQMobile: 719px !default;
 $MQMobileNarrow: 419px !default;
-
-// code languages
-$codeLang: 'c' 'cpp' 'cs' 'css' 'dart' 'docker' 'fs' 'go' 'html' 'java' 'js'
-  'json' 'kt' 'less' 'makefile' 'md' 'php' 'py' 'rb' 'rs' 'sass' 'scss' 'sh'
-  'styl' 'ts' 'toml' 'vue' 'yml' !default;
diff --git a/ecosystem/theme-default/src/client/styles/code.scss b/ecosystem/theme-default/src/client/styles/code.scss
index a39e1956..c54c8556 100644
--- a/ecosystem/theme-default/src/client/styles/code.scss
+++ b/ecosystem/theme-default/src/client/styles/code.scss
@@ -152,6 +152,7 @@ div[class*='language-'] {
   border-radius: 6px;
 
   &::before {
+    content: attr(data-ext);
     position: absolute;
     z-index: 3;
     top: 0.8em;
@@ -247,14 +248,6 @@ div[class*='language-'] {
   }
 }
 
-@each $lang in $codeLang {
-  div[class*='language-'].ext-#{$lang} {
-    &:before {
-      content: '' + $lang;
-    }
-  }
-}
-
 // narrow mobile
 @media (max-width: $MQMobileNarrow) {
   .theme-default-content {
diff --git a/packages/bundler-vite/src/plugins/constantsReplacementPlugin.ts b/packages/bundler-vite/src/plugins/constantsReplacementPlugin.ts
index 142e35df..47bb695e 100644
--- a/packages/bundler-vite/src/plugins/constantsReplacementPlugin.ts
+++ b/packages/bundler-vite/src/plugins/constantsReplacementPlugin.ts
@@ -1,7 +1,7 @@
 import type { App } from '@vuepress/core'
 import type { Plugin } from 'vite'
 
-const pageComponentFileRegexp = /\.html\.vue$/
+const pageComponentFileRegexp = /\.html\.vue($|\?)/
 const vueTemplateRegexp = /<template>[\s\S]*<\/template>/
 
 const jsStringBreaker = '\u200b'
diff --git a/packages/bundler-vite/src/plugins/mainPlugin.ts b/packages/bundler-vite/src/plugins/mainPlugin.ts
index 57db80da..e35f7120 100644
--- a/packages/bundler-vite/src/plugins/mainPlugin.ts
+++ b/packages/bundler-vite/src/plugins/mainPlugin.ts
@@ -42,7 +42,10 @@ import '@vuepress/client/app'
     // externalized in build ssr mode
     const clientPackages = [
       '@vuepress/client',
-      ...app.pluginApi.plugins.map(({ name }) => name),
+      ...app.pluginApi.plugins
+        // the 'user-config' plugin is created by cli internally
+        .filter(({ name }) => name !== 'user-config')
+        .map(({ name }) => name),
     ]
 
     return {
diff --git a/packages/bundler-vite/src/resolveViteConfig.ts b/packages/bundler-vite/src/resolveViteConfig.ts
index 5f359301..98e02cbe 100644
--- a/packages/bundler-vite/src/resolveViteConfig.ts
+++ b/packages/bundler-vite/src/resolveViteConfig.ts
@@ -21,6 +21,9 @@ export const resolveViteConfig = async ({
       clearScreen: false,
       configFile: false,
       logLevel: !isBuild || app.env.isDebug ? 'info' : 'warn',
+      esbuild: {
+        charset: 'utf8',
+      },
       plugins: [
         vuePlugin(options.vuePluginOptions),
         vuepressPlugin({ app, isBuild, isServer }),
diff --git a/packages/client/src/composables/pageData.ts b/packages/client/src/composables/pageData.ts
index 6010ad76..571f9792 100644
--- a/packages/client/src/composables/pageData.ts
+++ b/packages/client/src/composables/pageData.ts
@@ -36,7 +36,7 @@ export const usePageData = <
   T extends Record<any, any> = Record<never, never>
 >(): PageDataRef<T> => pageData as PageDataRef<T>
 
-if (import.meta.webpackHot || import.meta.hot) {
+if (__VUEPRESS_DEV__ && (import.meta.webpackHot || import.meta.hot)) {
   // reuse vue HMR runtime
   __VUE_HMR_RUNTIME__.updatePageData = (data: PageData) => {
     pagesData.value[data.key] = () => Promise.resolve(data)
diff --git a/packages/client/src/composables/siteData.ts b/packages/client/src/composables/siteData.ts
index 6e739179..89a16b47 100644
--- a/packages/client/src/composables/siteData.ts
+++ b/packages/client/src/composables/siteData.ts
@@ -20,7 +20,7 @@ export const siteData: SiteDataRef = ref(siteDataRaw)
  */
 export const useSiteData = (): SiteDataRef => siteData
 
-if (import.meta.webpackHot || import.meta.hot) {
+if (__VUEPRESS_DEV__ && (import.meta.webpackHot || import.meta.hot)) {
   // reuse vue HMR runtime
   __VUE_HMR_RUNTIME__.updateSiteData = (data: SiteData) => {
     siteData.value = data
diff --git a/packages/markdown/src/plugins/codePlugin/codePlugin.ts b/packages/markdown/src/plugins/codePlugin/codePlugin.ts
index ec5bea1f..9d19ad1c 100644
--- a/packages/markdown/src/plugins/codePlugin/codePlugin.ts
+++ b/packages/markdown/src/plugins/codePlugin/codePlugin.ts
@@ -128,9 +128,9 @@ export const codePlugin: PluginWithOptions<CodePluginOptions> = (
       result = `${result}<div class="line-numbers" aria-hidden="true">${lineNumbersCode}</div>`
     }
 
-    result = `<div class="${languageClass} ext-${language.ext}${
+    result = `<div class="${languageClass}${
       useLineNumbers ? ' line-numbers-mode' : ''
-    }">${result}</div>`
+    }" data-ext="${language.ext}">${result}</div>`
 
     return result
   }


Test patch:
diff --git a/packages/markdown/tests/plugins/__snapshots__/codePlugin.spec.ts.snap b/packages/markdown/tests/plugins/__snapshots__/codePlugin.spec.ts.snap
index 2b13dd56..8b3e2623 100644
--- a/packages/markdown/tests/plugins/__snapshots__/codePlugin.spec.ts.snap
+++ b/packages/markdown/tests/plugins/__snapshots__/codePlugin.spec.ts.snap
@@ -1,35 +1,35 @@
 // Vitest Snapshot v1
 
 exports[`@vuepress/markdown > plugins > codePlugin > :line-numbers / :no-line-numbers > should work properly if \`lineNumbers\` is disabled by default 1`] = `
-"<div class=\\"language-text ext-text\\"><pre v-pre class=\\"language-text\\"><code>Raw text
-</code></pre></div><div class=\\"language-text ext-text line-numbers-mode\\"><pre v-pre class=\\"language-text\\"><code>Raw text
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-text ext-text\\"><pre v-pre class=\\"language-text\\"><code>Raw text
-</code></pre></div><div class=\\"language-typescript ext-ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+"<div class=\\"language-text\\" data-ext=\\"text\\"><pre v-pre class=\\"language-text\\"><code>Raw text
+</code></pre></div><div class=\\"language-text line-numbers-mode\\" data-ext=\\"text\\"><pre v-pre class=\\"language-text\\"><code>Raw text
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-text\\" data-ext=\\"text\\"><pre v-pre class=\\"language-text\\"><code>Raw text
+</code></pre></div><div class=\\"language-typescript\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre></div><div class=\\"language-typescript ext-ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre></div><div class=\\"language-typescript\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
@@ -38,35 +38,35 @@ function bar () {
 `;
 
 exports[`@vuepress/markdown > plugins > codePlugin > :line-numbers / :no-line-numbers > should work properly if \`lineNumbers\` is enabled by default 1`] = `
-"<div class=\\"language-text ext-text line-numbers-mode\\"><pre v-pre class=\\"language-text\\"><code>Raw text
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-text ext-text line-numbers-mode\\"><pre v-pre class=\\"language-text\\"><code>Raw text
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-text ext-text\\"><pre v-pre class=\\"language-text\\"><code>Raw text
-</code></pre></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+"<div class=\\"language-text line-numbers-mode\\" data-ext=\\"text\\"><pre v-pre class=\\"language-text\\"><code>Raw text
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-text line-numbers-mode\\" data-ext=\\"text\\"><pre v-pre class=\\"language-text\\"><code>Raw text
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-text\\" data-ext=\\"text\\"><pre v-pre class=\\"language-text\\"><code>Raw text
+</code></pre></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
@@ -75,35 +75,35 @@ function bar () {
 `;
 
 exports[`@vuepress/markdown > plugins > codePlugin > :line-numbers / :no-line-numbers > should work properly if \`lineNumbers\` is set to a number by default 1`] = `
-"<div class=\\"language-text ext-text\\"><pre v-pre class=\\"language-text\\"><code>Raw text
-</code></pre></div><div class=\\"language-text ext-text line-numbers-mode\\"><pre v-pre class=\\"language-text\\"><code>Raw text
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-text ext-text\\"><pre v-pre class=\\"language-text\\"><code>Raw text
-</code></pre></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+"<div class=\\"language-text\\" data-ext=\\"text\\"><pre v-pre class=\\"language-text\\"><code>Raw text
+</code></pre></div><div class=\\"language-text line-numbers-mode\\" data-ext=\\"text\\"><pre v-pre class=\\"language-text\\"><code>Raw text
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-text\\" data-ext=\\"text\\"><pre v-pre class=\\"language-text\\"><code>Raw text
+</code></pre></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
@@ -112,35 +112,35 @@ function bar () {
 `;
 
 exports[`@vuepress/markdown > plugins > codePlugin > :v-pre / :no-v-pre > should work properly if \`vPre.block\` is disabled by default 1`] = `
-"<div class=\\"language-text ext-text line-numbers-mode\\"><pre class=\\"language-text\\"><code>Raw text
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-text ext-text line-numbers-mode\\"><pre v-pre class=\\"language-text\\"><code>Raw text
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-text ext-text line-numbers-mode\\"><pre class=\\"language-text\\"><code>Raw text
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre class=\\"language-typescript\\"><code>const foo = 'foo'
+"<div class=\\"language-text line-numbers-mode\\" data-ext=\\"text\\"><pre class=\\"language-text\\"><code>Raw text
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-text line-numbers-mode\\" data-ext=\\"text\\"><pre v-pre class=\\"language-text\\"><code>Raw text
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-text line-numbers-mode\\" data-ext=\\"text\\"><pre class=\\"language-text\\"><code>Raw text
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
@@ -149,35 +149,35 @@ function bar () {
 `;
 
 exports[`@vuepress/markdown > plugins > codePlugin > :v-pre / :no-v-pre > should work properly if \`vPre.block\` is enabled by default 1`] = `
-"<div class=\\"language-text ext-text line-numbers-mode\\"><pre v-pre class=\\"language-text\\"><code>Raw text
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-text ext-text line-numbers-mode\\"><pre v-pre class=\\"language-text\\"><code>Raw text
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-text ext-text line-numbers-mode\\"><pre class=\\"language-text\\"><code>Raw text
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+"<div class=\\"language-text line-numbers-mode\\" data-ext=\\"text\\"><pre v-pre class=\\"language-text\\"><code>Raw text
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-text line-numbers-mode\\" data-ext=\\"text\\"><pre v-pre class=\\"language-text\\"><code>Raw text
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-text line-numbers-mode\\" data-ext=\\"text\\"><pre class=\\"language-text\\"><code>Raw text
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
@@ -186,18 +186,18 @@ function bar () {
 `;
 
 exports[`@vuepress/markdown > plugins > codePlugin > plugin options > should disable \`highlightLines\` 1`] = `
-"<div class=\\"language-text ext-text line-numbers-mode\\"><pre v-pre class=\\"language-text\\"><code>Raw text
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+"<div class=\\"language-text line-numbers-mode\\" data-ext=\\"text\\"><pre v-pre class=\\"language-text\\"><code>Raw text
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
@@ -211,18 +211,18 @@ const baz = () =&gt; {
 `;
 
 exports[`@vuepress/markdown > plugins > codePlugin > plugin options > should disable \`lineNumbers\` 1`] = `
-"<div class=\\"language-text ext-text\\"><pre v-pre class=\\"language-text\\"><code>Raw text
-</code></pre></div><div class=\\"language-typescript ext-ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+"<div class=\\"language-text\\" data-ext=\\"text\\"><pre v-pre class=\\"language-text\\"><code>Raw text
+</code></pre></div><div class=\\"language-typescript\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre></div><div class=\\"language-typescript ext-ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre></div><div class=\\"language-typescript\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div></div><div class=\\"language-typescript ext-ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div></div><div class=\\"language-typescript\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
@@ -261,18 +261,18 @@ const baz = () =&gt; {
 `;
 
 exports[`@vuepress/markdown > plugins > codePlugin > plugin options > should disable \`vPre.block\` 1`] = `
-"<div class=\\"language-text ext-text line-numbers-mode\\"><pre class=\\"language-text\\"><code>Raw text
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre class=\\"language-typescript\\"><code>const foo = 'foo'
+"<div class=\\"language-text line-numbers-mode\\" data-ext=\\"text\\"><pre class=\\"language-text\\"><code>Raw text
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
@@ -286,18 +286,18 @@ const baz = () =&gt; {
 `;
 
 exports[`@vuepress/markdown > plugins > codePlugin > plugin options > should disable \`vPre.inline\` 1`] = `
-"<div class=\\"language-text ext-text line-numbers-mode\\"><pre v-pre class=\\"language-text\\"><code>Raw text
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+"<div class=\\"language-text line-numbers-mode\\" data-ext=\\"text\\"><pre v-pre class=\\"language-text\\"><code>Raw text
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
@@ -311,18 +311,18 @@ const baz = () =&gt; {
 `;
 
 exports[`@vuepress/markdown > plugins > codePlugin > plugin options > should disable \`vPre.inline\` and \`vPre.block\` 1`] = `
-"<div class=\\"language-text ext-text line-numbers-mode\\"><pre class=\\"language-text\\"><code>Raw text
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre class=\\"language-typescript\\"><code>const foo = 'foo'
+"<div class=\\"language-text line-numbers-mode\\" data-ext=\\"text\\"><pre class=\\"language-text\\"><code>Raw text
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
@@ -336,18 +336,18 @@ const baz = () =&gt; {
 `;
 
 exports[`@vuepress/markdown > plugins > codePlugin > plugin options > should enable \`lineNumbers\` according to number of code lines 1`] = `
-"<div class=\\"language-text ext-text\\"><pre v-pre class=\\"language-text\\"><code>Raw text
-</code></pre></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+"<div class=\\"language-text\\" data-ext=\\"text\\"><pre v-pre class=\\"language-text\\"><code>Raw text
+</code></pre></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
@@ -361,18 +361,18 @@ const baz = () =&gt; {
 `;
 
 exports[`@vuepress/markdown > plugins > codePlugin > plugin options > should process code fences with default options 1`] = `
-"<div class=\\"language-text ext-text line-numbers-mode\\"><pre v-pre class=\\"language-text\\"><code>Raw text
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+"<div class=\\"language-text line-numbers-mode\\" data-ext=\\"text\\"><pre v-pre class=\\"language-text\\"><code>Raw text
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
 }
-</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
+</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br><br><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>const foo = 'foo'
 
 function bar () {
   return 1024
@@ -386,18 +386,18 @@ const baz = () =&gt; {
 `;
 
 exports[`@vuepress/markdown > plugins > codePlugin > syntax highlighting > should work if highlighted code is not wrapped with \`<pre>\` 1`] = `
-"<div class=\\"language-text ext-text line-numbers-mode\\"><pre v-pre class=\\"language-text\\"><code>highlighted code: Raw text
-, lang: text</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-javascript ext-js line-numbers-mode\\"><pre v-pre class=\\"language-javascript\\"><code>highlighted code: const foo = 'foo'
+"<div class=\\"language-text line-numbers-mode\\" data-ext=\\"text\\"><pre v-pre class=\\"language-text\\"><code>highlighted code: Raw text
+, lang: text</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-javascript line-numbers-mode\\" data-ext=\\"js\\"><pre v-pre class=\\"language-javascript\\"><code>highlighted code: const foo = 'foo'
 
 function bar () {
   return 1024
 }
-, lang: javascript</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre class=\\"language-typescript\\"><code>highlighted code: const foo: string = 'foo'
+, lang: javascript</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre class=\\"language-typescript\\"><code>highlighted code: const foo: string = 'foo'
 
 function bar (): number {
   return 1024
 }
-, lang: typescript</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-vue-html ext-vue-html line-numbers-mode\\"><pre v-pre class=\\"language-vue-html\\"><code>highlighted code: <template>
+, lang: typescript</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-vue-html line-numbers-mode\\" data-ext=\\"vue-html\\"><pre v-pre class=\\"language-vue-html\\"><code>highlighted code: <template>
   <div>msg: {{msg}}</div>
 </template>
 <script setup lang=\\"ts\\">
@@ -407,18 +407,18 @@ const msg = 'hello world';
 `;
 
 exports[`@vuepress/markdown > plugins > codePlugin > syntax highlighting > should work if highlighted code is wrapped with \`<pre>\` 1`] = `
-"<div class=\\"language-text ext-text line-numbers-mode\\"><pre v-pre><code>highlighted code: Raw text
-, lang: text</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-javascript ext-js line-numbers-mode\\"><pre v-pre><code>highlighted code: const foo = 'foo'
+"<div class=\\"language-text line-numbers-mode\\" data-ext=\\"text\\"><pre v-pre><code>highlighted code: Raw text
+, lang: text</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div></div></div><div class=\\"language-javascript line-numbers-mode\\" data-ext=\\"js\\"><pre v-pre><code>highlighted code: const foo = 'foo'
 
 function bar () {
   return 1024
 }
-, lang: javascript</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript ext-ts line-numbers-mode\\"><pre v-pre><code>highlighted code: const foo: string = 'foo'
+, lang: javascript</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-typescript line-numbers-mode\\" data-ext=\\"ts\\"><pre v-pre><code>highlighted code: const foo: string = 'foo'
 
 function bar (): number {
   return 1024
 }
-, lang: typescript</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-vue-html ext-vue-html line-numbers-mode\\"><pre v-pre><code>highlighted code: <template>
+, lang: typescript</code></pre><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-vue-html line-numbers-mode\\" data-ext=\\"vue-html\\"><pre v-pre><code>highlighted code: <template>
   <div>msg: {{msg}}</div>
 </template>
 <script setup lang=\\"ts\\">
diff --git a/packages/markdown/tests/plugins/__snapshots__/importCodePlugin.spec.ts.snap b/packages/markdown/tests/plugins/__snapshots__/importCodePlugin.spec.ts.snap
index 78222d66..3bdb39bb 100644
--- a/packages/markdown/tests/plugins/__snapshots__/importCodePlugin.spec.ts.snap
+++ b/packages/markdown/tests/plugins/__snapshots__/importCodePlugin.spec.ts.snap
@@ -1,12 +1,12 @@
 // Vitest Snapshot v1
 
 exports[`@vuepress/markdown > plugins > importCodePlugin > compatibility with codePlugin > should work with syntax supported by codePlugin 1`] = `
-"<div class=\\"language-javascript ext-js line-numbers-mode\\"><pre v-pre class=\\"language-javascript\\"><code>const msg = 'hello from js'
+"<div class=\\"language-javascript line-numbers-mode\\" data-ext=\\"js\\"><pre v-pre class=\\"language-javascript\\"><code>const msg = 'hello from js'
 
 console.log(msg)
 
 console.log('foo bar')
-</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><br><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-markdown ext-md\\"><pre v-pre class=\\"language-markdown\\"><code># msg
+</code></pre><div class=\\"highlight-lines\\"><div class=\\"highlight-line\\">&nbsp;</div><br><div class=\\"highlight-line\\">&nbsp;</div><div class=\\"highlight-line\\">&nbsp;</div><br></div><div class=\\"line-numbers\\" aria-hidden=\\"true\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div><div class=\\"language-markdown\\" data-ext=\\"md\\"><pre v-pre class=\\"language-markdown\\"><code># msg
 
 hello from md