@slidev/cli 0.49.0-beta.3 → 0.49.0-beta.4

package/README.md

@@ -79,7 +79,7 @@ For a full example, you can check the [demo](https://github.com/slidevjs/slidev/
 - [Vite](https://vitejs.dev) - An extremely fast frontend tooling
 - [Vue 3](https://v3.vuejs.org/) powered [Markdown](https://daringfireball.net/projects/markdown/syntax) - Focus on the content while having the power of HTML and Vue components whenever needed
 - [UnoCSS](https://github.com/unocss/unocss) - On-demand utility-first CSS engine, style your slides at ease
-- [Prism](https://github.com/PrismJS/prism), [Shiki](https://github.com/shikijs/shiki), [Monaco Editor](https://github.com/Microsoft/monaco-editor) - First-class code snippets support with live coding capability
+- [Shiki](https://github.com/shikijs/shiki), [Monaco Editor](https://github.com/Microsoft/monaco-editor) - First-class code snippets support with live coding capability
 - [RecordRTC](https://recordrtc.org) - Built-in recording and camera view
 - [VueUse](https://vueuse.org) family - [`@vueuse/core`](https://github.com/vueuse/vueuse), [`@vueuse/motion`](https://github.com/vueuse/motion), etc.
 - [Iconify](https://iconify.design/) - Iconsets collection.

package/dist/{build-IFALC6GJ.mjs → build-ULWOL6YC.mjs}

@@ -2,7 +2,7 @@ import {
   ViteSlidevPlugin,
   getIndexHtml,
   mergeViteConfigs
-} from "./chunk-Y6VNORK4.mjs";
+} from "./chunk-NZM6E5T7.mjs";
 import "./chunk-LOUKLO2C.mjs";
 import "./chunk-AQQIBD5X.mjs";
 import "./chunk-BXO7ZPPU.mjs";

package/dist/{chunk-KUKH6IFA.mjs → chunk-DRELQPK4.mjs}

@@ -1,7 +1,7 @@
 import {
   ViteSlidevPlugin,
   mergeViteConfigs
-} from "./chunk-Y6VNORK4.mjs";
+} from "./chunk-NZM6E5T7.mjs";
 import {
   createResolver,
   getRoots,
@@ -48,7 +48,7 @@ async function createServer(options, viteConfig = {}, serverOptions = {}) {
 import * as parser from "@slidev/parser/fs";
 
 // package.json
-var version = "0.49.0-beta.3";
+var version = "0.49.0-beta.4";
 
 // node/integrations/themes.ts
 import { join as join2 } from "node:path";

package/dist/{chunk-Y6VNORK4.mjs → chunk-NZM6E5T7.mjs}

@@ -6706,14 +6706,14 @@ var require_parser = __commonJS({
             case "scalar":
             case "single-quoted-scalar":
             case "double-quoted-scalar": {
-              const fs7 = this.flowScalar(this.type);
+              const fs6 = this.flowScalar(this.type);
               if (atNextItem || it.value) {
-                map.items.push({ start, key: fs7, sep: [] });
+                map.items.push({ start, key: fs6, sep: [] });
                 this.onKeyLine = true;
               } else if (it.sep) {
-                this.stack.push(fs7);
+                this.stack.push(fs6);
               } else {
-                Object.assign(it, { key: fs7, sep: [] });
+                Object.assign(it, { key: fs6, sep: [] });
                 this.onKeyLine = true;
               }
               return;
@@ -6831,13 +6831,13 @@ var require_parser = __commonJS({
             case "scalar":
             case "single-quoted-scalar":
             case "double-quoted-scalar": {
-              const fs7 = this.flowScalar(this.type);
+              const fs6 = this.flowScalar(this.type);
               if (!it || it.value)
-                fc.items.push({ start: [], key: fs7, sep: [] });
+                fc.items.push({ start: [], key: fs6, sep: [] });
               else if (it.sep)
-                this.stack.push(fs7);
+                this.stack.push(fs6);
               else
-                Object.assign(it, { key: fs7, sep: [] });
+                Object.assign(it, { key: fs6, sep: [] });
               return;
             }
             case "flow-map-end":
@@ -7315,7 +7315,7 @@ var dependencies = {
   "@slidev/types": "workspace:*",
   "@typescript/ata": "^0.9.4",
   "@unhead/vue": "^1.9.5",
-  "@unocss/reset": "^0.59.2",
+  "@unocss/reset": "^0.59.3",
   "@vueuse/core": "^10.9.0",
   "@vueuse/math": "^10.9.0",
   "@vueuse/motion": "^2.1.0",
@@ -7331,10 +7331,10 @@ var dependencies = {
   prettier: "^3.2.5",
   recordrtc: "^5.6.2",
   shiki: "^1.3.0",
-  "shiki-magic-move": "^0.3.5",
+  "shiki-magic-move": "^0.3.6",
   typescript: "^5.4.5",
-  unocss: "^0.59.2",
-  vue: "^3.4.21",
+  unocss: "^0.59.3",
+  vue: "^3.4.22",
   "vue-demi": "^0.14.7",
   "vue-router": "^4.3.0",
   yaml: "^2.4.1"
@@ -7496,9 +7496,8 @@ function getDefine(options) {
 
 // node/vite/loaders.ts
 import path from "node:path";
-import { isString as isString2, isTruthy as isTruthy2, notNullish, range } from "@antfu/utils";
+import { isString as isString2, isTruthy, notNullish, range } from "@antfu/utils";
 import fg3 from "fast-glob";
-import fs4 from "fs-extra";
 import Markdown from "markdown-it";
 import { bold, gray, red, yellow } from "kolorist";
 import mila from "markdown-it-link-attributes";
@@ -7635,83 +7634,55 @@ ${Object.entries(layouts).map(([k, v]) => `"${k}": ${v}`).join(",\n")}
   }
 };
 
-// node/virtual/monaco-types.ts
-import { builtinModules } from "node:module";
-import { join as join5, resolve as resolve2 } from "node:path";
-import fg2 from "fast-glob";
+// node/virtual/monaco-deps.ts
+import { resolve as resolve2 } from "node:path";
 import { uniq as uniq2 } from "@antfu/utils";
-
-// node/syntax/transform/monaco.ts
-import { isTruthy } from "@antfu/utils";
-import lz from "lz-string";
-function transformMonaco(ctx, enabled = true) {
-  if (!enabled) {
-    ctx.s.replace(/{monaco([\w:,-]*)}/g, "");
-    return;
-  }
-  ctx.s.replace(
-    /^```(\w+?)\s*{monaco-diff}\s*?({.*?})?\s*?\n([\s\S]+?)^~~~\s*?\n([\s\S]+?)^```/mg,
-    (full, lang = "ts", options = "{}", code, diff, index) => {
-      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}" />`;
-    }
-  );
-  ctx.s.replace(
-    /^```(\w+?)\s*{monaco}\s*?({.*?})?\s*?\n([\s\S]+?)^```/mg,
-    (full, lang = "ts", options = "{}", code, index) => {
-      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}" />`;
-    }
-  );
-  ctx.s.replace(
-    /^```(\w+?)\s*{monaco-run}\s*?({.*?})?\s*?\n([\s\S]+?)^```/mg,
-    (full, lang = "ts", options = "{}", code, index) => {
-      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}" />`;
-    }
-  );
-}
-function scanMonacoModules(md2) {
-  const typeModules = /* @__PURE__ */ new Set();
-  md2.replace(
-    /^```(\w+?)\s*{monaco([\w:,-]*)}[\s\n]*([\s\S]+?)^```/mg,
-    (full, lang = "ts", options, code) => {
-      options = options || "";
-      lang = lang.trim();
-      if (lang === "ts" || lang === "typescript") {
-        Array.from(code.matchAll(/\s+from\s+(["'])([\/\w@-]+)\1/g)).map((i) => i[2]).filter(isTruthy).map((i) => typeModules.add(i));
-      }
+var templateMonacoRunDeps = {
+  id: "/@slidev/monaco-run-deps",
+  getContent: async ({ userRoot, data }, _ctx, pluginCtx) => {
+    if (!data.features.monaco)
       return "";
+    const deps = uniq2(data.features.monaco.deps.concat(data.config.monacoTypesAdditionalPackages));
+    const importerPath = resolve2(userRoot, "./snippets/__importer__.ts");
+    let result = "";
+    for (let i = 0; i < deps.length; i++) {
+      const specifier = deps[i];
+      const resolved = await pluginCtx.resolve(specifier, importerPath);
+      if (!resolved)
+        continue;
+      result += `import * as vendored${i} from ${JSON.stringify(resolved.id)}
+`;
     }
-  );
-  return Array.from(typeModules);
-}
+    result += "export default {\n";
+    for (let i = 0; i < deps.length; i++)
+      result += `${JSON.stringify(deps[i])}: vendored${i},
+`;
+    result += "}\n";
+    return result;
+  }
+};
 
 // node/virtual/monaco-types.ts
+import { builtinModules } from "node:module";
+import { join as join5, resolve as resolve3 } from "node:path";
+import fg2 from "fast-glob";
+import { uniq as uniq3 } from "@antfu/utils";
 var templateMonacoTypes = {
   id: "/@slidev/monaco-types",
   getContent: async ({ userRoot, data }) => {
+    if (!data.features.monaco)
+      return "";
     const typesRoot = join5(userRoot, "snippets");
     const files = await fg2(["**/*.ts", "**/*.mts", "**/*.cts"], { cwd: typesRoot });
     let result = 'import { addFile } from "@slidev/client/setup/monaco.ts"\n';
     for (const file of files) {
-      const url = `${toAtFS(resolve2(typesRoot, file))}?monaco-types&raw`;
+      const url = `${toAtFS(resolve3(typesRoot, file))}?monaco-types&raw`;
       result += `addFile(import(${JSON.stringify(url)}), ${JSON.stringify(file)})
 `;
     }
     const deps = [...data.config.monacoTypesAdditionalPackages];
     if (data.config.monacoTypesSource === "local")
-      deps.push(...scanMonacoModules(data.slides.map((s) => s.source.raw).join()));
+      deps.push(...data.features.monaco.types);
     function mapModuleNameToModule(moduleSpecifier) {
       if (moduleSpecifier.startsWith("node:"))
         return "node";
@@ -7724,7 +7695,7 @@ var templateMonacoTypes = {
       const moduleName = a.startsWith("@") ? `${a}/${b}` : a;
       return moduleName;
     }
-    for (const specifier of uniq2(deps)) {
+    for (const specifier of uniq3(deps)) {
       if (specifier[0] === ".")
         continue;
       const moduleName = mapModuleNameToModule(specifier);
@@ -7965,6 +7936,7 @@ var templateTitleRenderer = {
 var templates = [
   templateShiki,
   templateMonacoTypes,
+  templateMonacoRunDeps,
   templateConfigs,
   templateStyle,
   templateGlobalBottom,
@@ -7991,13 +7963,13 @@ var templateImportContextUtils = `import {
 } from "@slidev/client/context.ts"`.replace(/\n\s*/g, " ");
 var templateInitContext = `const { $slidev, $nav, $clicksContext, $clicks, $page, $renderContext, $frontmatter } = useSlideContext()`;
 function getBodyJson(req) {
-  return new Promise((resolve4, reject) => {
+  return new Promise((resolve5, reject) => {
     let body = "";
     req.on("data", (chunk) => body += chunk);
     req.on("error", reject);
     req.on("end", () => {
       try {
-        resolve4(JSON.parse(body) || {});
+        resolve5(JSON.parse(body) || {});
       } catch (e) {
         reject(e);
       }
@@ -8033,7 +8005,7 @@ function createSlidesLoader(options, pluginOptions, serverOptions) {
   let _layouts_cache_time = 0;
   let _layouts_cache = {};
   let skipHmr = null;
-  const { data, clientRoot, userRoot, roots, mode } = options;
+  const { data, clientRoot, roots, mode } = options;
   const templateCtx = {
     md,
     async getLayouts() {
@@ -8108,17 +8080,6 @@ function createSlidesLoader(options, pluginOptions, serverOptions) {
           }
           next();
         });
-        const snippetsPath = path.resolve(userRoot, "snippets/__importer__.ts");
-        server.middlewares.use(async (req, res, next) => {
-          const match = req.url?.match(/^\/\@slidev\/resolve-id\?specifier=(.*)$/);
-          if (!match)
-            return next();
-          const [, specifier] = match;
-          const resolved = await server.pluginContainer.resolveId(specifier, snippetsPath);
-          res.statusCode = 200;
-          res.write(resolved?.id ?? "");
-          return res.end();
-        });
       },
       async handleHotUpdate(ctx) {
         if (!data.watchFiles.includes(ctx.file))
@@ -8151,14 +8112,7 @@ function createSlidesLoader(options, pluginOptions, serverOptions) {
         for (let i = 0; i < length; i++) {
           const a = data.slides[i];
           const b = newData.slides[i];
-          if (!hmrPages.has(i) && a.content.trim() === b.content.trim() && a.title?.trim() === b.title?.trim() && equal(a.frontmatter, b.frontmatter) && Object.entries(a.snippetsUsed ?? {}).every(([file, oldContent]) => {
-            try {
-              const newContent = fs4.readFileSync(file, "utf-8");
-              return oldContent === newContent;
-            } catch {
-              return false;
-            }
-          })) {
+          if (!hmrPages.has(i) && a.content.trim() === b.content.trim() && a.title?.trim() === b.title?.trim() && equal(a.frontmatter, b.frontmatter)) {
             if (a.note !== b.note) {
               ctx.server.hot.send(
                 "slidev:update-note",
@@ -8183,12 +8137,20 @@ function createSlidesLoader(options, pluginOptions, serverOptions) {
         Object.assign(data, newData);
         if (hmrPages.size > 0)
           moduleIds.add(templateTitleRendererMd.id);
-        const vueModules = Array.from(hmrPages).flatMap((i) => [
-          ctx.server.moduleGraph.getModuleById(`${VIRTUAL_SLIDE_PREFIX}${i + 1}.frontmatter`),
-          ctx.server.moduleGraph.getModuleById(`${VIRTUAL_SLIDE_PREFIX}${i + 1}.md`)
-        ]);
+        const vueModules = Array.from(hmrPages).flatMap((i) => {
+          const id = `${VIRTUAL_SLIDE_PREFIX}${i + 1}`;
+          const frontmatter = ctx.server.moduleGraph.getModuleById(`${id}.frontmatter`);
+          const main = ctx.server.moduleGraph.getModuleById(`${id}.md`);
+          const styles = main ? [...main.clientImportedModules].find((m) => m.id?.startsWith(`${id}.md?vue&type=style`)) : void 0;
+          return [
+            frontmatter,
+            main,
+            styles
+          ];
+        });
         hmrPages.clear();
         const moduleEntries = [
+          ...ctx.modules.filter((i) => i.id === templateMonacoRunDeps.id || i.id === templateMonacoTypes.id),
           ...vueModules,
           ...Array.from(moduleIds).map((id) => ctx.server.moduleGraph.getModuleById(id))
         ].filter(notNullish).filter((i) => !i.id?.startsWith("/@id/@vite-icons"));
@@ -8196,7 +8158,7 @@ function createSlidesLoader(options, pluginOptions, serverOptions) {
         return moduleEntries;
       },
       resolveId(id) {
-        if (id.startsWith(VIRTUAL_SLIDE_PREFIX) || id.startsWith("/@slidev/"))
+        if (id.startsWith("/@slidev/"))
           return id;
         return null;
       },
@@ -8204,7 +8166,7 @@ function createSlidesLoader(options, pluginOptions, serverOptions) {
         const template = templates.find((i) => i.id === id);
         if (template) {
           return {
-            code: await template.getContent(options, templateCtx),
+            code: await template.getContent(options, templateCtx, this),
             map: { mappings: "" }
           };
         }
@@ -8344,7 +8306,7 @@ function createSlidesLoader(options, pluginOptions, serverOptions) {
               content: Array.isArray(keywords) ? keywords.join(", ") : keywords
             }
           }
-        ].filter(isTruthy2);
+        ].filter(isTruthy);
       }
     }
   ];
@@ -8455,7 +8417,7 @@ ${code}`;
 
 // node/vite/markdown.ts
 import Markdown2 from "unplugin-vue-markdown/vite";
-import { isTruthy as isTruthy3, slash } from "@antfu/utils";
+import { isTruthy as isTruthy2, slash as slash2 } from "@antfu/utils";
 
 // ../../node_modules/.pnpm/@hedgedoc+markdown-it-plugins@2.1.4_patch_hash=tuyuxytl56b2vxulpkzt2wf4o4_markdown-it@14.1.0/node_modules/@hedgedoc/markdown-it-plugins/dist/esm/image-size/specialCharacters.js
 var SpecialCharacters;
@@ -8584,8 +8546,7 @@ function startsWithTodoMarkdown(token) {
 
 // node/vite/markdown.ts
 import MarkdownItMdc from "markdown-it-mdc";
-import { SourceMapConsumer } from "source-map-js";
-import MagicString from "magic-string";
+import MagicString from "magic-string-stack";
 import MarkdownItAttrs from "markdown-it-link-attributes";
 import MarkdownItFootnote from "markdown-it-footnote";
 
@@ -8746,6 +8707,24 @@ import * as htmlparser2 from "htmlparser2";
 function normalizeRangeStr(rangeStr = "") {
   return !rangeStr.trim() ? [] : rangeStr.trim().split(/\|/g).map((i) => i.trim());
 }
+function getCodeBlocks(md2) {
+  const codeblocks = Array.from(md2.matchAll(/^```[\s\S]*?^```/mg)).map((m) => {
+    const start = m.index;
+    const end = m.index + m[0].length;
+    const startLine = md2.slice(0, start).match(/\n/g)?.length || 0;
+    const endLine = md2.slice(0, end).match(/\n/g)?.length || 0;
+    return [start, end, startLine, endLine];
+  });
+  return {
+    codeblocks,
+    isInsideCodeblocks(idx) {
+      return codeblocks.some(([s, e]) => s <= idx && idx <= e);
+    },
+    isLineInsideCodeblocks(line) {
+      return codeblocks.some(([, , s, e]) => s <= line && line <= e);
+    }
+  };
+}
 function escapeVueInCode(md2) {
   return md2.replace(/{{/g, "&lbrace;&lbrace;");
 }
@@ -8848,11 +8827,28 @@ function markdownItPrism(markdownit, useroptions) {
 }
 
 // node/syntax/markdown-it/markdown-it-v-drag.ts
-function markdownItVDrag(md2, sourceMapConsumers) {
+import { SourceMapConsumer } from "source-map-js";
+function markdownItVDrag(md2, markdownTransformMap) {
   const visited = /* @__PURE__ */ new WeakSet();
+  const sourceMapConsumers = /* @__PURE__ */ new WeakMap();
+  function getSourceMapConsumer(id) {
+    const s = markdownTransformMap.get(id);
+    if (!s)
+      return void 0;
+    let smc = sourceMapConsumers.get(s);
+    if (smc)
+      return smc;
+    const sourceMap = s.generateMap();
+    smc = new SourceMapConsumer({
+      ...sourceMap,
+      version: sourceMap.version.toString()
+    });
+    sourceMapConsumers.set(s, smc);
+    return smc;
+  }
   const _parse = md2.parse;
   md2.parse = function(src, env) {
-    const smc = sourceMapConsumers[env.id];
+    const smc = getSourceMapConsumer(env.id);
     const toOriginalPos = smc ? (line) => smc.originalPositionFor({ line, column: 0 }).line : (line) => line;
     function toMarkdownSource(map, idx) {
       const [start, end] = map;
@@ -8879,13 +8875,10 @@ var reCodeBlock = /^```([\w'-]+?)(?:\s*{([\d\w*,\|-]+)}\s*?({.*?})?(.*?))?\n([\s
 function transformCodeWrapper(ctx) {
   ctx.s.replace(
     reCodeBlock,
-    (full, lang = "", rangeStr = "", options = "", attrs = "", code, index) => {
-      if (ctx.isIgnored(index))
-        return full;
+    (full, lang = "", rangeStr = "", options = "", attrs = "", code) => {
       const ranges = normalizeRangeStr(rangeStr);
       code = code.trimEnd();
       options = options.trim() || "{}";
-      ctx.ignores.push([index, index + full.length]);
       return `
 <CodeBlockWrapper v-bind="${options}" :ranges='${JSON.stringify(ranges)}'>
 
@@ -8900,57 +8893,58 @@ ${code}
 
 // node/syntax/transform/magic-move.ts
 import { codeToKeyedTokens } from "shiki-magic-move/core";
-import lz2 from "lz-string";
+import lz from "lz-string";
 var reMagicMoveBlock = /^````(?:md|markdown) magic-move(?:[ ]*(\{.*?\})?([^\n]*?))?\n([\s\S]+?)^````$/mg;
-function transformMagicMove(ctx, shiki2, shikiOptions2) {
-  ctx.s.replace(
-    reMagicMoveBlock,
-    (full, options = "{}", _attrs = "", body, index) => {
-      if (!shiki2 || !shikiOptions2)
-        throw new Error("Shiki is required for Magic Move. You may need to set `highlighter: shiki` in your Slidev config.");
-      const matches = Array.from(body.matchAll(reCodeBlock));
-      if (!matches.length)
-        throw new Error("Magic Move block must contain at least one code block");
-      const ranges = matches.map((i) => normalizeRangeStr(i[2]));
-      const steps = matches.map(
-        (i) => codeToKeyedTokens(shiki2, i[5].trimEnd(), {
-          ...shikiOptions2,
-          lang: i[1]
-        })
-      );
-      const compressed = lz2.compressToBase64(JSON.stringify(steps));
-      ctx.ignores.push([index, index + full.length]);
-      return `<ShikiMagicMove v-bind="${options}" steps-lz="${compressed}" :step-ranges='${JSON.stringify(ranges)}' />`;
-    }
-  );
+function transformMagicMove(shiki, shikiOptions) {
+  return (ctx) => {
+    ctx.s.replace(
+      reMagicMoveBlock,
+      (full, options = "{}", _attrs = "", body) => {
+        if (!shiki || !shikiOptions)
+          throw new Error("Shiki is required for Magic Move. You may need to set `highlighter: shiki` in your Slidev config.");
+        const matches = Array.from(body.matchAll(reCodeBlock));
+        if (!matches.length)
+          throw new Error("Magic Move block must contain at least one code block");
+        const ranges = matches.map((i) => normalizeRangeStr(i[2]));
+        const steps = matches.map(
+          (i) => codeToKeyedTokens(shiki, i[5].trimEnd(), {
+            ...shikiOptions,
+            lang: i[1]
+          })
+        );
+        const compressed = lz.compressToBase64(JSON.stringify(steps));
+        return `<ShikiMagicMove v-bind="${options}" steps-lz="${compressed}" :step-ranges='${JSON.stringify(ranges)}' />`;
+      }
+    );
+  };
 }
 
 // node/syntax/transform/mermaid.ts
-import lz3 from "lz-string";
+import lz2 from "lz-string";
 function transformMermaid(ctx) {
-  ctx.s.replace(/^```mermaid\s*?({.*?})?\n([\s\S]+?)\n```/mg, (full, options = "", code = "", index) => {
+  ctx.s.replace(/^```mermaid\s*?({.*?})?\n([\s\S]+?)\n```/mg, (full, options = "", code = "") => {
     code = code.trim();
     options = options.trim() || "{}";
-    const encoded = lz3.compressToBase64(code);
-    ctx.ignores.push([index, index + full.length]);
+    const encoded = lz2.compressToBase64(code);
     return `<Mermaid code-lz="${encoded}" v-bind="${options}" />`;
   });
 }
 
 // node/syntax/transform/plant-uml.ts
 import { encode as encodePlantUml } from "plantuml-encoder";
-function transformPlantUml(ctx, server) {
-  ctx.s.replace(/^```plantuml\s*?({.*?})?\n([\s\S]+?)\n```/mg, (full, options = "", content = "", index) => {
+function transformPlantUml(ctx) {
+  const server = ctx.options.data.config.plantUmlServer;
+  ctx.s.replace(/^```plantuml\s*?({.*?})?\n([\s\S]+?)\n```/mg, (full, options = "", content = "") => {
     const code = encodePlantUml(content.trim());
     options = options.trim() || "{}";
-    ctx.ignores.push([index, index + full.length]);
     return `<PlantUml :code="'${code}'" :server="'${server}'" v-bind="${options}" />`;
   });
 }
 
 // node/syntax/transform/snippet.ts
 import path2 from "node:path";
-import fs5 from "fs-extra";
+import fs4 from "fs-extra";
+import { slash } from "@antfu/utils";
 function dedent(text) {
   const lines = text.split("\n");
   const minIndentLength = lines.reduce((acc, line) => {
@@ -9002,8 +8996,9 @@ function findRegion(lines, regionName) {
   }
   return null;
 }
-function transformSnippet(ctx, options, id) {
-  const slideId = id.match(/(\d+)\.md$/)?.[1];
+function transformSnippet(ctx) {
+  const options = ctx.options;
+  const slideId = ctx.id.match(/(\d+)\.md$/)?.[1];
   if (!slideId)
     return;
   const data = options.data;
@@ -9013,13 +9008,15 @@ function transformSnippet(ctx, options, id) {
     /^<<< *(.+?)(#[\w-]+)? *(?: (\S+?))? *(\{.*)?$/mg,
     (full, filepath = "", regionName = "", lang = "", meta = "") => {
       const firstLine = `\`\`\`${lang || path2.extname(filepath).slice(1)} ${meta}`;
-      const src = /^\@[\/]/.test(filepath) ? path2.resolve(options.userRoot, filepath.slice(2)) : path2.resolve(dir, filepath);
+      const src = slash(
+        /^\@[\/]/.test(filepath) ? path2.resolve(options.userRoot, filepath.slice(2)) : path2.resolve(dir, filepath)
+      );
       data.watchFiles.push(src);
-      const isAFile = fs5.statSync(src).isFile();
-      if (!fs5.existsSync(src) || !isAFile) {
+      const isAFile = fs4.statSync(src).isFile();
+      if (!fs4.existsSync(src) || !isAFile) {
         throw new Error(isAFile ? `Code snippet path not found: ${src}` : `Invalid code snippet option`);
       }
-      let content = fs5.readFileSync(src, "utf8");
+      let content = fs4.readFileSync(src, "utf8");
       slideInfo.snippetsUsed ??= {};
       slideInfo.snippetsUsed[src] = content;
       if (regionName) {
@@ -9041,6 +9038,7 @@ ${content}
 // node/syntax/transform/slot-sugar.ts
 function transformSlotSugar(ctx) {
   const linesWithNewline = ctx.s.original.split(/(\r?\n)/g);
+  const codeBlocks = getCodeBlocks(ctx.s.original);
   const lines = [];
   for (let i = 0; i < linesWithNewline.length; i += 2) {
     const line = linesWithNewline[i];
@@ -9052,7 +9050,7 @@ function transformSlotSugar(ctx) {
   lines.forEach((line) => {
     const start = offset;
     offset += line.length;
-    if (ctx.isIgnored(start))
+    if (codeBlocks.isInsideCodeblocks(offset))
       return;
     const match = line.match(/^::\s*([\w\.\-\:]+)\s*::(\s*)?$/);
     if (match) {
@@ -9066,14 +9064,15 @@ function transformSlotSugar(ctx) {
 }
 
 // node/syntax/transform/in-page-css.ts
-function transformPageCSS(ctx, id) {
-  const page = id.match(/(\d+)\.md$/)?.[1];
+function transformPageCSS(ctx) {
+  const page = ctx.id.match(/(\d+)\.md$/)?.[1];
   if (!page)
     return;
+  const codeBlocks = getCodeBlocks(ctx.s.original);
   ctx.s.replace(
     /(\n<style[^>]*?>)([\s\S]+?)(<\/style>)/g,
     (full, start, css, end, index) => {
-      if (ctx.isIgnored(index))
+      if (codeBlocks.isInsideCodeblocks(index))
         return full;
       if (!start.includes("scoped"))
         start = start.replace("<style", "<style scoped");
@@ -9083,15 +9082,52 @@ ${css}${end}`;
   );
 }
 
+// node/syntax/transform/monaco.ts
+import lz3 from "lz-string";
+function transformMonaco(ctx) {
+  const enabled = ctx.options.data.config.monaco === true || ctx.options.data.config.monaco === ctx.options.mode;
+  if (!enabled) {
+    ctx.s.replace(/{monaco([\w:,-]*)}/g, "");
+    return;
+  }
+  ctx.s.replace(
+    /^```(\w+?)\s*{monaco-diff}\s*?({.*?})?\s*?\n([\s\S]+?)^~~~\s*?\n([\s\S]+?)^```/mg,
+    (full, lang = "ts", options = "{}", code, diff) => {
+      lang = lang.trim();
+      options = options.trim() || "{}";
+      const encoded = lz3.compressToBase64(code);
+      const encodedDiff = lz3.compressToBase64(diff);
+      return `<Monaco code-lz="${encoded}" diff-lz="${encodedDiff}" lang="${lang}" v-bind="${options}" />`;
+    }
+  );
+  ctx.s.replace(
+    /^```(\w+?)\s*{monaco}\s*?({.*?})?\s*?\n([\s\S]+?)^```/mg,
+    (full, lang = "ts", options = "{}", code) => {
+      lang = lang.trim();
+      options = options.trim() || "{}";
+      const encoded = lz3.compressToBase64(code);
+      return `<Monaco code-lz="${encoded}" lang="${lang}" v-bind="${options}" />`;
+    }
+  );
+  ctx.s.replace(
+    /^```(\w+?)\s*{monaco-run}\s*?({.*?})?\s*?\n([\s\S]+?)^```/mg,
+    (full, lang = "ts", options = "{}", code) => {
+      lang = lang.trim();
+      options = options.trim() || "{}";
+      const encoded = lz3.compressToBase64(code);
+      return `<Monaco runnable code-lz="${encoded}" lang="${lang}" v-bind="${options}" />`;
+    }
+  );
+}
+
 // node/syntax/transform/katex-wrapper.ts
 function transformKaTexWrapper(ctx) {
   ctx.s.replace(
     /^\$\$(?:\s*{([\d\w*,\|-]+)}\s*?({.*?})?\s*?)?\n([\s\S]+?)^\$\$/mg,
-    (full, rangeStr = "", options = "", code, index) => {
+    (full, rangeStr = "", options = "", code) => {
       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)}'>
 
 $$
@@ -9104,63 +9140,25 @@ $$
 }
 
 // node/vite/markdown.ts
-var shiki;
-var shikiOptions;
 async function createMarkdownPlugin(options, { markdown: mdOptions }) {
   const { data: { config }, roots, mode, entry, clientRoot } = options;
   const setups = [];
-  const entryPath = slash(entry);
+  const entryPath = slash2(entry);
+  let shiki;
+  let shikiOptions;
   if (config.highlighter === "shiki") {
-    const [
-      options2,
-      { getHighlighter, bundledLanguages },
-      markdownItShiki,
-      transformerTwoslash
-    ] = await Promise.all([
-      loadShikiSetups(clientRoot, roots),
-      import("shiki").then(({ getHighlighter: getHighlighter2, bundledLanguages: bundledLanguages2 }) => ({ bundledLanguages: bundledLanguages2, getHighlighter: getHighlighter2 })),
-      import("@shikijs/markdown-it/core").then(({ fromHighlighter }) => fromHighlighter),
-      import("@shikijs/vitepress-twoslash").then(({ transformerTwoslash: transformerTwoslash2 }) => transformerTwoslash2)
-    ]);
-    shikiOptions = options2;
-    shiki = await getHighlighter({
-      ...options2,
-      langs: options2.langs ?? Object.keys(bundledLanguages),
-      themes: "themes" in options2 ? Object.values(options2.themes) : [options2.theme]
-    });
-    const twoslashEnabled = config.twoslash === true || config.twoslash === mode;
-    const transformers = [
-      ...options2.transformers || [],
-      twoslashEnabled && transformerTwoslash({
-        explicitTrigger: true,
-        twoslashOptions: {
-          handbookOptions: {
-            noErrorValidation: true
-          }
-        }
-      }),
-      {
-        pre(pre) {
-          this.addClassToHast(pre, "slidev-code");
-          delete pre.properties.tabindex;
-        },
-        postprocess(code) {
-          return escapeVueInCode(code);
-        }
-      }
-    ].filter(isTruthy3);
-    const plugin = markdownItShiki(shiki, {
-      ...options2,
-      transformers
-    });
-    setups.push((md2) => md2.use(plugin));
+    const result = await createMarkdownItShiki(clientRoot, roots, config, mode);
+    shiki = result.shiki;
+    shikiOptions = result.shikiOptions;
+    setups.push((md2) => md2.use(result.plugin));
   } else {
+    console.warn("[Slidev] Highlighter: Prism highlighter is deprecated, and will be removed in v0.50. Refer to https://github.com/slidevjs/slidev/issues/1390");
     setups.push((md2) => md2.use(markdownItPrism));
   }
   if (config.mdc)
     setups.push((md2) => md2.use(MarkdownItMdc));
   const KatexOptions = await loadSetups(options.clientRoot, roots, "katex.ts", {}, { strict: false }, false);
-  const sourceMapConsumers = {};
+  const markdownTransformMap = /* @__PURE__ */ new Map();
   return Markdown2({
     include: [/\.md$/],
     wrapperClasses: "",
@@ -9182,10 +9180,11 @@ async function createMarkdownPlugin(options, { markdown: mdOptions }) {
           rel: "noopener"
         }
       });
+      md2.use(MarkdownItEscapeInlineCode);
       md2.use(MarkdownItFootnote);
       md2.use(taskLists, { enabled: true, lineNumber: true, label: true });
       md2.use(math_plugin, KatexOptions);
-      md2.use(markdownItVDrag, sourceMapConsumers);
+      md2.use(markdownItVDrag, markdownTransformMap);
       setups.forEach((i) => i(md2));
       mdOptions?.markdownItSetup?.(md2);
     },
@@ -9193,34 +9192,94 @@ async function createMarkdownPlugin(options, { markdown: mdOptions }) {
       before(code, id) {
         if (id === entryPath)
           return "";
-        const monacoEnabled = config.monaco === true || config.monaco === mode;
         const ctx = {
           s: new MagicString(code),
-          ignores: [],
-          isIgnored(index) {
-            return index < 0 || ctx.ignores.some(([start, end]) => start <= index && index < end);
-          }
+          id,
+          options
         };
-        transformSnippet(ctx, options, id);
-        if (config.highlighter === "shiki")
-          transformMagicMove(ctx, shiki, shikiOptions);
-        transformMermaid(ctx);
-        transformPlantUml(ctx, config.plantUmlServer);
-        transformMonaco(ctx, monacoEnabled);
-        transformCodeWrapper(ctx);
-        transformKaTexWrapper(ctx);
-        transformPageCSS(ctx, id);
-        transformSlotSugar(ctx);
-        const sourceMap = ctx.s.generateMap();
-        sourceMapConsumers[id] = new SourceMapConsumer({
-          ...sourceMap,
-          version: sourceMap.version.toString()
-        });
+        applyMarkdownTransform(ctx, shiki, shikiOptions);
+        markdownTransformMap.set(id, ctx.s);
         return ctx.s.toString();
       }
     }
   });
 }
+async function createMarkdownItShiki(clientRoot, roots, config, mode) {
+  const [
+    shikiOptions,
+    { getHighlighter, bundledLanguages },
+    markdownItShiki,
+    transformerTwoslash
+  ] = await Promise.all([
+    loadShikiSetups(clientRoot, roots),
+    import("shiki").then(({ getHighlighter: getHighlighter2, bundledLanguages: bundledLanguages2 }) => ({ bundledLanguages: bundledLanguages2, getHighlighter: getHighlighter2 })),
+    import("@shikijs/markdown-it/core").then(({ fromHighlighter }) => fromHighlighter),
+    import("@shikijs/vitepress-twoslash").then(({ transformerTwoslash: transformerTwoslash2 }) => transformerTwoslash2)
+  ]);
+  const shiki = await getHighlighter({
+    ...shikiOptions,
+    langs: shikiOptions.langs ?? Object.keys(bundledLanguages),
+    themes: "themes" in shikiOptions ? Object.values(shikiOptions.themes) : [shikiOptions.theme]
+  });
+  const twoslashEnabled = config.twoslash === true || config.twoslash === mode;
+  const transformers = [
+    ...shikiOptions.transformers || [],
+    twoslashEnabled && transformerTwoslash({
+      explicitTrigger: true,
+      twoslashOptions: {
+        handbookOptions: {
+          noErrorValidation: true
+        }
+      }
+    }),
+    {
+      pre(pre) {
+        this.addClassToHast(pre, "slidev-code");
+        delete pre.properties.tabindex;
+      },
+      postprocess(code) {
+        return escapeVueInCode(code);
+      }
+    }
+  ].filter(isTruthy2);
+  const plugin = markdownItShiki(shiki, {
+    ...shikiOptions,
+    transformers
+  });
+  return {
+    shiki,
+    shikiOptions,
+    plugin
+  };
+}
+function MarkdownItEscapeInlineCode(md2) {
+  const codeInline = md2.renderer.rules.code_inline;
+  md2.renderer.rules.code_inline = (tokens, idx, options, env, self) => {
+    const result = codeInline(tokens, idx, options, env, self);
+    return result.replace(/^<code/, "<code v-pre");
+  };
+}
+function applyMarkdownTransform(ctx, shiki, shikiOptions) {
+  const transformers = [
+    transformSnippet,
+    ctx.options.data.config.highlighter ? transformMagicMove(shiki, shikiOptions) : void 0,
+    transformMermaid,
+    transformPlantUml,
+    transformMonaco,
+    transformCodeWrapper,
+    transformKaTexWrapper,
+    transformPageCSS,
+    transformSlotSugar
+  ];
+  for (const transformer of transformers) {
+    if (!transformer)
+      continue;
+    transformer(ctx);
+    if (!ctx.s.isEmpty())
+      ctx.s.commit();
+  }
+  return ctx;
+}
 
 // node/vite/compilerFlagsVue.ts
 import { objectEntries } from "@antfu/utils";
@@ -9245,9 +9304,9 @@ function createVueCompilerFlagsPlugin(options) {
 }
 
 // node/vite/monacoTypes.ts
-import fs6 from "node:fs/promises";
-import { dirname as dirname2, resolve as resolve3 } from "node:path";
-import { slash as slash2 } from "@antfu/utils";
+import fs5 from "node:fs/promises";
+import { dirname as dirname2, resolve as resolve4 } from "node:path";
+import { slash as slash3 } from "@antfu/utils";
 import fg4 from "fast-glob";
 import { findDepPkgJsonPath } from "vitefu";
 function createMonacoTypesLoader({ userRoot }) {
@@ -9271,11 +9330,11 @@ function createMonacoTypesLoader({ userRoot }) {
         if (!pkgJsonPath)
           throw new Error(`Package "${pkg}" not found in "${importer}"`);
         const root = dirname2(pkgJsonPath);
-        const pkgJson = JSON.parse(await fs6.readFile(pkgJsonPath, "utf-8"));
+        const pkgJson = JSON.parse(await fs5.readFile(pkgJsonPath, "utf-8"));
         const deps = pkgJson.dependencies ?? {};
         return [
-          `import "/@slidev-monaco-types/load?root=${slash2(root)}&name=${pkgJson.name}"`,
-          ...Object.keys(deps).map((dep) => `import "/@slidev-monaco-types/resolve?pkg=${dep}&importer=${slash2(root)}"`)
+          `import "/@slidev-monaco-types/load?root=${slash3(root)}&name=${pkgJson.name}"`,
+          ...Object.keys(deps).map((dep) => `import "/@slidev-monaco-types/resolve?pkg=${dep}&importer=${slash3(root)}"`)
         ].join("\n");
       }
       const matchLoad = id.match(/^\/\@slidev-monaco-types\/load\?root=(.*?)&name=(.*)$/);
@@ -9298,7 +9357,7 @@ function createMonacoTypesLoader({ userRoot }) {
           return "";
         return [
           'import { addFile } from "@slidev/client/setup/monaco.ts"',
-          ...files.map((file) => `addFile(import(${JSON.stringify(`${toAtFS(resolve3(root, file))}?monaco-types&raw`)}), ${JSON.stringify(`node_modules/${name}/${file}`)})`)
+          ...files.map((file) => `addFile(import(${JSON.stringify(`${toAtFS(resolve4(root, file))}?monaco-types&raw`)}), ${JSON.stringify(`node_modules/${name}/${file}`)})`)
         ].join("\n");
       }
     }
@@ -9344,7 +9403,7 @@ async function createVuePlugin(options, pluginOptions) {
     vuejsx: vuejsxOptions = {}
   } = pluginOptions;
   const VuePlugin = Vue({
-    include: [/\.vue$/, /\.md$/],
+    include: [/\.vue$/, /\.vue\?vue/, /\.vue\?v=/, /\.md$/, /\.md\?vue/],
     exclude: [],
     template: {
       compilerOptions: {

package/dist/cli.mjs

@@ -6,8 +6,8 @@ import {
   resolveOptions,
   resolveTheme,
   version
-} from "./chunk-KUKH6IFA.mjs";
-import "./chunk-Y6VNORK4.mjs";
+} from "./chunk-DRELQPK4.mjs";
+import "./chunk-NZM6E5T7.mjs";
 import {
   loadSetups
 } from "./chunk-LOUKLO2C.mjs";
@@ -326,7 +326,7 @@ cli.command(
   }).strict().help(),
   async (args) => {
     const { entry, theme, watch, base, download, out, inspect } = args;
-    const { build } = await import("./build-IFALC6GJ.mjs");
+    const { build } = await import("./build-ULWOL6YC.mjs");
     for (const entryFile of entry) {
       const options = await resolveOptions({ entry: entryFile, theme, inspect }, "build");
       if (download && !options.data.config.download)

package/dist/index.mjs

@@ -2,10 +2,10 @@ import {
   createServer,
   parser,
   resolveOptions
-} from "./chunk-KUKH6IFA.mjs";
+} from "./chunk-DRELQPK4.mjs";
 import {
   ViteSlidevPlugin
-} from "./chunk-Y6VNORK4.mjs";
+} from "./chunk-NZM6E5T7.mjs";
 import "./chunk-LOUKLO2C.mjs";
 import "./chunk-AQQIBD5X.mjs";
 import "./chunk-BXO7ZPPU.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/cli",
-  "version": "0.49.0-beta.3",
+  "version": "0.49.0-beta.4",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -51,8 +51,8 @@
     "@shikijs/markdown-it": "^1.3.0",
     "@shikijs/twoslash": "^1.3.0",
     "@shikijs/vitepress-twoslash": "^1.3.0",
-    "@unocss/extractor-mdc": "^0.59.2",
-    "@unocss/reset": "^0.59.2",
+    "@unocss/extractor-mdc": "^0.59.3",
+    "@unocss/reset": "^0.59.3",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "chokidar": "^3.6.0",
@@ -73,6 +73,7 @@
     "local-pkg": "^0.5.0",
     "lz-string": "^1.5.0",
     "magic-string": "^0.30.9",
+    "magic-string-stack": "^0.1.0",
     "markdown-it": "^14.1.0",
     "markdown-it-footnote": "^4.0.0",
     "markdown-it-link-attributes": "^4.0.1",
@@ -90,27 +91,27 @@
     "resolve-global": "^2.0.0",
     "semver": "^7.6.0",
     "shiki": "^1.3.0",
-    "shiki-magic-move": "^0.3.5",
+    "shiki-magic-move": "^0.3.6",
     "sirv": "^2.0.4",
     "source-map-js": "^1.2.0",
     "typescript": "^5.4.5",
-    "unocss": "^0.59.2",
+    "unocss": "^0.59.3",
     "unplugin-icons": "^0.18.5",
     "unplugin-vue-components": "^0.26.0",
-    "unplugin-vue-markdown": "^0.26.0",
+    "unplugin-vue-markdown": "^0.26.1",
     "untun": "^0.1.3",
     "uqr": "^0.1.2",
-    "vite": "^5.2.8",
+    "vite": "^5.2.9",
     "vite-plugin-inspect": "^0.8.3",
     "vite-plugin-remote-assets": "^0.4.1",
     "vite-plugin-static-copy": "^1.0.2",
     "vite-plugin-vue-server-ref": "^0.4.2",
     "vitefu": "^0.2.5",
-    "vue": "^3.4.21",
+    "vue": "^3.4.22",
     "yargs": "^17.7.2",
-    "@slidev/client": "0.49.0-beta.3",
-    "@slidev/types": "0.49.0-beta.3",
-    "@slidev/parser": "0.49.0-beta.3"
+    "@slidev/client": "0.49.0-beta.4",
+    "@slidev/parser": "0.49.0-beta.4",
+    "@slidev/types": "0.49.0-beta.4"
   },
   "devDependencies": {
     "@hedgedoc/markdown-it-plugins": "^2.1.4",