diff --git a/__tests__/e2e/markdown-extensions/markdown-extensions.test.ts b/__tests__/e2e/markdown-extensions/markdown-extensions.test.ts
index aa1f6ff2..6a95ea82 100644
--- a/__tests__/e2e/markdown-extensions/markdown-extensions.test.ts
+++ b/__tests__/e2e/markdown-extensions/markdown-extensions.test.ts
@@ -163,19 +163,19 @@ describe('Line Numbers', () => {
 describe('Import Code Snippets', () => {
   test('basic', async () => {
     const lines = page.locator('#basic-code-snippet + div code > span')
-    expect(await lines.count()).toBe(22)
+    expect(await lines.count()).toBe(11)
   })
 
   test('specify region', async () => {
     const lines = page.locator('#specify-region + div code > span')
-    expect(await lines.count()).toBe(6)
+    expect(await lines.count()).toBe(3)
   })
 
   test('with other features', async () => {
     const div = page.locator('#with-other-features + div')
     expect(await getClassList(div)).toContain('line-numbers-mode')
     const lines = div.locator('code > span')
-    expect(await lines.count()).toBe(6)
+    expect(await lines.count()).toBe(3)
     expect(await getClassList(lines.nth(0))).toContain('highlighted')
   })
 })
@@ -216,10 +216,10 @@ describe('Code Groups', () => {
 
     // blocks
     const blocks = div.locator('.blocks > div')
-    expect(await blocks.nth(0).locator('code > span').count()).toBe(22)
+    expect(await blocks.nth(0).locator('code > span').count()).toBe(11)
     expect(await getClassList(blocks.nth(1))).toContain('line-numbers-mode')
     expect(await getClassList(blocks.nth(1))).toContain('language-ts')
-    expect(await blocks.nth(1).locator('code > span').count()).toBe(6)
+    expect(await blocks.nth(1).locator('code > span').count()).toBe(1)
     expect(
       await getClassList(blocks.nth(1).locator('code > span').nth(0))
     ).toContain('highlighted')
diff --git a/src/node/markdown/plugins/highlight.ts b/src/node/markdown/plugins/highlight.ts
index 3376996d..1a5c50ad 100644
--- a/src/node/markdown/plugins/highlight.ts
+++ b/src/node/markdown/plugins/highlight.ts
@@ -66,14 +66,19 @@ export async function highlight(
     langs: languages?.length ? languages : Object.keys(bundledLanguages)
   })
 
-  const transformers = [
+  const transformers: ShikijiTransformer[] = [
     transformerNotationDiff(),
     transformerNotationFocus({
       classFocused: 'has-focus',
       classRootActive: 'has-focused-lines'
     }),
     transformerNotationHighlight(),
-    transformerNotationErrorLevel()
+    transformerNotationErrorLevel(),
+    {
+      pre(node) {
+        node.properties.class = 'vp-code shiki'
+      }
+    },
   ]
 
   const styleRE = /<pre[^>]*(style=".*?")/
@@ -152,11 +157,6 @@ export async function highlight(
       transformers: [
         ...transformers,
         transformerCompactLineOptions(lineOptions),
-        {
-          pre(node) {
-            node.properties.class = 'vp-code'
-          }
-        },
         ...userTransformers
       ],
       ...(typeof theme === 'string' || 'name' in theme