From 0ef4fddb7ff087bd0a6c1aba61e3736ac9f14321 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Fri, 5 Apr 2024 10:09:13 +0200
Subject: [PATCH] feat: use magic-string to do markdown pre-transform (#1496)

Co-authored-by: _Kerman <kermanx@qq.com>
---
 .../node/syntax/transform/code-wrapper.ts     |  10 +-
 .../node/syntax/transform/in-page-css.ts      |  14 +-
 .../node/syntax/transform/katex-wrapper.ts    |   9 +-
 .../node/syntax/transform/magic-move.ts       |  10 +-
 .../slidev/node/syntax/transform/mermaid.ts   |  17 ++-
 .../slidev/node/syntax/transform/monaco.ts    |  29 ++--
 .../slidev/node/syntax/transform/plant-uml.ts |  15 +-
 .../node/syntax/transform/slot-sugar.ts       |  31 ++--
 .../slidev/node/syntax/transform/snippet.ts   |  10 +-
 .../slidev/node/syntax/transform/utils.ts     |  22 ---
 packages/slidev/node/vite/markdown.ts         |  37 +++--
 packages/slidev/package.json                  |   1 +
 packages/types/src/index.ts                   |   1 +
 packages/types/src/transform.ts               |   7 +
 pnpm-lock.yaml                                |  33 +++--
 test/__snapshots__/transform.test.ts.snap     |  10 ++
 test/_tutils.ts                               |  13 ++
 test/transform-magic-move.test.ts             |  21 ++-
 test/transform.test.ts                        | 140 ++++++++++++++----
 19 files changed, 279 insertions(+), 151 deletions(-)
 create mode 100644 packages/types/src/transform.ts
 create mode 100644 test/_tutils.ts

diff --git a/packages/slidev/node/syntax/transform/code-wrapper.ts b/packages/slidev/node/syntax/transform/code-wrapper.ts
index ddde28acfe..a24fde680a 100644
--- a/packages/slidev/node/syntax/transform/code-wrapper.ts
+++ b/packages/slidev/node/syntax/transform/code-wrapper.ts
@@ -1,3 +1,4 @@
+import type { MarkdownTransformContext } from '@slidev/types'
 import { normalizeRangeStr } from './utils'
 
 export const reCodeBlock = /^```([\w'-]+?)(?:\s*{([\d\w*,\|-]+)}\s*?({.*?})?(.*?))?\n([\s\S]+?)^```$/mg
@@ -5,13 +6,16 @@ export const reCodeBlock = /^```([\w'-]+?)(?:\s*{([\d\w*,\|-]+)}\s*?({.*?})?(.*?
 /**
  * Transform code block with wrapper
  */
-export function transformCodeWrapper(md: string) {
-  return md.replace(
+export function transformCodeWrapper(ctx: MarkdownTransformContext) {
+  ctx.s.replace(
     reCodeBlock,
-    (full, lang = '', rangeStr: string = '', options = '', attrs = '', code: string) => {
+    (full, lang = '', rangeStr: string = '', options = '', attrs = '', code: string, index: number) => {
+      if (ctx.isIgnored(index))
+        return full
       const ranges = normalizeRangeStr(rangeStr)
       code = code.trimEnd()
       options = options.trim() || '{}'
+      ctx.ignores.push([index, index + full.length])
       return `\n<CodeBlockWrapper v-bind="${options}" :ranges='${JSON.stringify(ranges)}'>\n\n\`\`\`${lang}${attrs}\n${code}\n\`\`\`\n\n</CodeBlockWrapper>`
     },
   )
diff --git a/packages/slidev/node/syntax/transform/in-page-css.ts b/packages/slidev/node/syntax/transform/in-page-css.ts
index 4633f3c062..cc5fef183f 100644
--- a/packages/slidev/node/syntax/transform/in-page-css.ts
+++ b/packages/slidev/node/syntax/transform/in-page-css.ts
@@ -1,26 +1,22 @@
-import { getCodeBlocks } from './utils'
+import type { MarkdownTransformContext } from '@slidev/types'
 
 /**
  * Transform <style> in markdown to scoped style with page selector
  */
-export function transformPageCSS(md: string, id: string) {
+export function transformPageCSS(ctx: MarkdownTransformContext, id: string) {
   const page = id.match(/(\d+)\.md$/)?.[1]
   if (!page)
-    return md
+    return
 
-  const { isInsideCodeblocks } = getCodeBlocks(md)
-
-  const result = md.replace(
+  ctx.s.replace(
     /(\n<style[^>]*?>)([\s\S]+?)(<\/style>)/g,
     (full, start, css, end, index) => {
       // don't replace `<style>` inside code blocks, #101
-      if (index < 0 || isInsideCodeblocks(index))
+      if (ctx.isIgnored(index))
         return full
       if (!start.includes('scoped'))
         start = start.replace('<style', '<style scoped')
       return `${start}\n${css}${end}`
     },
   )
-
-  return result
 }
diff --git a/packages/slidev/node/syntax/transform/katex-wrapper.ts b/packages/slidev/node/syntax/transform/katex-wrapper.ts
index db4f833eae..7230348f85 100644
--- a/packages/slidev/node/syntax/transform/katex-wrapper.ts
+++ b/packages/slidev/node/syntax/transform/katex-wrapper.ts
@@ -1,13 +1,16 @@
+import type { MarkdownTransformContext } from '@slidev/types'
+
 /**
  * Wrapper KaTex syntax `$$...$$` for highlighting
  */
-export function transformKaTexWrapper(md: string) {
-  return md.replace(
+export function transformKaTexWrapper(ctx: MarkdownTransformContext) {
+  ctx.s.replace(
     /^\$\$(?:\s*{([\d\w*,\|-]+)}\s*?({.*?})?\s*?)?\n([\s\S]+?)^\$\$/mg,
-    (full, rangeStr: string = '', options = '', code: string) => {
+    (full, rangeStr: string = '', options = '', code: string, index: number) => {
       const ranges = !rangeStr.trim() ? [] : rangeStr.trim().split(/\|/g).map(i => i.trim())
       code = code.trimEnd()
       options = options.trim() || '{}'
+      ctx.ignores.push([index, index + full.length])
       return `<KaTexBlockWrapper v-bind="${options}" :ranges='${JSON.stringify(ranges)}'>\n\n\$\$\n${code}\n\$\$\n</KaTexBlockWrapper>\n`
     },
   )
diff --git a/packages/slidev/node/syntax/transform/magic-move.ts b/packages/slidev/node/syntax/transform/magic-move.ts
index 3ab29c0981..92a659096f 100644
--- a/packages/slidev/node/syntax/transform/magic-move.ts
+++ b/packages/slidev/node/syntax/transform/magic-move.ts
@@ -2,6 +2,7 @@ import type { MarkdownItShikiOptions } from '@shikijs/markdown-it'
 import type { Highlighter } from 'shiki'
 import { codeToKeyedTokens } from 'shiki-magic-move/core'
 import lz from 'lz-string'
+import type { MarkdownTransformContext } from '@slidev/types'
 import { normalizeRangeStr } from './utils'
 import { reCodeBlock } from './code-wrapper'
 
@@ -11,13 +12,13 @@ const reMagicMoveBlock = /^````(?:md|markdown) magic-move(?:[ ]*(\{.*?\})?([^\n]
  * Transform magic-move code blocks
  */
 export function transformMagicMove(
-  md: string,
+  ctx: MarkdownTransformContext,
   shiki: Highlighter | undefined,
   shikiOptions: MarkdownItShikiOptions | undefined,
 ) {
-  return md.replace(
+  ctx.s.replace(
     reMagicMoveBlock,
-    (full, options = '{}', _attrs = '', body: string) => {
+    (full, options = '{}', _attrs = '', body: string, index: number) => {
       if (!shiki || !shikiOptions)
         throw new Error('Shiki is required for Magic Move. You may need to set `highlighter: shiki` in your Slidev config.')
 
@@ -33,6 +34,9 @@ export function transformMagicMove(
       }),
       )
       const compressed = lz.compressToBase64(JSON.stringify(steps))
+
+      ctx.ignores.push([index, index + full.length])
+
       return `<ShikiMagicMove v-bind="${options}" steps-lz="${compressed}" :step-ranges='${JSON.stringify(ranges)}' />`
     },
   )
diff --git a/packages/slidev/node/syntax/transform/mermaid.ts b/packages/slidev/node/syntax/transform/mermaid.ts
index a11b0fb709..e3b60fabd5 100644
--- a/packages/slidev/node/syntax/transform/mermaid.ts
+++ b/packages/slidev/node/syntax/transform/mermaid.ts
@@ -1,14 +1,15 @@
 import lz from 'lz-string'
+import type { MarkdownTransformContext } from '@slidev/types'
 
 /**
  * Transform Mermaid code blocks (render done on client side)
  */
-export function transformMermaid(md: string): string {
-  return md
-    .replace(/^```mermaid\s*?({.*?})?\n([\s\S]+?)\n```/mg, (full, options = '', code = '') => {
-      code = code.trim()
-      options = options.trim() || '{}'
-      const encoded = lz.compressToBase64(code)
-      return `<Mermaid code-lz="${encoded}" v-bind="${options}" />`
-    })
+export function transformMermaid(ctx: MarkdownTransformContext) {
+  ctx.s.replace(/^```mermaid\s*?({.*?})?\n([\s\S]+?)\n```/mg, (full, options = '', code = '', index: number) => {
+    code = code.trim()
+    options = options.trim() || '{}'
+    const encoded = lz.compressToBase64(code)
+    ctx.ignores.push([index, index + full.length])
+    return `<Mermaid code-lz="${encoded}" v-bind="${options}" />`
+  })
 }
diff --git a/packages/slidev/node/syntax/transform/monaco.ts b/packages/slidev/node/syntax/transform/monaco.ts
index d5fe85b5d8..093a1756c5 100644
--- a/packages/slidev/node/syntax/transform/monaco.ts
+++ b/packages/slidev/node/syntax/transform/monaco.ts
@@ -1,40 +1,45 @@
 import { isTruthy } from '@antfu/utils'
 import lz from 'lz-string'
+import type { MarkdownTransformContext } from '@slidev/types'
 
-export function transformMonaco(md: string, enabled = true) {
-  if (!enabled)
-    return truncateMancoMark(md)
+export function transformMonaco(ctx: MarkdownTransformContext, enabled = true) {
+  if (!enabled) {
+    ctx.s.replace(/{monaco([\w:,-]*)}/g, '')
+    return
+  }
 
   // transform monaco
-  md = md.replace(
+  ctx.s.replace(
     /^```(\w+?)\s*{monaco-diff}\s*?({.*?})?\s*?\n([\s\S]+?)^~~~\s*?\n([\s\S]+?)^```/mg,
-    (full, lang = 'ts', options = '{}', code: string, diff: string) => {
+    (full, lang = 'ts', options = '{}', code: string, diff: string, index: number) => {
       lang = lang.trim()
       options = options.trim() || '{}'
       const encoded = lz.compressToBase64(code)
       const encodedDiff = lz.compressToBase64(diff)
+      ctx.ignores.push([index, index + full.length])
       return `<Monaco code-lz="${encoded}" diff-lz="${encodedDiff}" lang="${lang}" v-bind="${options}" />`
     },
   )
-  md = md.replace(
+  ctx.s.replace(
     /^```(\w+?)\s*{monaco}\s*?({.*?})?\s*?\n([\s\S]+?)^```/mg,
-    (full, lang = 'ts', options = '{}', code: string) => {
+    (full, lang = 'ts', options = '{}', code: string, index: number) => {
       lang = lang.trim()
       options = options.trim() || '{}'
       const encoded = lz.compressToBase64(code)
+      ctx.ignores.push([index, index + full.length])
       return `<Monaco code-lz="${encoded}" lang="${lang}" v-bind="${options}" />`
     },
   )
-  md = md.replace(
+  ctx.s.replace(
     /^```(\w+?)\s*{monaco-run}\s*?({.*?})?\s*?\n([\s\S]+?)^```/mg,
-    (full, lang = 'ts', options = '{}', code: string) => {
+    (full, lang = 'ts', options = '{}', code: string, index: number) => {
       lang = lang.trim()
       options = options.trim() || '{}'
       const encoded = lz.compressToBase64(code)
+      ctx.ignores.push([index, index + full.length])
       return `<Monaco runnable code-lz="${encoded}" lang="${lang}" v-bind="${options}" />`
     },
   )
-  return md
 }
 
 // types auto discovery for TypeScript monaco
@@ -58,7 +63,3 @@ export function scanMonacoModules(md: string) {
 
   return Array.from(typeModules)
 }
-
-export function truncateMancoMark(md: string) {
-  return md.replace(/{monaco([\w:,-]*)}/g, '')
-}
diff --git a/packages/slidev/node/syntax/transform/plant-uml.ts b/packages/slidev/node/syntax/transform/plant-uml.ts
index 5c2e98f7f2..cbdf360cb1 100644
--- a/packages/slidev/node/syntax/transform/plant-uml.ts
+++ b/packages/slidev/node/syntax/transform/plant-uml.ts
@@ -1,10 +1,11 @@
 import { encode as encodePlantUml } from 'plantuml-encoder'
+import type { MarkdownTransformContext } from '@slidev/types'
 
-export function transformPlantUml(md: string, server: string): string {
-  return md
-    .replace(/^```plantuml\s*?({.*?})?\n([\s\S]+?)\n```/mg, (full, options = '', content = '') => {
-      const code = encodePlantUml(content.trim())
-      options = options.trim() || '{}'
-      return `<PlantUml :code="'${code}'" :server="'${server}'" v-bind="${options}" />`
-    })
+export function transformPlantUml(ctx: MarkdownTransformContext, server: string) {
+  ctx.s.replace(/^```plantuml\s*?({.*?})?\n([\s\S]+?)\n```/mg, (full, options = '', content = '', index: number) => {
+    const code = encodePlantUml(content.trim())
+    options = options.trim() || '{}'
+    ctx.ignores.push([index, index + full.length])
+    return `<PlantUml :code="'${code}'" :server="'${server}'" v-bind="${options}" />`
+  })
 }
diff --git a/packages/slidev/node/syntax/transform/slot-sugar.ts b/packages/slidev/node/syntax/transform/slot-sugar.ts
index ecfece026b..3061dacc13 100644
--- a/packages/slidev/node/syntax/transform/slot-sugar.ts
+++ b/packages/slidev/node/syntax/transform/slot-sugar.ts
@@ -1,25 +1,32 @@
-import { getCodeBlocks } from './utils'
+import type { MarkdownTransformContext } from '@slidev/types'
 
-export function transformSlotSugar(md: string) {
-  const lines = md.split(/\r?\n/g)
+export function transformSlotSugar(
+  ctx: MarkdownTransformContext,
+) {
+  const linesWithNewline = ctx.s.original.split(/(\r?\n)/g)
+  const lines: string[] = []
+  for (let i = 0; i < linesWithNewline.length; i += 2) {
+    const line = linesWithNewline[i]
+    const newline = linesWithNewline[i + 1] || ''
+    lines.push(line + newline)
+  }
 
   let prevSlot = false
 
-  const { isLineInsideCodeblocks } = getCodeBlocks(md)
-
-  lines.forEach((line, idx) => {
-    if (isLineInsideCodeblocks(idx))
+  let offset = 0
+  lines.forEach((line) => {
+    const start = offset
+    offset += line.length
+    if (ctx.isIgnored(start))
       return
 
-    const match = line.trimEnd().match(/^::\s*([\w\.\-\:]+)\s*::$/)
+    const match = line.match(/^::\s*([\w\.\-\:]+)\s*::(\s*)?$/)
     if (match) {
-      lines[idx] = `${prevSlot ? '\n\n</template>\n' : '\n'}<template v-slot:${match[1]}="slotProps">\n`
+      ctx.s.overwrite(start, offset - match[2].length, `${prevSlot ? '\n\n</template>\n' : '\n'}<template v-slot:${match[1]}="slotProps">\n`)
       prevSlot = true
     }
   })
 
   if (prevSlot)
-    lines[lines.length - 1] += '\n\n</template>'
-
-  return lines.join('\n')
+    ctx.s.append('\n\n</template>')
 }
diff --git a/packages/slidev/node/syntax/transform/snippet.ts b/packages/slidev/node/syntax/transform/snippet.ts
index 4a0fe15802..0a05e18066 100644
--- a/packages/slidev/node/syntax/transform/snippet.ts
+++ b/packages/slidev/node/syntax/transform/snippet.ts
@@ -2,7 +2,7 @@
 
 import path from 'node:path'
 import fs from 'fs-extra'
-import type { ResolvedSlidevOptions } from '@slidev/types'
+import type { MarkdownTransformContext, ResolvedSlidevOptions } from '@slidev/types'
 
 function dedent(text: string): string {
   const lines = text.split('\n')
@@ -80,14 +80,16 @@ function findRegion(lines: Array<string>, regionName: string) {
  *
  * captures: ['/path/to/file.extension', '#region', 'language', '{meta}']
  */
-export function transformSnippet(md: string, options: ResolvedSlidevOptions, id: string) {
+export function transformSnippet(ctx: MarkdownTransformContext, options: ResolvedSlidevOptions, id: string) {
   const slideId = (id as string).match(/(\d+)\.md$/)?.[1]
   if (!slideId)
-    return md
+    return
+
   const data = options.data
   const slideInfo = data.slides[+slideId - 1]
   const dir = path.dirname(slideInfo.source?.filepath ?? options.entry ?? options.userRoot)
-  return md.replace(
+
+  ctx.s.replace(
     /^<<< *(.+?)(#[\w-]+)? *(?: (\S+?))? *(\{.*)?$/mg,
     (full, filepath = '', regionName = '', lang = '', meta = '') => {
       const firstLine = `\`\`\`${lang || path.extname(filepath).slice(1)} ${meta}`
diff --git a/packages/slidev/node/syntax/transform/utils.ts b/packages/slidev/node/syntax/transform/utils.ts
index 90ebde1806..6eb93dca69 100644
--- a/packages/slidev/node/syntax/transform/utils.ts
+++ b/packages/slidev/node/syntax/transform/utils.ts
@@ -2,28 +2,6 @@ export function normalizeRangeStr(rangeStr = '') {
   return !rangeStr.trim() ? [] : rangeStr.trim().split(/\|/g).map(i => i.trim())
 }
 
-export function getCodeBlocks(md: string) {
-  const codeblocks = Array
-    .from(md.matchAll(/^```[\s\S]*?^```/mg))
-    .map((m) => {
-      const start = m.index!
-      const end = m.index! + m[0].length
-      const startLine = md.slice(0, start).match(/\n/g)?.length || 0
-      const endLine = md.slice(0, end).match(/\n/g)?.length || 0
-      return [start, end, startLine, endLine]
-    })
-
-  return {
-    codeblocks,
-    isInsideCodeblocks(idx: number) {
-      return codeblocks.some(([s, e]) => s <= idx && idx <= e)
-    },
-    isLineInsideCodeblocks(line: number) {
-      return codeblocks.some(([, , s, e]) => s <= line && line <= e)
-    },
-  }
-}
-
 /**
  * Escape `{{` in code block to prevent Vue interpret it, #99, #1316
  */
diff --git a/packages/slidev/node/vite/markdown.ts b/packages/slidev/node/vite/markdown.ts
index bd050ac505..55297b09d1 100644
--- a/packages/slidev/node/vite/markdown.ts
+++ b/packages/slidev/node/vite/markdown.ts
@@ -7,6 +7,7 @@ import { taskLists as MarkdownItTaskList } from '@hedgedoc/markdown-it-plugins'
 import MarkdownItMdc from 'markdown-it-mdc'
 import type { MarkdownItShikiOptions } from '@shikijs/markdown-it'
 import type { Highlighter, ShikiTransformer } from 'shiki'
+import MagicString from 'magic-string'
 
 // @ts-expect-error missing types
 import MarkdownItAttrs from 'markdown-it-link-attributes'
@@ -14,7 +15,7 @@ import MarkdownItAttrs from 'markdown-it-link-attributes'
 // @ts-expect-error missing types
 import MarkdownItFootnote from 'markdown-it-footnote'
 
-import type { ResolvedSlidevOptions, SlidevPluginOptions } from '@slidev/types'
+import type { MarkdownTransformContext, ResolvedSlidevOptions, SlidevPluginOptions } from '@slidev/types'
 import MarkdownItKatex from '../syntax/markdown-it/markdown-it-katex'
 import MarkdownItPrism from '../syntax/markdown-it/markdown-it-prism'
 
@@ -129,19 +130,29 @@ export async function createMarkdownPlugin(
 
         const monacoEnabled = (config.monaco === true || config.monaco === mode)
 
+        const ctx: MarkdownTransformContext = {
+          s: new MagicString(code),
+          ignores: [],
+          isIgnored(index) {
+            return index < 0 || ctx.ignores.some(([start, end]) => start <= index && index < end)
+          },
+        }
+
+        transformSnippet(ctx, options, id)
+
         if (config.highlighter === 'shiki')
-          code = transformMagicMove(code, shiki, shikiOptions)
-
-        code = transformSlotSugar(code)
-        code = transformSnippet(code, options, id)
-        code = transformMermaid(code)
-        code = transformPlantUml(code, config.plantUmlServer)
-        code = transformMonaco(code, monacoEnabled)
-        code = transformCodeWrapper(code)
-        code = transformPageCSS(code, id)
-        code = transformKaTexWrapper(code)
-
-        return code
+          transformMagicMove(ctx, shiki, shikiOptions)
+
+        transformMermaid(ctx)
+        transformPlantUml(ctx, config.plantUmlServer)
+        transformMonaco(ctx, monacoEnabled)
+        transformCodeWrapper(ctx)
+        transformKaTexWrapper(ctx)
+
+        transformPageCSS(ctx, id)
+        transformSlotSugar(ctx)
+
+        return ctx.s.toString()
       },
     },
   }) as Plugin
diff --git a/packages/slidev/package.json b/packages/slidev/package.json
index 4160db572b..d49ff26f73 100644
--- a/packages/slidev/package.json
+++ b/packages/slidev/package.json
@@ -81,6 +81,7 @@
     "kolorist": "^1.8.0",
     "local-pkg": "^0.5.0",
     "lz-string": "^1.5.0",
+    "magic-string": "^0.30.9",
     "markdown-it": "^14.1.0",
     "markdown-it-footnote": "^4.0.0",
     "markdown-it-link-attributes": "^4.0.1",
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index f2ec69cc81..3df92a3fef 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -7,3 +7,4 @@ export * from './hmr'
 export * from './code-runner'
 export * from './options'
 export * from './vite'
+export * from './transform'
diff --git a/packages/types/src/transform.ts b/packages/types/src/transform.ts
new file mode 100644
index 0000000000..8958c5f10a
--- /dev/null
+++ b/packages/types/src/transform.ts
@@ -0,0 +1,7 @@
+import type MagicString from 'magic-string'
+
+export interface MarkdownTransformContext {
+  s: MagicString
+  ignores: [number, number][]
+  isIgnored: (index: number) => boolean
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 98696695e7..2de68fcc99 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -546,6 +546,9 @@ importers:
       lz-string:
         specifier: ^1.5.0
         version: 1.5.0
+      magic-string:
+        specifier: ^0.30.9
+        version: 0.30.9
       markdown-it:
         specifier: ^14.1.0
         version: 14.1.0
@@ -3263,7 +3266,7 @@ packages:
       colorette: 2.0.20
       consola: 3.2.3
       fast-glob: 3.3.2
-      magic-string: 0.30.8
+      magic-string: 0.30.9
       pathe: 1.1.2
       perfect-debounce: 1.0.0
     transitivePeerDependencies:
@@ -3326,7 +3329,7 @@ packages:
       '@unocss/rule-utils': 0.58.9
       css-tree: 2.3.1
       fast-glob: 3.3.2
-      magic-string: 0.30.8
+      magic-string: 0.30.9
       postcss: 8.4.38
 
   /@unocss/preset-attributify@0.42.1:
@@ -3450,7 +3453,7 @@ packages:
     engines: {node: '>=14'}
     dependencies:
       '@unocss/core': 0.58.9
-      magic-string: 0.30.8
+      magic-string: 0.30.9
 
   /@unocss/scope@0.42.1:
     resolution: {integrity: sha512-nFkfZwBGLl6nN6bBaUrF1l2ZkMcg2dAibSlA0U1mr+75L14gem2o+QR++Q76dATiLA9ljdL++Tn5JLR8zGQ7xg==}
@@ -3539,7 +3542,7 @@ packages:
       '@unocss/transformer-directives': 0.58.9
       chokidar: 3.6.0
       fast-glob: 3.3.2
-      magic-string: 0.30.8
+      magic-string: 0.30.9
       vite: 3.2.8(@types/node@20.12.2)
     transitivePeerDependencies:
       - rollup
@@ -3559,7 +3562,7 @@ packages:
       '@unocss/transformer-directives': 0.58.9
       chokidar: 3.6.0
       fast-glob: 3.3.2
-      magic-string: 0.30.8
+      magic-string: 0.30.9
       vite: 5.2.7(@types/node@20.12.2)
     transitivePeerDependencies:
       - rollup
@@ -3610,7 +3613,7 @@ packages:
   /@vitest/snapshot@1.4.0:
     resolution: {integrity: sha512-saAFnt5pPIA5qDGxOHxJ/XxhMFKkUSBJmVt5VgDsAqPTX6JP326r5C/c9UuCMPoXNzuudTPsYDZCoJ5ilpqG2A==}
     dependencies:
-      magic-string: 0.30.8
+      magic-string: 0.30.9
       pathe: 1.1.2
       pretty-format: 29.7.0
     dev: true
@@ -3706,7 +3709,7 @@ packages:
       '@vue/compiler-ssr': 3.4.21
       '@vue/shared': 3.4.21
       estree-walker: 2.0.2
-      magic-string: 0.30.8
+      magic-string: 0.30.9
       postcss: 8.4.38
       source-map-js: 1.2.0
 
@@ -3988,7 +3991,7 @@ packages:
       '@windicss/config': 1.9.3
       debug: 4.3.4(supports-color@8.1.1)
       fast-glob: 3.3.2
-      magic-string: 0.30.8
+      magic-string: 0.30.9
       micromatch: 4.0.5
       windicss: 3.5.6
     transitivePeerDependencies:
@@ -7546,8 +7549,8 @@ packages:
       sourcemap-codec: 1.4.8
     dev: true
 
-  /magic-string@0.30.8:
-    resolution: {integrity: sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==}
+  /magic-string@0.30.9:
+    resolution: {integrity: sha512-S1+hd+dIrC8EZqKyT9DstTH/0Z+f76kmmvZnkfQVmOpDEF9iVgdYif3Q/pIWHmCoo59bQVGW0kVL3e2nl+9+Sw==}
     engines: {node: '>=12'}
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
@@ -10195,7 +10198,7 @@ packages:
     dependencies:
       acorn: 8.11.3
       estree-walker: 3.0.3
-      magic-string: 0.30.8
+      magic-string: 0.30.9
       unplugin: 1.6.0
     optional: true
 
@@ -10237,7 +10240,7 @@ packages:
       estree-walker: 3.0.3
       fast-glob: 3.3.2
       local-pkg: 0.5.0
-      magic-string: 0.30.8
+      magic-string: 0.30.9
       mlly: 1.6.1
       pathe: 1.1.2
       pkg-types: 1.0.3
@@ -10472,7 +10475,7 @@ packages:
       debug: 4.3.4(supports-color@8.1.1)
       fast-glob: 3.3.2
       local-pkg: 0.4.3
-      magic-string: 0.30.8
+      magic-string: 0.30.9
       minimatch: 9.0.3
       resolve: 1.22.8
       unplugin: 1.6.0
@@ -10708,7 +10711,7 @@ packages:
       blueimp-md5: 2.19.0
       debug: 4.3.4(supports-color@8.1.1)
       fs-extra: 11.2.0
-      magic-string: 0.30.8
+      magic-string: 0.30.9
       vite: 5.2.7(@types/node@20.12.2)
     transitivePeerDependencies:
       - supports-color
@@ -10930,7 +10933,7 @@ packages:
       debug: 4.3.4(supports-color@8.1.1)
       execa: 8.0.1
       local-pkg: 0.5.0
-      magic-string: 0.30.8
+      magic-string: 0.30.9
       pathe: 1.1.2
       picocolors: 1.0.0
       std-env: 3.7.0
diff --git a/test/__snapshots__/transform.test.ts.snap b/test/__snapshots__/transform.test.ts.snap
index e366d21256..0e2f6297b6 100644
--- a/test/__snapshots__/transform.test.ts.snap
+++ b/test/__snapshots__/transform.test.ts.snap
@@ -21,6 +21,9 @@ h1 {
 }
 </style>
 
+
+<CodeBlockWrapper v-bind="{}" :ranges='[]'>
+
 \`\`\`css
 <style>
 h1 {
@@ -28,6 +31,8 @@ h1 {
 }
 </style>
 \`\`\`
+
+</CodeBlockWrapper>
 "
 `;
 
@@ -71,12 +76,17 @@ Default Slot
 <template v-slot:code="slotProps">
 
 
+
+<CodeBlockWrapper v-bind="{}" :ranges='[]'>
+
 \`\`\`md
 Slot Usage
 ::right::
 ::left::
 \`\`\`
 
+</CodeBlockWrapper>
+
 
 
 </template>"
diff --git a/test/_tutils.ts b/test/_tutils.ts
new file mode 100644
index 0000000000..185174a6c9
--- /dev/null
+++ b/test/_tutils.ts
@@ -0,0 +1,13 @@
+import MagicString from 'magic-string'
+import type { MarkdownTransformContext } from '@slidev/types'
+
+export function createTransformContext(code: string): MarkdownTransformContext {
+  const s = new MagicString(code)
+  return {
+    s,
+    ignores: [],
+    isIgnored(index: number) {
+      return this.ignores.some(([start, end]) => index >= start && index < end)
+    },
+  }
+}
diff --git a/test/transform-magic-move.test.ts b/test/transform-magic-move.test.ts
index e97c3e373f..3f1f7ae36a 100644
--- a/test/transform-magic-move.test.ts
+++ b/test/transform-magic-move.test.ts
@@ -1,6 +1,7 @@
 import { expect, it } from 'vitest'
 import { getHighlighter } from 'shiki'
 import { transformMagicMove } from '../packages/slidev/node/syntax/transform'
+import { createTransformContext } from './_tutils'
 
 it('basic', async () => {
   const code = `
@@ -25,13 +26,17 @@ Some text after
     langs: ['typescript'],
   })
 
-  expect(transformMagicMove(
-    code,
+  const ctx = createTransformContext(code)
+
+  transformMagicMove(
+    ctx,
     shiki,
     {
       theme: 'nord',
     },
-  ))
+  )
+
+  expect(ctx.s.toString())
     .toMatchInlineSnapshot(`
       "
 
@@ -67,13 +72,17 @@ Some text after
     langs: ['angular-ts'],
   })
 
-  expect(transformMagicMove(
-    code,
+  const ctx = createTransformContext(code)
+
+  transformMagicMove(
+    ctx,
     shiki,
     {
       theme: 'nord',
     },
-  ))
+  )
+
+  expect(ctx.s.toString())
     .toMatchInlineSnapshot(`
         "
 
diff --git a/test/transform.test.ts b/test/transform.test.ts
index f8bd1971b4..accf92b318 100644
--- a/test/transform.test.ts
+++ b/test/transform.test.ts
@@ -1,13 +1,11 @@
 import path from 'node:path'
 import { describe, expect, it } from 'vitest'
-import { transformMermaid, transformPageCSS, transformPlantUml, transformSlotSugar, transformSnippet } from '../packages/slidev/node/syntax/transform'
-
-// const isMacOS = process.platform === 'darwin'
-// const isNode18orAbove = +process.version.slice(1, 3) >= 18
+import { transformCodeWrapper, transformMermaid, transformPageCSS, transformPlantUml, transformSlotSugar, transformSnippet } from '../packages/slidev/node/syntax/transform'
+import { createTransformContext } from './_tutils'
 
 describe('markdown transform', () => {
   it('slot-sugar', () => {
-    expect(transformSlotSugar(`
+    const ctx = createTransformContext(`
 # Page 
 
 Default Slot
@@ -15,11 +13,17 @@ Default Slot
 Right Slot
 ::left::
 <div>Left Slot</div>
-`)).toMatchSnapshot()
+`)
+
+    transformCodeWrapper(ctx)
+    transformSlotSugar(ctx)
+
+    expect(ctx.s.toString()).toMatchSnapshot()
+    expect(ctx.ignores).toMatchInlineSnapshot(`[]`)
   })
 
   it('slot-sugar with default', () => {
-    expect(transformSlotSugar(`
+    const ctx = createTransformContext(`
 :: right::
 Right Slot
 ::left ::
@@ -27,11 +31,16 @@ Right Slot
 :: default ::
 # Page 
 Default Slot
-`)).toMatchSnapshot()
+`)
+
+    transformSlotSugar(ctx)
+
+    expect(ctx.s.toString()).toMatchSnapshot()
+    expect(ctx.ignores).toMatchInlineSnapshot(`[]`)
   })
 
   it('slot-sugar with code', () => {
-    expect(transformSlotSugar(`
+    const ctx = createTransformContext(`
 # Page 
 
 Default Slot
@@ -44,11 +53,24 @@ Slot Usage
 ::left::
 \`\`\`
 
-`)).toMatchSnapshot()
+`)
+
+    transformCodeWrapper(ctx)
+    transformSlotSugar(ctx)
+
+    expect(ctx.s.toString()).toMatchSnapshot()
+    expect(ctx.ignores).toMatchInlineSnapshot(`
+      [
+        [
+          34,
+          73,
+        ],
+      ]
+    `)
   })
 
   it('slot-sugar with symbols in name', () => {
-    expect(transformSlotSugar(`
+    const ctx = createTransformContext(`
 # Page 
 
 Default Slot
@@ -56,11 +78,16 @@ Default Slot
 First Slot
 ::slot.2::
 Second Slot
-`)).toMatchSnapshot()
+`)
+
+    transformSlotSugar(ctx)
+
+    expect(ctx.s.toString()).toMatchSnapshot()
+    expect(ctx.ignores).toMatchInlineSnapshot(`[]`)
   })
 
   it('inline CSS', () => {
-    expect(transformPageCSS(`
+    const ctx = createTransformContext(`
 # Page 
 
 <style>
@@ -76,11 +103,24 @@ h1 {
 }
 </style>
 \`\`\`
-`, '01.md')).toMatchSnapshot()
+`)
+
+    transformCodeWrapper(ctx)
+    transformPageCSS(ctx, '01.md')
+
+    expect(ctx.s.toString()).toMatchSnapshot()
+    expect(ctx.ignores).toMatchInlineSnapshot(`
+      [
+        [
+          49,
+          99,
+        ],
+      ]
+    `)
   })
 
   it('mermaid', () => {
-    expect(transformMermaid(`
+    const ctx = createTransformContext(`
 # Page 
 
 \`\`\`mermaid
@@ -95,12 +135,27 @@ B[Text] --> C{Decision}
 C -->|One| D[Result 1]
 C -->|Two| E[Result 2]
 \`\`\`
-`)).toMatchSnapshot()
+`)
+
+    transformMermaid(ctx)
+
+    expect(ctx.s.toString()).toMatchSnapshot()
+    expect(ctx.ignores).toMatchInlineSnapshot(`
+      [
+        [
+          10,
+          126,
+        ],
+        [
+          128,
+          252,
+        ],
+      ]
+    `)
   })
 
   it('plantUML', () => {
-    const result = transformPlantUml(
-      `
+    const ctx = createTransformContext(`
 # Page
 
 \`\`\`plantuml
@@ -126,11 +181,23 @@ Alice <- Bob : Hello, too!
 *** <s>Raspyfi</s> => Volumio
 @endmindmap
 \`\`\`
-`,
-      'https://www.plantuml.com/plantuml',
-    )
+`)
 
-    expect(result).toContain(`<PlantUml :code="'JOzD`)
+    transformPlantUml(ctx, 'https://www.plantuml.com/plantuml')
+
+    expect(ctx.s.toString()).toContain(`<PlantUml :code="'JOzD`)
+    expect(ctx.ignores).toMatchInlineSnapshot(`
+      [
+        [
+          9,
+          90,
+        ],
+        [
+          92,
+          338,
+        ],
+      ]
+    `)
 
     // TODO: not so sure on this,
     // it seems the encode result of `plantuml-encoder` is different across platforms since Node 18
@@ -139,16 +206,25 @@ Alice <- Bob : Hello, too!
   })
 
   it('external snippet', () => {
-    expect(transformSnippet(`
+    const ctx = createTransformContext(`
 <<< @/snippets/snippet.ts#snippet ts {2|3|4}{lines:true}
-`, {
-      userRoot: path.join(__dirname, './fixtures/'),
-      data: {
-        slides: [
-          {} as any,
-        ],
-        watchFiles: [],
-      },
-    } as any, `/@slidev/slides/1.md`)).toMatchSnapshot()
+`)
+
+    transformSnippet(
+      ctx,
+      {
+        userRoot: path.join(__dirname, './fixtures/'),
+        data: {
+          slides: [
+            {} as any,
+          ],
+          watchFiles: [],
+        },
+      } as any,
+`/@slidev/slides/1.md`,
+    )
+
+    expect(ctx.s.toString()).toMatchSnapshot()
+    expect(ctx.ignores).toMatchInlineSnapshot(`[]`)
   })
 })