@slidev/cli 52.14.2 → 52.15.0

package/dist/{shared-ZIXcnTKJ.mjs → shared-DDjOjYqG.mjs}

@@ -1,4 +1,4 @@
-import { a as resolveImportPath, c as toAtFS, i as resolveEntry, n as getRoots, o as resolveImportUrl, r as isInstalledGlobally, s as resolveSourceFiles, t as createResolver } from "./resolver-B4CxEjJF.mjs";
+import { a as resolveImportPath, c as toAtFS, i as resolveEntry, n as getRoots, o as resolveImportUrl, r as isInstalledGlobally, s as resolveSourceFiles, t as createResolver } from "./resolver-XedCEhxI.mjs";
 import { builtinModules } from "node:module";
 import path, { basename, dirname, join, relative, resolve } from "node:path";
 import { loadConfigFromFile, mergeConfig } from "vite";
@@ -6,7 +6,7 @@ import MarkdownExit from "markdown-exit";
 import fs, { existsSync } from "node:fs";
 import fs$1, { readFile } from "node:fs/promises";
 import { fileURLToPath, pathToFileURL } from "node:url";
-import { isString, isTruthy, notNullish, objectEntries, objectMap, range, slash, uniq } from "@antfu/utils";
+import { ensureSuffix, isString, isTruthy, notNullish, objectEntries, objectMap, range, slash, uniq } from "@antfu/utils";
 import { bold, gray, red, white, yellow } from "ansis";
 import { createResolve } from "mlly";
 import { findDepPkgJsonPath } from "vitefu";
@@ -21,7 +21,8 @@ import fg from "fast-glob";
 import { createDebug } from "obug";
 import pm from "picomatch";
 import { satisfies } from "semver";
-import { createHead, extractUnheadInputFromHtml, transformHtmlTemplate } from "unhead/server";
+import { parseHtmlForUnheadExtraction } from "unhead/parser";
+import { createHead, transformHtmlTemplate } from "unhead/server";
 import { createBundledHighlighter, createSingletonShorthands } from "shiki/core";
 import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
 import { bundledLanguages, bundledThemes } from "shiki";
@@ -30,18 +31,21 @@ import MagicString from "magic-string-stack";
 import Markdown from "unplugin-vue-markdown/vite";
 import MarkdownItComark from "@comark/markdown-it";
 import MarkdownItFootnote from "markdown-it-footnote";
-import { fromAsyncCodeToHtml } from "@shikijs/markdown-it/async";
-import { SourceMapConsumer } from "source-map-js";
+import MarkdownItGitHubAlerts from "markdown-it-github-alerts";
+import { defineCodeblockTransformer } from "@slidev/types";
 import lz from "lz-string";
 import { toKeyedTokens } from "shiki-magic-move/core";
 import { encode } from "plantuml-encoder";
+import { SourceMapConsumer } from "source-map-js";
+import { fromAsyncCodeToHtml } from "@shikijs/markdown-it/async";
 import ServerRef from "vite-plugin-vue-server-ref";
 import UnoCSS from "unocss/vite";
 import { mergeConfigs, presetIcons } from "unocss";
 import Vue from "@vitejs/plugin-vue";
 import VueJsx from "@vitejs/plugin-vue-jsx";
 
-//#region node/syntax/markdown-it/markdown-it-link.ts
+//#region node/syntax/link.ts
+const RE_DIGITS_ONLY = /^\d+$/;
 function MarkdownItLink(md) {
 	const defaultRender = md.renderer.rules.link_open ?? ((tokens, idx, options, _env, self) => self.renderToken(tokens, idx, options));
 	md.renderer.rules.link_open = function(tokens, idx, options, env, self) {
@@ -49,7 +53,7 @@ function MarkdownItLink(md) {
 		const hrefIndex = token.attrIndex("href");
 		const attr = token.attrs?.[hrefIndex];
 		const href = attr?.[1] ?? "";
-		if ("./#".includes(href[0]) || /^\d+$/.test(href)) {
+		if ("./#".includes(href[0]) || RE_DIGITS_ONLY.test(href)) {
 			token.tag = "Link";
 			attr[0] = "to";
 			for (let i = idx + 1; i < tokens.length; i++) if (tokens[i].type === "link_close") {
@@ -63,17 +67,20 @@ function MarkdownItLink(md) {
 
 //#endregion
 //#region node/utils.ts
+const RE_WHITESPACE_ONLY = /^\s*$/;
+const RE_QUOTED_STRING = /^(['"])(.*)\1$/;
+const RE_WHITESPACE = /\s+/g;
 let jiti;
 function loadModule(absolutePath) {
 	jiti ??= createJiti(fileURLToPath(import.meta.url), { moduleCache: false });
 	return jiti.import(absolutePath);
 }
 function stringifyMarkdownTokens(tokens) {
-	return tokens.map((token) => token.children?.filter((t) => ["text", "code_inline"].includes(t.type) && !t.content.match(/^\s*$/)).map((t) => t.content.trim()).join(" ")).filter(Boolean).join(" ");
+	return tokens.map((token) => token.children?.filter((t) => ["text", "code_inline"].includes(t.type) && !t.content.match(RE_WHITESPACE_ONLY)).map((t) => t.content.trim()).join(" ")).filter(Boolean).join(" ");
 }
 function generateFontParams(options) {
 	const weights = options.weights.flatMap((i) => options.italic ? [`0,${i}`, `1,${i}`] : [`${i}`]).sort().join(";");
-	return options.webfonts.map((i) => `family=${i.replace(/^(['"])(.*)\1$/, "$1").replace(/\s+/g, "+")}:${options.italic ? "ital," : ""}wght@${weights}`).join("&");
+	return options.webfonts.map((i) => `family=${i.replace(RE_QUOTED_STRING, "$1").replace(RE_WHITESPACE, "+")}:${options.italic ? "ital," : ""}wght@${weights}`).join("&");
 }
 function generateGoogleFontsUrl(options) {
 	return `https://fonts.googleapis.com/css2?${generateFontParams(options)}&display=swap`;
@@ -124,12 +131,11 @@ function getBodyJson(req) {
 		});
 	});
 }
-function makeAbsoluteImportGlob(userRoot, globs, options = {}) {
-	const relativeGlobs = globs.map((glob) => `./${slash(relative(userRoot, glob))}`);
+function makeAbsoluteImportGlob(self, globs, options = {}) {
+	const relativeGlobs = globs.map((glob) => `${slash(relative(self, glob))}`);
 	const opts = {
 		eager: true,
 		exhaustive: true,
-		base: "/",
 		...options
 	};
 	return `import.meta.glob(${JSON.stringify(relativeGlobs)}, ${JSON.stringify(opts)})`;
@@ -155,6 +161,7 @@ async function setupVitePlugins(options) {
 
 //#endregion
 //#region node/vite/compilerFlagsVue.ts
+const RE_VUE_FILE = /\.vue(?:$|\?)/;
 /**
 * Replace compiler flags like `__DEV__` in Vue SFC
 */
@@ -163,8 +170,8 @@ function createVueCompilerFlagsPlugin(options) {
 	return {
 		name: "slidev:flags",
 		enforce: "pre",
-		transform: { handler(code, id) {
-			if (!id.match(/\.vue($|\?)/) && !id.includes("?vue&")) return;
+		transform: { handler(code, id$2) {
+			if (!RE_VUE_FILE.test(id$2) && !id$2.includes("?vue&")) return;
 			const original = code;
 			define.forEach(([from, to]) => {
 				code = code.replaceAll(from, to);
@@ -176,6 +183,11 @@ function createVueCompilerFlagsPlugin(options) {
 
 //#endregion
 //#region node/vite/components.ts
+const RE_VUE_EXT$1 = /\.vue$/;
+const RE_VUE_QUERY_VUE$1 = /\.vue\?vue/;
+const RE_VUE_QUERY_V$1 = /\.vue\?v=/;
+const RE_MD_EXT$2 = /\.md$/;
+const RE_MD_QUERY_VUE$1 = /\.md\?vue/;
 function createComponentsPlugin({ clientRoot, roots }, pluginOptions) {
 	return Components({
 		extensions: [
@@ -189,11 +201,11 @@ function createComponentsPlugin({ clientRoot, roots }, pluginOptions) {
 		dirs: [join(clientRoot, "builtin"), ...roots.map((i) => join(i, "components"))],
 		globsExclude: [],
 		include: [
-			/\.vue$/,
-			/\.vue\?vue/,
-			/\.vue\?v=/,
-			/\.md$/,
-			/\.md\?vue/
+			RE_VUE_EXT$1,
+			RE_VUE_QUERY_VUE$1,
+			RE_VUE_QUERY_V$1,
+			RE_MD_EXT$2,
+			RE_MD_QUERY_VUE$1
 		],
 		exclude: [],
 		resolvers: [IconsResolver({
@@ -216,14 +228,16 @@ const templateInitContext = `const { $slidev, $nav, $clicksContext, $clicks, $pa
 
 //#endregion
 //#region node/vite/contextInjection.ts
+const RE_EXPORT_DEFAULT_OBJECT = /export\s+default\s+\{/;
+const RE_INJECT_OPTION = /.*inject\s*:\s*([[{])/;
 /**
 * Inject `$slidev` into the script block of a Vue component
 */
 function createContextInjectionPlugin() {
 	return {
 		name: "slidev:context-injection",
-		transform: { async handler(code, id) {
-			if (!id.endsWith(".vue") || id.includes("/@slidev/client/") || id.includes("/packages/client/")) return;
+		transform: { async handler(code, id$2) {
+			if (!id$2.endsWith(".vue") || id$2.includes("/@slidev/client/") || id$2.includes("/packages/client/")) return;
 			if (code.includes(templateInjectionMarker) || code.includes("useSlideContext()")) return code;
 			const imports = [
 				templateImportContextUtils,
@@ -237,7 +251,7 @@ function createContextInjectionPlugin() {
 				const setupTagEnd = (setupScriptMatch.index || 0) + setupTag.length;
 				return `${code.slice(0, setupTagEnd)}\n${imports.join("\n")}\n${code.slice(setupTagEnd)}`;
 			} else if (!setupScriptMatch && matchScripts.length === 1) {
-				const matchExport = code.match(/export\s+default\s+\{/);
+				const matchExport = code.match(RE_EXPORT_DEFAULT_OBJECT);
 				if (matchExport) {
 					const exportIndex = (matchExport.index || 0) + matchExport[0].length;
 					let component = code.slice(exportIndex);
@@ -248,7 +262,7 @@ import { injectionSlidevContext } from "@slidev/client/constants.ts"
 ${code.slice(scriptIndex)}`;
 					let injectIndex = exportIndex + 70;
 					let injectObject = "$slidev: { from: injectionSlidevContext },";
-					const matchInject = component.match(/.*inject\s*:\s*([[{])/);
+					const matchInject = component.match(RE_INJECT_OPTION);
 					if (matchInject) {
 						injectIndex += (matchInject.index || 0) + matchInject[0].length;
 						if (matchInject[1] === "[") {
@@ -269,6 +283,10 @@ ${code.slice(scriptIndex)}`;
 
 //#endregion
 //#region node/vite/extendConfig.ts
+const RE_SLIDEV_CLIENT = /^@slidev\/client$/;
+const RE_SLIDEV_CLIENT_SUBPATH = /^@slidev\/client\/(.*)/;
+const RE_SLIDEV_VIRTUAL = /^#slidev\/(.*)/;
+const RE_MONACO_EDITOR = /\/monaco-editor(?:-core)?\//;
 const INCLUDE_GLOBAL = [
 	"@typescript/ata",
 	"file-saver",
@@ -335,15 +353,15 @@ function createConfigPlugin(options) {
 				resolve: {
 					alias: [
 						{
-							find: /^@slidev\/client$/,
+							find: RE_SLIDEV_CLIENT,
 							replacement: `${toAtFS(options.clientRoot)}/index.ts`
 						},
 						{
-							find: /^@slidev\/client\/(.*)/,
+							find: RE_SLIDEV_CLIENT_SUBPATH,
 							replacement: `${toAtFS(options.clientRoot)}/$1`
 						},
 						{
-							find: /^#slidev\/(.*)/,
+							find: RE_SLIDEV_VIRTUAL,
 							replacement: "/@slidev/$1"
 						},
 						{
@@ -380,21 +398,21 @@ function createConfigPlugin(options) {
 						const DEFAULT = "assets/[name]-[hash].js";
 						if (chunkInfo.name.includes("/")) return DEFAULT;
 						if (chunkInfo.moduleIds.filter((i) => isSlidevClient(i)).length > chunkInfo.moduleIds.length * .6) return "assets/slidev/[name]-[hash].js";
-						if (chunkInfo.moduleIds.filter((i) => i.match(/\/monaco-editor(-core)?\//)).length > chunkInfo.moduleIds.length * .6) return "assets/monaco/[name]-[hash].js";
+						if (chunkInfo.moduleIds.filter((i) => i.match(RE_MONACO_EDITOR)).length > chunkInfo.moduleIds.length * .6) return "assets/monaco/[name]-[hash].js";
 						return DEFAULT;
 					},
-					manualChunks(id) {
-						if (id.startsWith("/@slidev-monaco-types/") || id.includes("/@slidev/monaco-types") || id.endsWith("?monaco-types&raw")) return "monaco/bundled-types";
-						if (id.includes("/shiki/") || id.includes("/@shikijs/")) return `modules/shiki`;
-						if (id.startsWith("~icons/")) return "modules/unplugin-icons";
-						const matchedAsyncModule = ASYNC_MODULES.find((i) => id.includes(`/node_modules/${i}`));
+					manualChunks(id$2) {
+						if (id$2.startsWith("/@slidev-monaco-types/") || id$2.includes("/@slidev/monaco-types") || id$2.endsWith("?monaco-types&raw")) return "monaco/bundled-types";
+						if (id$2.includes("/shiki/") || id$2.includes("/@shikijs/")) return `modules/shiki`;
+						if (id$2.startsWith("~icons/")) return "modules/unplugin-icons";
+						const matchedAsyncModule = ASYNC_MODULES.find((i) => id$2.includes(`/node_modules/${i}`));
 						if (matchedAsyncModule) return `modules/${matchedAsyncModule.replace("@", "").replace("/", "-")}`;
 					}
 				} } },
 				cacheDir: isInstalledGlobally.value ? join(options.cliRoot, "node_modules/.vite") : void 0
 			};
-			function isSlidevClient(id) {
-				return id.includes("/@slidev/") || id.includes("/slidev/packages/client/") || id.includes("/@vueuse/");
+			function isSlidevClient(id$2) {
+				return id$2.includes("/@slidev/") || id$2.includes("/slidev/packages/client/") || id$2.includes("/@vueuse/");
 			}
 			return mergeConfig(injection, config);
 		},
@@ -426,8 +444,8 @@ function createHmrPatchPlugin() {
 		name: "slidev:hmr-patch",
 		transform: {
 			filter: { id: { include: regexSlideSourceId } },
-			handler(code, id) {
-				if (!id.match(regexSlideSourceId)) return;
+			handler(code, id$2) {
+				if (!id$2.match(regexSlideSourceId)) return;
 				return code.replace("if (_rerender_only)", "if (false)");
 			}
 		}
@@ -458,13 +476,14 @@ async function createInspectPlugin(options, pluginOptions) {
 
 //#endregion
 //#region node/vite/layoutWrapper.ts
+const RE_SCRIPT_SETUP_TAG = /^<script setup.*>/m;
 function createLayoutWrapperPlugin({ data, utils }) {
 	return {
 		name: "slidev:layout-wrapper",
 		transform: {
 			filter: { id: { include: regexSlideSourceId } },
-			async handler(code, id) {
-				const match = id.match(regexSlideSourceId);
+			async handler(code, id$2) {
+				const match = id$2.match(regexSlideSourceId);
 				if (!match) return;
 				const [, no, type] = match;
 				if (type !== "md") return;
@@ -476,7 +495,7 @@ function createLayoutWrapperPlugin({ data, utils }) {
 					console.error();
 					layoutName = "default";
 				}
-				const setupTag = code.match(/^<script setup.*>/m);
+				const setupTag = code.match(RE_SCRIPT_SETUP_TAG);
 				if (!setupTag) throw new Error(`[Slidev] Internal error: <script setup> block not found in slide ${index + 1}.`);
 				const templatePart = code.slice(0, setupTag.index);
 				const scriptPart = code.slice(setupTag.index);
@@ -503,7 +522,7 @@ function createLayoutWrapperPlugin({ data, utils }) {
 
 //#endregion
 //#region package.json
-var version = "52.14.2";
+var version = "52.15.0";
 
 //#endregion
 //#region node/integrations/addons.ts
@@ -545,6 +564,8 @@ async function getThemeMeta(name, root) {
 
 //#endregion
 //#region node/setups/indexHtml.ts
+const RE_TRAILING_SLASH = /\/$/;
+const RE_BODY_CONTENT = /<body>([\s\S]*?)<\/body>/i;
 function escapeHtml(str) {
 	return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
 }
@@ -555,7 +576,7 @@ function collectPreloadImages(data, base) {
 	if (data.config.preloadImages === false) return [];
 	const seen = /* @__PURE__ */ new Set();
 	const links = [];
-	const basePrefix = base ? base.replace(/\/$/, "") : "";
+	const basePrefix = base ? base.replace(RE_TRAILING_SLASH, "") : "";
 	for (const slide of data.slides) {
 		const images = slide.images || slide.source?.images;
 		if (!images?.length) continue;
@@ -585,10 +606,11 @@ async function setupIndexHtml({ mode, entry, clientRoot, userRoot, roots, data,
 			console.error(yellow("This file may be generated by Slidev, please remove it from your project."));
 			continue;
 		}
-		inputs.push(extractUnheadInputFromHtml(html).input);
-		body += `\n${(html.match(/<body>([\s\S]*?)<\/body>/i)?.[1] || "").trim()}`;
+		inputs.push(parseHtmlForUnheadExtraction(html).input);
+		body += `\n${(html.match(RE_BODY_CONTENT)?.[1] || "").trim()}`;
 	}
 	if (data.features.tweet) body += "\n<script async src=\"https://platform.twitter.com/widgets.js\"><\/script>";
+	if (data.features.bluesky) body += "\n<script async src=\"https://embed.bsky.app/static/embed.js\" charset=\"utf-8\"><\/script>";
 	const webFontsLink = [];
 	if (data.config.fonts.webfonts.length) {
 		const { provider } = data.config.fonts;
@@ -799,6 +821,7 @@ async function setupShiki(roots) {
 
 //#endregion
 //#region node/options.ts
+const RE_FILE_EXTENSION = /\.\w+$/;
 const debug = createDebug("slidev:options");
 async function resolveOptions(entryOptions, mode) {
 	const entry = await resolveEntry(entryOptions.entry);
@@ -817,6 +840,7 @@ async function resolveOptions(entryOptions, mode) {
 		rootsInfo.userRoot
 	]);
 	if (entryOptions.download) config.download ||= entryOptions.download;
+	if (entryOptions.routerMode) config.routerMode = entryOptions.routerMode;
 	debug({
 		...rootsInfo,
 		...entryOptions,
@@ -875,7 +899,7 @@ async function createDataUtils(resolved) {
 					suppressErrors: true
 				})));
 				for (const layoutPath of layoutPaths.flat(1)) {
-					const layoutName = path.basename(layoutPath).replace(/\.\w+$/, "");
+					const layoutName = path.basename(layoutPath).replace(RE_FILE_EXTENSION, "");
 					layouts[layoutName] = layoutPath;
 				}
 				return layouts;
@@ -906,52 +930,10 @@ function getDefine(options) {
 }
 
 //#endregion
-//#region node/syntax/transform/utils.ts
+//#region node/syntax/utils.ts
 function normalizeRangeStr(rangeStr = "") {
 	return !rangeStr.trim() ? [] : rangeStr.trim().split(/\|/g).map((i) => i.trim());
 }
-function getCodeBlocks(md) {
-	const codeblocks = Array.from(md.matchAll(/^```[\s\S]*?^```/gm)).map((m) => {
-		const start = m.index;
-		const end = m.index + m[0].length;
-		return [
-			start,
-			end,
-			md.slice(0, start).match(/\n/g)?.length || 0,
-			md.slice(0, end).match(/\n/g)?.length || 0
-		];
-	});
-	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 getCommentBlocks(md) {
-	const commentBlocks = Array.from(md.matchAll(/<!--[\s\S]*?-->/g)).map((m) => {
-		const start = m.index;
-		const end = m.index + m[0].length;
-		return [
-			start,
-			end,
-			md.slice(0, start).match(/\n/g)?.length || 0,
-			md.slice(0, end).match(/\n/g)?.length || 0
-		];
-	});
-	return {
-		commentBlocks,
-		isInsideCommentBlocks(idx) {
-			return commentBlocks.some(([s, e]) => s <= idx && idx <= e);
-		},
-		isLineInsideCommentBlocks(line) {
-			return commentBlocks.some(([, , s, e]) => s <= line && line <= e);
-		}
-	};
-}
 /**
 * Escape `{{` in code block to prevent Vue interpret it, #99, #1316
 */
@@ -960,7 +942,8 @@ function escapeVueInCode(md) {
 }
 
 //#endregion
-//#region node/syntax/markdown-it/markdown-it-katex.ts
+//#region node/syntax/katex.ts
+const RE_KATEX_BLOCK_INFO = /^\{([\w*,|-]+)\}\s*(\{[^}]*\})?/;
 function isValidDelim(state, pos) {
 	const max = state.posMax;
 	let can_open = true;
@@ -1015,7 +998,7 @@ function math_inline(state, silent) {
 	state.pos = match + 1;
 	return true;
 }
-function math_block(state, start, end, silent) {
+const math_block = function(state, start, end, silent) {
 	let firstLine;
 	let lastLine;
 	let next;
@@ -1026,11 +1009,13 @@ function math_block(state, start, end, silent) {
 	if (pos + 2 > max) return false;
 	if (state.src.slice(pos, pos + 2) !== "$$") return false;
 	pos += 2;
-	firstLine = state.src.slice(pos, max);
+	firstLine = state.src.slice(pos, max).trim();
 	if (silent) return true;
-	if (firstLine.trim().slice(-2) === "$$") {
-		firstLine = firstLine.trim().slice(0, -2);
+	let singleLine = false;
+	if (firstLine.slice(-2) === "$$") {
+		firstLine = firstLine.slice(0, -2).trim();
 		found = true;
+		singleLine = true;
 	}
 	for (next = start; !found;) {
 		next++;
@@ -1047,11 +1032,15 @@ function math_block(state, start, end, silent) {
 	state.line = next + 1;
 	const token = state.push("math_block", "math", 0);
 	token.block = true;
-	token.content = (firstLine && firstLine.trim() ? `${firstLine}\n` : "") + state.getLines(start + 1, next, state.tShift[start], true) + (lastLine && lastLine.trim() ? lastLine : "");
+	if (singleLine) token.content = firstLine;
+	else {
+		token.info = firstLine;
+		token.content = state.getLines(start + 1, next, state.tShift[start], true) + (lastLine && lastLine.trim() ? lastLine : "");
+	}
 	token.map = [start, state.line];
 	token.markup = "$$";
 	return true;
-}
+};
 function MarkdownItKatex(md, options) {
 	const katexInline = function(latex) {
 		options.displayMode = false;
@@ -1075,7 +1064,10 @@ function MarkdownItKatex(md, options) {
 		}
 	};
 	const blockRenderer = function(tokens, idx) {
-		return `${katexBlock(tokens[idx].content)}\n`;
+		const token = tokens[idx];
+		const [, rangeStr, options$1] = RE_KATEX_BLOCK_INFO.exec(token.info) || [];
+		const ranges = normalizeRangeStr(rangeStr);
+		return `<KaTexBlockWrapper ${options$1 ? `v-bind="${options$1}"` : ""} :ranges='${JSON.stringify(ranges)}'>${katexBlock(tokens[idx].content)}</KaTexBlockWrapper>\n`;
 	};
 	md.inline.ruler.after("escape", "math_inline", math_inline);
 	md.block.ruler.after("blockquote", "math_block", math_block, { alt: [
@@ -1088,6 +1080,23 @@ function MarkdownItKatex(md, options) {
 	md.renderer.rules.math_block = blockRenderer;
 }
 
+//#endregion
+//#region node/virtual/conditional-styles.ts
+const id$1 = "/@slidev/conditional-styles";
+const templateConditionalStyles = {
+	id: id$1,
+	async getContent({ data, roots }) {
+		const imports = [];
+		for (const root of roots) imports.push(makeAbsoluteImportGlob(id$1, [
+			join(root, "styles/index.{ts,js,css}"),
+			join(root, "styles.{ts,js,css}"),
+			join(root, "style.{ts,js,css}")
+		]));
+		if (data.features.katex) imports.push(`import "${await resolveImportUrl("katex/dist/katex.min.css")}"`);
+		return imports.join("\n");
+	}
+};
+
 //#endregion
 //#region node/virtual/configs.ts
 const templateConfigs = {
@@ -1138,15 +1147,16 @@ console.warn('/@slidev/titles.md is deprecated, import from #slidev/title-render
 
 //#endregion
 //#region node/virtual/global-layers.ts
+const id = `/@slidev/global-layers`;
 const templateGlobalLayers = {
-	id: `/@slidev/global-layers`,
-	getContent({ userRoot, roots }) {
+	id,
+	getContent({ roots }) {
 		function* getComponent(name, names) {
 			yield `const ${name}Components = [\n`;
 			for (const root of roots) {
 				const globs = names.map((name$1) => join(root, `${name$1}.{ts,js,vue}`));
 				yield "  Object.values(";
-				yield makeAbsoluteImportGlob(userRoot, globs, { import: "default" });
+				yield makeAbsoluteImportGlob(id, globs, { import: "default" });
 				yield ")[0],\n";
 			}
 			yield `].filter(Boolean)\n`;
@@ -1262,11 +1272,12 @@ export default {
 //#endregion
 //#region node/virtual/setups.ts
 function createSetupTemplate(name) {
+	const id$2 = `/@slidev/setups/${name}`;
 	return {
-		id: `/@slidev/setups/${name}`,
-		getContent({ userRoot, roots }) {
+		id: id$2,
+		getContent({ roots }) {
 			return `export default [${roots.map((root) => {
-				return `Object.values(${makeAbsoluteImportGlob(userRoot, [join(root, `setup/${name}.{ts,js,mts,mjs}`)], { import: "default" })})[0]`;
+				return `Object.values(${makeAbsoluteImportGlob(id$2, [join(root, `setup/${name}.{ts,js,mts,mjs}`)], { import: "default" })})[0]`;
 			}).join(", ")}].filter(Boolean)`;
 		}
 	};
@@ -1323,34 +1334,6 @@ const templateSlides = {
 	}
 };
 
-//#endregion
-//#region node/virtual/styles.ts
-const templateStyle = {
-	id: "/@slidev/styles",
-	async getContent({ data, clientRoot, userRoot, roots }) {
-		function resolveUrlOfClient(name) {
-			return toAtFS(join(clientRoot, name));
-		}
-		const imports = [
-			"styles/vars.css",
-			"styles/index.css",
-			"styles/code.css",
-			"styles/katex.css",
-			"styles/transitions.css"
-		].map((path$1) => makeAbsoluteImportGlob(userRoot, [join(clientRoot, path$1)]));
-		for (const root of roots) imports.push(makeAbsoluteImportGlob(userRoot, [
-			join(root, "styles/index.{ts,js,css}"),
-			join(root, "styles.{ts,js,css}"),
-			join(root, "style.{ts,js,css}")
-		]));
-		if (data.features.katex) imports.push(`import "${await resolveImportUrl("katex/dist/katex.min.css")}"`);
-		if (data.config.highlighter === "shiki") imports.push(`import "${await resolveImportUrl("@shikijs/vitepress-twoslash/style.css")}"`, `import "${resolveUrlOfClient("styles/shiki-twoslash.css")}"`, `import "${await resolveImportUrl("shiki-magic-move/style.css")}"`);
-		imports.unshift(`import "${await resolveImportUrl("@unocss/reset/tailwind.css")}"`, "import \"uno:preflights.css\"", "import \"uno:typography.css\"", "import \"uno:shortcuts.css\"");
-		imports.push("import \"uno.css\"");
-		return imports.join("\n");
-	}
-};
-
 //#endregion
 //#region node/virtual/titles.ts
 const templateTitleRendererMd = {
@@ -1374,7 +1357,7 @@ const templates = [
 	templateMonacoTypes,
 	templateMonacoRunDeps,
 	templateConfigs,
-	templateStyle,
+	templateConditionalStyles,
 	templateGlobalLayers,
 	templateNavControls,
 	templateSlides,
@@ -1388,6 +1371,7 @@ const templates = [
 
 //#endregion
 //#region node/vite/loaders.ts
+const RE_WORD_CHARS_ONLY = /^[\w-]+$/;
 function createSlidesLoader(options, serverOptions) {
 	const { data, mode, utils, withoutNotes } = options;
 	const notesMd = MarkdownExit({ html: true });
@@ -1528,32 +1512,32 @@ function createSlidesLoader(options, serverOptions) {
 			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))
+				...Array.from(moduleIds).map((id$2) => ctx.server.moduleGraph.getModuleById(id$2))
 			].filter(notNullish).filter((i) => !i.id?.startsWith("/@id/@vite-icons"));
 			updateServerWatcher();
 			return moduleEntries;
 		},
 		resolveId: {
 			order: "pre",
-			handler(id) {
-				if (id.startsWith("/@slidev/") || id.includes("__slidev_")) return id;
+			handler(id$2) {
+				if (id$2.startsWith("/@slidev/") || id$2.includes("__slidev_")) return id$2;
 				return null;
 			}
 		},
-		async load(id) {
-			const template = templates.find((i) => i.id === id);
+		async load(id$2) {
+			const template = templates.find((i) => i.id === id$2);
 			if (template) return {
 				code: await template.getContent.call(this, options),
 				map: { mappings: "" }
 			};
-			const matchFacade = id.match(regexSlideFacadeId);
+			const matchFacade = id$2.match(regexSlideFacadeId);
 			if (matchFacade) {
 				const [, no, type] = matchFacade;
 				const idx = +no - 1;
 				const sourceId = JSON.stringify(sourceIds[type][idx]);
 				return [`export * from ${sourceId}`, `export { default } from ${sourceId}`].join("\n");
 			}
-			const matchSource = id.match(regexSlideSourceId);
+			const matchSource = id$2.match(regexSlideSourceId);
 			if (matchSource) {
 				const [, no, type] = matchSource;
 				const idx = +no - 1;
@@ -1616,7 +1600,7 @@ function createSlidesLoader(options, serverOptions) {
 					};
 				}
 			}
-			if (data.markdownFiles[id]) return "";
+			if (data.markdownFiles[id$2]) return "";
 		}
 	};
 	function renderNote(text = "") {
@@ -1627,7 +1611,7 @@ function createSlidesLoader(options, serverOptions) {
 			clickCount += Number(count);
 			return `<span class="slidev-note-click-mark" data-clicks="${clickCount}"></span>`;
 		});
-		const keys = Object.keys(notesAutoRuby).sort((b, a) => b.length - a.length).map((i) => /^[\w-]+$/.test(i) ? `\\b${i}\\b` : i);
+		const keys = Object.keys(notesAutoRuby).sort((b, a) => b.length - a.length).map((i) => RE_WORD_CHARS_ONLY.test(i) ? `\\b${i}\\b` : i);
 		if (keys.length) {
 			const regex = new RegExp(`(${keys.join("|")})`, "g");
 			md = md.replace(regex, (match) => {
@@ -1646,6 +1630,29 @@ function createSlidesLoader(options, serverOptions) {
 	}
 }
 
+//#endregion
+//#region node/setups/transformers.ts
+async function setupTransformers(roots) {
+	const returns = await loadSetups(roots, "transformers.ts", []);
+	const result = {
+		pre: [],
+		preCodeblock: [],
+		postCodeblock: [],
+		post: [],
+		codeblocks: []
+	};
+	for (const r of [...returns].reverse()) {
+		if (r.pre) result.pre.push(...r.pre);
+		if (r.preCodeblock) result.preCodeblock.push(...r.preCodeblock);
+	}
+	for (const r of returns) {
+		if (r.postCodeblock) result.postCodeblock.push(...r.postCodeblock);
+		if (r.post) result.post.push(...r.post);
+		if (r.codeblocks) result.codeblocks.push(...r.codeblocks);
+	}
+	return result;
+}
+
 //#endregion
 //#region ../../node_modules/.pnpm/@hedgedoc+markdown-it-plugins@2.1.4_patch_hash=49e14003b6caa0b7d164cbe71da573809d375bab_0dce998d26f79c06311f476731d22630/node_modules/@hedgedoc/markdown-it-plugins/dist/esm/image-size/specialCharacters.js
 var SpecialCharacters;
@@ -1865,11 +1872,11 @@ function isTodoItem(tokens, index) {
 }
 function todoify(token, options) {
 	if (token.children == null) return;
-	const id = generateIdForToken(token);
-	token.children.splice(0, 0, createCheckboxToken(token, options.enabled, id));
+	const id$2 = generateIdForToken(token);
+	token.children.splice(0, 0, createCheckboxToken(token, options.enabled, id$2));
 	token.children[1].content = token.children[1].content.replace(checkboxRegex, "");
 	if (options.label) {
-		token.children.splice(1, 0, createLabelBeginToken(id));
+		token.children.splice(1, 0, createLabelBeginToken(id$2));
 		token.children.push(createLabelEndToken());
 	}
 }
@@ -1877,17 +1884,17 @@ function generateIdForToken(token) {
 	if (token.map) return `task-item-${token.map[0]}`;
 	else return `task-item-${Math.ceil(Math.random() * (1e4 * 1e3) - 1e3)}`;
 }
-function createCheckboxToken(token, enabled, id) {
+function createCheckboxToken(token, enabled, id$2) {
 	const checkbox = new token_default("taskListItemCheckbox", "", 0);
 	if (!enabled) checkbox.attrSet("disabled", "true");
 	if (token.map) checkbox.attrSet("line", token.map[0].toString());
-	checkbox.attrSet("id", id);
+	checkbox.attrSet("id", id$2);
 	if (checkboxRegex.exec(token.content)?.[1].toLowerCase() === "x") checkbox.attrSet("checked", "true");
 	return checkbox;
 }
-function createLabelBeginToken(id) {
+function createLabelBeginToken(id$2) {
 	const labelBeginToken = new token_default("taskListItemLabel_open", "", 1);
-	labelBeginToken.attrSet("id", id);
+	labelBeginToken.attrSet("id", id$2);
 	return labelBeginToken;
 }
 function createLabelEndToken() {
@@ -1907,62 +1914,139 @@ function startsWithTodoMarkdown(token) {
 }
 
 //#endregion
-//#region node/syntax/markdown-it/markdown-it-escape-code.ts
-function MarkdownItEscapeInlineCode(md) {
-	const codeInline = md.renderer.rules.code_inline;
-	md.renderer.rules.code_inline = async (tokens, idx, options, env, self) => {
-		return (await codeInline(tokens, idx, options, env, self)).replace(/^<code/, "<code v-pre");
-	};
-}
-
-//#endregion
-//#region node/syntax/markdown-it/markdown-it-shiki.ts
-async function MarkdownItShiki({ data: { config }, mode, utils: { shiki, shikiOptions } }) {
-	async function getTwoslashTransformer() {
-		const [, , { transformerTwoslash }] = await Promise.all([
-			shiki.codeToHast("", {
-				lang: "js",
-				...shikiOptions
-			}),
-			shiki.codeToHast("", {
-				lang: "ts",
-				...shikiOptions
-			}),
-			import("@shikijs/vitepress-twoslash")
-		]);
-		return transformerTwoslash({
-			explicitTrigger: true,
-			twoslashOptions: { handbookOptions: { noErrorValidation: true } }
-		});
-	}
-	const transformers = [
-		...shikiOptions.transformers || [],
-		(config.twoslash === true || config.twoslash === mode) && await getTwoslashTransformer(),
-		{
-			pre(pre) {
-				this.addClassToHast(pre, "slidev-code");
-				delete pre.properties.tabindex;
-			},
-			postprocess(code) {
-				return escapeVueInCode(code);
+//#region node/syntax/codeblock/magic-move.ts
+const RE_MAGIC_MOVE_INFO = /^(?:md|markdown) magic-move\s*(?:\[([^\]]*)\])?\s*(\{[^}]*\})?/;
+const RE_CODE_BLOCK = /^```([\w'-]+)?(?:[ \t]*|[ \t][ \w\t'-]*)(?:\[([^\]]*)\])?[ \t]*(?:\{([\w*,|-]+)\}[ \t]*(\{[^}]*\})?([^\r\n]*))?\r?\n((?:(?!^```)[\s\S])*?)^```$/gm;
+const RE_LINES_TRUE = /\blines: *true\b/;
+const RE_LINES_FALSE = /\blines: *false\b/;
+function parseLineNumbersOption(options) {
+	return RE_LINES_TRUE.test(options) ? true : RE_LINES_FALSE.test(options) ? false : void 0;
+}
+var magic_move_default = defineCodeblockTransformer(async ({ info, fence, code, options: { data: { config }, utils: { shikiOptions, shiki } } }) => {
+	if (fence !== 4) return;
+	const match = info.match(RE_MAGIC_MOVE_INFO);
+	if (!match) return;
+	const [, title = "", options = "{}"] = match;
+	const defaultLineNumbers = parseLineNumbersOption(options) ?? config.lineNumbers;
+	const matches = Array.from(code.matchAll(RE_CODE_BLOCK));
+	if (!matches.length) throw new Error("Magic Move block must contain at least one code block");
+	const ranges = matches.map((i) => normalizeRangeStr(i[3]));
+	const steps = await Promise.all(matches.map(async (i) => {
+		const lang = i[1];
+		const lineNumbers = parseLineNumbersOption(i[4]) ?? defaultLineNumbers;
+		const code$1 = i[6].trimEnd();
+		const options$1 = {
+			...shikiOptions,
+			lang
+		};
+		const { tokens, bg, fg: fg$1, rootStyle, themeName } = await shiki.codeToTokens(code$1, options$1);
+		return {
+			...toKeyedTokens(code$1, tokens, JSON.stringify([lang, "themes" in options$1 ? options$1.themes : options$1.theme]), lineNumbers),
+			bg,
+			fg: fg$1,
+			rootStyle,
+			themeName,
+			lang
+		};
+	}));
+	return `<ShikiMagicMove v-bind="${options}" steps-lz="${lz.compressToBase64(JSON.stringify(steps))}" :title='${JSON.stringify(title)}' :step-ranges='${JSON.stringify(ranges)}' />`;
+});
+
+//#endregion
+//#region node/syntax/codeblock/mermaid.ts
+const RE_MERMAID = /^mermaid\s*(\{[^\n]*\})?/;
+var mermaid_default = defineCodeblockTransformer(async ({ info, code }) => {
+	const match = info.match(RE_MERMAID);
+	if (!match) return;
+	const [, options] = match;
+	return `<Mermaid ${options ? `v-bind="${options}"` : ""} code-lz="${lz.compressToBase64(code.trim())}" />`;
+});
+
+//#endregion
+//#region node/syntax/codeblock/monaco.ts
+const RE_MONACO = /^([\w'-]+)?\s*\{(monaco[\w-]*)\}\s*(\{[^}]*\})?(.*)$/;
+const RE_DIFF_SEPARATOR = /^\s*~~~\s*\n/m;
+var monaco_default = defineCodeblockTransformer(async ({ info, code, options: { data: { config }, mode } }) => {
+	const match = info.match(RE_MONACO);
+	if (!match) return;
+	const [, lang = "", monaco, options] = match;
+	if (!(config.monaco === true || config.monaco === mode)) return;
+	let encoded;
+	let diff = "";
+	if (monaco === "monaco-diff") {
+		const [original, modified] = code.split(RE_DIFF_SEPARATOR, 2);
+		encoded = lz.compressToBase64(original);
+		diff = modified === void 0 ? "" : `diff-lz="${lz.compressToBase64(modified)}"`;
+	} else encoded = lz.compressToBase64(code);
+	return `<Monaco ${options ? `v-bind="${options}"` : ""} ${monaco === "monaco-run" ? "runnable" : ""} lang="${lang}" code-lz="${encoded}" ${diff} />`;
+});
+
+//#endregion
+//#region node/syntax/codeblock/plant-uml.ts
+const RE_PLANT_UML = /^plantuml\s*(\{[^\n]*\})?/;
+var plant_uml_default = defineCodeblockTransformer(async ({ info, code, options: { data: { config: { plantUmlServer } } } }) => {
+	const match = info.match(RE_PLANT_UML);
+	if (!match) return;
+	const [, options] = match;
+	return `<PlantUml ${options ? `v-bind="${options}"` : ""} code="${encode(code.trim())}"${plantUmlServer === void 0 ? "" : ` server=${JSON.stringify(plantUmlServer)}`} />`;
+});
+
+//#endregion
+//#region node/syntax/codeblock/wrapper.ts
+const RE_BLOCK_INFO = /^([\w'-]+)?(?:[ \t]*|[ \t][ \w\t'-]*)(?:\[([^\]]*)\])?[ \t]*(?:\{([\w,|\-*]+)\})?[ \t]*(\{[^}]*\})?(.*)$/;
+var wrapper_default = defineCodeblockTransformer(async ({ info, renderHighlighted }) => {
+	const [, lang = "", title = "", rangeStr = "", options, rest = ""] = info.match(RE_BLOCK_INFO) ?? [];
+	const ranges = normalizeRangeStr(rangeStr);
+	const optionsProp = options ? `v-bind="${options}"` : "";
+	const code = await renderHighlighted({ info: `${lang} ${rest}` });
+	return `<CodeBlockWrapper ${optionsProp} title=${JSON.stringify(title)} :ranges='${JSON.stringify(ranges)}'>${escapeVueInCode(code)}</CodeBlockWrapper>`;
+});
+
+//#endregion
+//#region node/syntax/codeblock/index.ts
+function MarkdownItCodeblocks(md, options, extraTransformers) {
+	const oldFence = md.renderer.rules.fence;
+	md.renderer.rules.fence = async function(tokens, idx, renderOptions, env, slf) {
+		const token = tokens[idx];
+		const slideNo = env.id?.match(regexSlideSourceId);
+		const ctx = {
+			info: token.info.trim(),
+			code: token.content,
+			fence: token.markup.length,
+			slide: slideNo ? options.data.slides[slideNo[1] - 1] : null,
+			options,
+			renderHighlighted(override) {
+				if (override.info != null) token.info = override.info;
+				if (override.code != null) token.content = override.code;
+				return oldFence(tokens, idx, renderOptions, env, slf);
 			}
+		};
+		const transformers = [
+			...extraTransformers,
+			mermaid_default,
+			plant_uml_default,
+			magic_move_default,
+			monaco_default,
+			wrapper_default
+		];
+		for (const transformer of transformers) {
+			if (!transformer) continue;
+			const res = await transformer(ctx);
+			if (res != null) return ensureSuffix("\n", res);
 		}
-	].filter(isTruthy);
-	return fromAsyncCodeToHtml(shiki.codeToHtml, {
-		...shikiOptions,
-		transformers
-	});
+		throw new Error("Should not reach here");
+	};
 }
 
 //#endregion
-//#region node/syntax/markdown-it/markdown-it-v-drag.ts
+//#region node/syntax/drag.ts
 const dragComponentRegex = /<(v-?drag-?\w*)([\s>])/i;
 const dragDirectiveRegex = /(?<![</\w])v-drag(=".*?")?/i;
 function MarkdownItVDrag(md, markdownTransformMap) {
 	const visited = /* @__PURE__ */ new WeakSet();
 	const sourceMapConsumers = /* @__PURE__ */ new WeakMap();
-	function getSourceMapConsumer(id) {
-		const s = markdownTransformMap.get(id);
+	function getSourceMapConsumer(id$2) {
+		const s = id$2 && markdownTransformMap.get(id$2);
 		if (!s) return void 0;
 		let smc = sourceMapConsumers.get(s);
 		if (smc) return smc;
@@ -1976,7 +2060,7 @@ function MarkdownItVDrag(md, markdownTransformMap) {
 	}
 	const _parse = md.parse;
 	md.parse = function(src, env) {
-		const smc = getSourceMapConsumer(env.id);
+		const smc = getSourceMapConsumer(env?.id);
 		const toOriginalPos = smc ? (line) => smc.originalPositionFor({
 			line: line + 1,
 			column: 0
@@ -2014,211 +2098,126 @@ function MarkdownItVDrag(md, markdownTransformMap) {
 }
 
 //#endregion
-//#region node/syntax/markdown-it/index.ts
-async function useMarkdownItPlugins(md, options, markdownTransformMap) {
-	const { data: { features, config }, utils: { katexOptions } } = options;
-	if (config.highlighter === "shiki") md.use(await MarkdownItShiki(options));
-	md.use(MarkdownItLink);
-	md.use(MarkdownItEscapeInlineCode);
-	md.use(MarkdownItFootnote);
-	md.use(taskLists, {
-		enabled: true,
-		lineNumber: true,
-		label: true
-	});
-	if (features.katex) md.use(MarkdownItKatex, katexOptions);
-	md.use(MarkdownItVDrag, markdownTransformMap);
-	if (config.comark || config.mdc) md.use(MarkdownItComark);
-}
-
-//#endregion
-//#region node/setups/transformers.ts
-async function setupTransformers(roots) {
-	const returns = await loadSetups(roots, "transformers.ts", []);
-	const result = {
-		pre: [],
-		preCodeblock: [],
-		postCodeblock: [],
-		post: []
+//#region node/syntax/escape-code.ts
+const RE_CODE_TAG_OPEN = /^<code/;
+function MarkdownItEscapeInlineCode(md) {
+	const codeInline = md.renderer.rules.code_inline;
+	md.renderer.rules.code_inline = async (tokens, idx, options, env, self) => {
+		return (await codeInline(tokens, idx, options, env, self)).replace(RE_CODE_TAG_OPEN, "<code v-pre");
 	};
-	for (const r of [...returns].reverse()) {
-		if (r.pre) result.pre.push(...r.pre);
-		if (r.preCodeblock) result.preCodeblock.push(...r.preCodeblock);
-	}
-	for (const r of returns) {
-		if (r.postCodeblock) result.postCodeblock.push(...r.postCodeblock);
-		if (r.post) result.post.push(...r.post);
-	}
-	return result;
-}
-
-//#endregion
-//#region node/syntax/transform/code-wrapper.ts
-const reCodeBlock = /^```([\w'-]+)?(?:[ \t]*|[ \t][ \w\t'-]*)(?:\[([^\]]*)\])?[ \t]*(?:\{([\w*,|-]+)\}[ \t]*(\{[^}]*\})?([^\r\n]*))?\r?\n((?:(?!^```)[\s\S])*?)^```$/gm;
-/**
-* Transform code block with wrapper
-*/
-function transformCodeWrapper(ctx) {
-	ctx.s.replace(reCodeBlock, (full, lang = "", title = "", rangeStr = "", options = "", attrs = "", code) => {
-		const ranges = normalizeRangeStr(rangeStr);
-		code = code.trimEnd();
-		options = options.trim() || "{}";
-		return `\n<CodeBlockWrapper v-bind="${options}" :title='${JSON.stringify(title)}' :ranges='${JSON.stringify(ranges)}'>\n\n\`\`\`${lang}${title ? ` [${title}]` : ""}${attrs ? ` ${attrs.trim()}` : ""}\n${code}\n\`\`\`\n\n</CodeBlockWrapper>`;
-	});
-}
-
-//#endregion
-//#region node/syntax/transform/in-page-css.ts
-/**
-* Transform <style> in markdown to scoped style with page selector
-*/
-function transformPageCSS(ctx) {
-	const codeBlocks = getCodeBlocks(ctx.s.original);
-	const commentBlocks = getCommentBlocks(ctx.s.original);
-	ctx.s.replace(/(\n<style[^>]*>)([\s\S]+?)(<\/style>)/g, (full, start, css, end, index) => {
-		if (codeBlocks.isInsideCodeblocks(index)) return full;
-		if (commentBlocks.isInsideCommentBlocks(index)) return ``;
-		if (!start.includes("scoped")) start = start.replace("<style", "<style scoped");
-		return `${start}\n${css}${end}`;
-	});
 }
 
 //#endregion
-//#region node/syntax/transform/katex-wrapper.ts
-/**
-* Wrapper KaTex syntax `$$...$$` for highlighting
-*/
-function transformKaTexWrapper(ctx) {
-	ctx.s.replace(/^\$\$(?:\s*\{([\w*,|-]+)\}\s*?(?:(\{[^}]*\})\s*?)?)?\n(\S[\s\S]*?)^\$\$/gm, (full, rangeStr = "", options = "", code) => {
-		const ranges = !rangeStr.trim() ? [] : rangeStr.trim().split(/\|/g).map((i) => i.trim());
-		code = code.trimEnd();
-		options = options.trim() || "{}";
-		return `<KaTexBlockWrapper v-bind="${options}" :ranges='${JSON.stringify(ranges)}'>\n\n\$\$\n${code}\n\$\$\n</KaTexBlockWrapper>\n`;
-	});
+//#region node/syntax/scoped.ts
+const RE_STYLE_TAG_OPEN = /<style\b([^>]*)>/gi;
+const RE_SCOPED_ATTR = /\bscoped\b/i;
+function MarkdownItStyleScoped(md) {
+	const addScoped = (html) => {
+		return html.replace(RE_STYLE_TAG_OPEN, (match, attrs) => {
+			if (RE_SCOPED_ATTR.test(attrs)) return match;
+			return `<style scoped${attrs}>`;
+		});
+	};
+	const htmlBlock = md.renderer.rules.html_block;
+	md.renderer.rules.html_block = async (...args) => addScoped(await htmlBlock(...args));
+	const htmlInline = md.renderer.rules.html_inline;
+	md.renderer.rules.html_inline = async (...args) => addScoped(await htmlInline(...args));
 }
 
 //#endregion
-//#region node/syntax/transform/magic-move.ts
-const reMagicMoveBlock = /^````(?:md|markdown) magic-move(?: *\[([^\]]*)\])?(?: *(\{[^}]*\}))? *([^\n]*)\n([\s\S]+?)^````\s*?$/gm;
-function parseLineNumbersOption(options) {
-	return /lines: *true/.test(options) ? true : /lines: *false/.test(options) ? false : void 0;
-}
-/**
-* Transform magic-move code blocks
-*/
-async function transformMagicMove(ctx) {
-	const { codeToTokens } = ctx.options.utils.shiki;
-	const replacements = [];
-	ctx.s.replace(reMagicMoveBlock, (full, title = "", options = "{}", _attrs = "", body, start) => {
-		const end = start + full.length;
-		replacements.push([
-			start,
-			end,
-			worker()
+//#region node/syntax/shiki.ts
+async function MarkdownItShiki({ data: { config }, mode, utils: { shiki, shikiOptions } }) {
+	async function getTwoslashTransformer() {
+		const [, , { transformerTwoslash }] = await Promise.all([
+			shiki.codeToHast("", {
+				lang: "js",
+				...shikiOptions
+			}),
+			shiki.codeToHast("", {
+				lang: "ts",
+				...shikiOptions
+			}),
+			import("@shikijs/vitepress-twoslash")
 		]);
-		return "";
-		async function worker() {
-			const matches = Array.from(body.matchAll(reCodeBlock));
-			if (!matches.length) throw new Error("Magic Move block must contain at least one code block");
-			const defaultLineNumbers = parseLineNumbersOption(options) ?? ctx.options.data.config.lineNumbers;
-			const ranges = matches.map((i) => normalizeRangeStr(i[3]));
-			const steps = await Promise.all(matches.map(async (i) => {
-				const lang = i[1];
-				const lineNumbers = parseLineNumbersOption(i[4]) ?? defaultLineNumbers;
-				const code = i[6].trimEnd();
-				const options$1 = {
-					...ctx.options.utils.shikiOptions,
-					lang
-				};
-				const { tokens, bg, fg: fg$1, rootStyle, themeName } = await codeToTokens(code, options$1);
-				return {
-					...toKeyedTokens(code, tokens, JSON.stringify([lang, "themes" in options$1 ? options$1.themes : options$1.theme]), lineNumbers),
-					bg,
-					fg: fg$1,
-					rootStyle,
-					themeName,
-					lang
-				};
-			}));
-			return `<ShikiMagicMove v-bind="${options}" steps-lz="${lz.compressToBase64(JSON.stringify(steps))}" :title='${JSON.stringify(title)}' :step-ranges='${JSON.stringify(ranges)}' />`;
-		}
-	});
-	for (const [start, end, content] of replacements) ctx.s.overwrite(start, end, await content);
-}
-
-//#endregion
-//#region node/syntax/transform/mermaid.ts
-/**
-* Transform Mermaid code blocks (render done on client side)
-*/
-function transformMermaid(ctx) {
-	ctx.s.replace(/^```mermaid *(\{[^\n]*\})?\n([\s\S]+?)\n```/gm, (full, options = "", code = "") => {
-		code = code.trim();
-		options = options.trim() || "{}";
-		return `<Mermaid code-lz="${lz.compressToBase64(code)}" v-bind="${options}" />`;
-	});
-}
-
-//#endregion
-//#region node/syntax/transform/monaco.ts
-function transformMonaco(ctx) {
-	if (!(ctx.options.data.config.monaco === true || ctx.options.data.config.monaco === ctx.options.mode)) {
-		ctx.s.replace(/\{monaco([\w:,-]*)\}/g, "");
-		return;
+		return transformerTwoslash({
+			explicitTrigger: true,
+			twoslashOptions: { handbookOptions: { noErrorValidation: true } }
+		});
 	}
-	ctx.s.replace(/^```(\w+) *\{monaco-diff\} *(?:(\{[^\n]*\}) *)?\n([\s\S]+?)^~~~ *\n([\s\S]+?)^```/gm, (full, lang = "ts", options = "{}", code, diff) => {
-		lang = lang.trim();
-		options = options.trim() || "{}";
-		return `<Monaco code-lz="${lz.compressToBase64(code)}" diff-lz="${lz.compressToBase64(diff)}" lang="${lang}" v-bind="${options}" />`;
-	});
-	ctx.s.replace(/^```(\w+) *\{monaco\} *(?:(\{[^\n]*\}) *)?\n([\s\S]+?)^```/gm, (full, lang = "ts", options = "{}", code) => {
-		lang = lang.trim();
-		options = options.trim() || "{}";
-		return `<Monaco code-lz="${lz.compressToBase64(code)}" lang="${lang}" v-bind="${options}" />`;
-	});
-	ctx.s.replace(/^```(\w+) *\{monaco-run\} *(?:(\{[^\n]*\}) *)?\n([\s\S]+?)^```/gm, (full, lang = "ts", options = "{}", code) => {
-		lang = lang.trim();
-		options = options.trim() || "{}";
-		return `<Monaco runnable code-lz="${lz.compressToBase64(code)}" lang="${lang}" v-bind="${options}" />`;
+	const transformers = [
+		...shikiOptions.transformers || [],
+		(config.twoslash === true || config.twoslash === mode) && await getTwoslashTransformer(),
+		(config.twoslash === true || config.twoslash === mode) && transformerTwoslashConditional(),
+		{ pre(pre) {
+			this.addClassToHast(pre, "slidev-code");
+			delete pre.properties.tabindex;
+		} }
+	].filter(isTruthy);
+	return fromAsyncCodeToHtml(shiki.codeToHtml, {
+		...shikiOptions,
+		transformers
 	});
 }
-
-//#endregion
-//#region node/syntax/transform/plant-uml.ts
-function transformPlantUml(ctx) {
-	const server = ctx.options.data.config.plantUmlServer;
-	ctx.s.replace(/^```plantuml[^\n{}]*(\{[^}\n]*\})?\n([\s\S]+?)\n```/gm, (full, options = "", content = "") => {
-		const code = encode(content.trim());
-		options = options.trim() || "{}";
-		return `<PlantUml :code="'${code}'" :server="'${server}'" v-bind="${options}" />`;
-	});
+function transformerTwoslashConditional() {
+	return {
+		name: "slidev:twoslash-conditional",
+		code: function applyConditionalFlag(node) {
+			if (node.tagName === "v-menu") {
+				if (node.properties[":shown"] === "true") node.properties[":shown"] = "$nav.currentPage === $page";
+			} else for (const child of node.children) if (child.type === "element") applyConditionalFlag(child);
+		}
+	};
 }
 
 //#endregion
-//#region 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 commentBlocks = getCommentBlocks(ctx.s.original);
-	const lines = [];
-	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;
-	let offset = 0;
-	lines.forEach((line) => {
-		const start = offset;
-		offset += line.length;
-		if (codeBlocks.isInsideCodeblocks(offset) || commentBlocks.isInsideCommentBlocks(offset)) return;
-		const match = line.match(/^::\s*([\w.\-:]+)\s*::(\s*)$/);
-		if (match) {
-			ctx.s.overwrite(start, offset - match[2].length, `${prevSlot ? "\n\n</template>\n" : "\n"}<template v-slot:${match[1]}="slotProps">\n`);
-			prevSlot = true;
+//#region node/syntax/slot-sugar.ts
+const RE_SLOT_MARKER = /^::\s*([\w.\-:]+)\s*::\s*$/;
+function MarkdownItSlotSugar(md) {
+	md.block.ruler.before("fence", "slot_marker", (state, startLine, _endLine, silent) => {
+		if (state.sCount[startLine] - state.blkIndent > 0) return false;
+		const pos = state.bMarks[startLine] + state.tShift[startLine];
+		const max = state.eMarks[startLine];
+		const match = state.src.slice(pos, max).match(RE_SLOT_MARKER);
+		if (!match) return false;
+		if (silent) return true;
+		const token = state.push("slot_marker", "", 0);
+		token.meta = { slotName: match[1] };
+		token.map = [startLine, startLine + 1];
+		state.line = startLine + 1;
+		state.env.hasSlotMarker = true;
+		return true;
+	}, { alt: [
+		"paragraph",
+		"reference",
+		"blockquote",
+		"list"
+	] });
+	md.core.ruler.push("slot_sugar_compiler", (state) => {
+		if (!state.env.hasSlotMarker) return;
+		const tokens = state.tokens;
+		const newTokens = [];
+		let hasOpenSlot = false;
+		for (let i = 0; i < tokens.length; i++) {
+			const token = tokens[i];
+			if (token.type === "slot_marker") {
+				if (hasOpenSlot) {
+					const closeHtml = new state.Token("html_block", "", 0);
+					closeHtml.content = "\n</template>\n";
+					newTokens.push(closeHtml);
+				}
+				const openHtml = new state.Token("html_block", "", 0);
+				openHtml.content = `\n<template v-slot:${token.meta.slotName}="slotProps">\n`;
+				newTokens.push(openHtml);
+				hasOpenSlot = true;
+			} else newTokens.push(token);
+		}
+		if (hasOpenSlot) {
+			const closeHtml = new state.Token("html_block", "", 0);
+			closeHtml.content = "\n</template>\n";
+			newTokens.push(closeHtml);
 		}
+		state.tokens = newTokens;
 	});
-	if (prevSlot) ctx.s.append("\n\n</template>");
 }
 
 //#endregion
@@ -2254,7 +2253,8 @@ function createMonacoWriterPlugin({ userRoot }) {
 }
 
 //#endregion
-//#region node/syntax/transform/snippet.ts
+//#region node/syntax/snippet.ts
+const RE_NEWLINE = /\r?\n/;
 function dedent(text) {
 	const lines = text.split("\n");
 	const minIndentLength = lines.reduce((acc, line) => {
@@ -2327,76 +2327,96 @@ function findRegion(lines, regionName) {
 	}
 	return null;
 }
-const reMonacoWrite = /^\{monaco-write\}/;
-/**
-* format: ">>> /path/to/file.extension#region language meta..."
-*    where #region, language and meta are optional
-*    meta should starts with {
-*    lang can contain special characters like C++, C#, F#, etc.
-*    path can be relative to the current file or absolute
-*    file extension is optional
-*    path can contain spaces and dots
-*
-* captures: ['/path/to/file.extension', '#region', 'language', '{meta}']
-*/
-function transformSnippet({ s, slide, options }) {
-	const watchFiles = options.data.watchFiles;
-	const dir = path.dirname(slide.source?.filepath ?? options.entry ?? options.userRoot);
-	s.replace(/^<<<[ \t]*(\S.*?)(#[\w-]+)?[ \t]*(?:[ \t](\S+?))?[ \t]*(\{.*)?$/gm, (full, filepath = "", regionName = "", lang = "", meta = "") => {
-		const src = slash(/^@\//.test(filepath) ? path.resolve(options.userRoot, filepath.slice(2)) : path.resolve(dir, filepath));
+const RE_SNIPPET_IMPORT = /^<<<[ \t]*(\S.*?)(#[\w-]+)?[ \t]*(?:[ \t](\S+?))?[ \t]*(\{.*)?$/;
+function MarkdownItSnippet(md, { userRoot, data: { watchFiles, slides } }) {
+	md.block.ruler.before("fence", "snippet_import", (state, startLine, _endLine, silent) => {
+		const pos = state.bMarks[startLine] + state.tShift[startLine];
+		const max = state.eMarks[startLine];
+		const match = state.src.slice(pos, max).match(RE_SNIPPET_IMPORT);
+		if (!match) return false;
+		if (silent) return true;
+		let [, filepath = "", regionName = "", lang = "", meta = ""] = match;
+		const slideNo = state.env.id?.match(regexSlideSourceId);
+		const slide = slideNo ? slides[slideNo[1] - 1] : null;
+		if (!slide) {
+			console.warn(yellow(`[markdown-it-snippet] Snippet syntax is not supported in ${state.env.id || "unknown source"}. Skipped.`));
+			return false;
+		}
+		const dir = path.dirname(slide.source.filepath);
+		const src = slash(filepath.startsWith("@/") ? path.resolve(userRoot, filepath.slice(2)) : path.resolve(dir, filepath));
+		lang = lang.trim() || path.extname(filepath).slice(1);
 		meta = meta.trim();
-		lang = lang.trim();
-		lang = lang || path.extname(filepath).slice(1);
-		const isAFile = fs.statSync(src).isFile();
-		if (!fs.existsSync(src) || !isAFile) throw new Error(isAFile ? `Code snippet path not found: ${src}` : `Invalid code snippet option`);
+		if (!(fs.existsSync(src) && fs.statSync(src).isFile())) throw new Error(`Code snippet path not found: ${src}`);
 		let content = fs.readFileSync(src, "utf8");
 		if (regionName) {
-			const lines = content.split(/\r?\n/);
+			const lines = content.split(RE_NEWLINE);
 			const region = findRegion(lines, regionName.slice(1));
 			if (region) content = dedent(lines.slice(region.start, region.end).filter((l) => !(region.re.start.test(l) || region.re.end.test(l))).join("\n"));
 		}
-		if (meta.match(reMonacoWrite)) {
+		if (meta.includes("{monaco-write}")) {
 			monacoWriterWhitelist.add(filepath);
 			lang = lang.trim();
-			meta = meta.replace(reMonacoWrite, "").trim() || "{}";
+			meta = meta.replace("{monaco-write}", "").trim() || "{}";
+			const safeFilepath = JSON.stringify(filepath).slice(1, -1);
 			const encoded = lz.compressToBase64(content);
-			return `<Monaco writable=${JSON.stringify(filepath)} code-lz="${encoded}" lang="${lang}" v-bind="${meta}" />`;
+			const token = state.push("html_block", "", 0);
+			token.content = `<Monaco writable="${safeFilepath}" code-lz="${encoded}" lang="${lang}" v-bind="${meta}" />\n`;
+			token.map = [startLine, startLine + 1];
 		} else {
 			watchFiles[src] ??= /* @__PURE__ */ new Set();
 			watchFiles[src].add(slide.index);
+			const token = state.push("fence", "code", 0);
+			token.info = `${lang} ${meta}`.trim();
+			token.content = content.endsWith("\n") ? content : `${content}\n`;
+			token.map = [startLine, startLine + 1];
 		}
-		return `\`\`\`${lang} ${meta}\n${content}\n\`\`\``;
+		state.line = startLine + 1;
+		return true;
+	}, { alt: [
+		"paragraph",
+		"reference",
+		"blockquote",
+		"list"
+	] });
+}
+
+//#endregion
+//#region node/syntax/index.ts
+async function useMarkdownItPlugins(md, options, markdownTransformMap, codeblockTransformers) {
+	const { data: { features, config }, utils: { katexOptions } } = options;
+	md.use(MarkdownItSnippet, options);
+	md.use(await MarkdownItShiki(options));
+	md.use(MarkdownItCodeblocks, options, codeblockTransformers);
+	md.use(MarkdownItLink);
+	md.use(MarkdownItEscapeInlineCode);
+	md.use(MarkdownItFootnote);
+	md.use(taskLists, {
+		enabled: true,
+		lineNumber: true,
+		label: true
 	});
+	if (features.katex) md.use(MarkdownItKatex, katexOptions);
+	md.use(MarkdownItVDrag, markdownTransformMap);
+	md.use(MarkdownItSlotSugar);
+	if (config.comark || config.mdc) md.use(MarkdownItComark);
+	md.use(MarkdownItStyleScoped);
+	md.use(MarkdownItGitHubAlerts);
 }
 
 //#endregion
-//#region node/syntax/transform/index.ts
-async function getMarkdownTransformers(options) {
+//#region node/vite/markdown.ts
+const RE_MD_EXT$1 = /\.md$/;
+async function createMarkdownPlugin(options, { markdown: mdOptions }) {
+	const markdownTransformMap = /* @__PURE__ */ new Map();
 	const extras = await setupTransformers(options.roots);
-	return [
+	const transformers = [
 		...extras.pre,
-		transformSnippet,
-		options.data.config.highlighter === "shiki" && transformMagicMove,
 		...extras.preCodeblock,
-		transformMermaid,
-		transformPlantUml,
-		options.data.features.monaco && transformMonaco,
 		...extras.postCodeblock,
-		transformCodeWrapper,
-		options.data.features.katex && transformKaTexWrapper,
-		transformPageCSS,
-		transformSlotSugar,
 		...extras.post
 	];
-}
-
-//#endregion
-//#region node/vite/markdown.ts
-async function createMarkdownPlugin(options, { markdown: mdOptions }) {
-	const markdownTransformMap = /* @__PURE__ */ new Map();
-	const transformers = await getMarkdownTransformers(options);
 	return Markdown({
-		include: [/\.md$/],
+		include: [RE_MD_EXT$1],
 		wrapperClasses: "",
 		headEnabled: false,
 		frontmatter: false,
@@ -2410,18 +2430,18 @@ async function createMarkdownPlugin(options, { markdown: mdOptions }) {
 		},
 		...mdOptions,
 		async markdownSetup(md) {
-			await useMarkdownItPlugins(md, options, markdownTransformMap);
+			await useMarkdownItPlugins(md, options, markdownTransformMap, extras.codeblocks);
 			await mdOptions?.markdownSetup?.(md);
 		},
 		transforms: {
 			...mdOptions?.transforms,
-			async before(code, id) {
-				if (options.data.markdownFiles[id]) return "";
-				code = await mdOptions?.transforms?.before?.(code, id) ?? code;
-				const match = id.match(regexSlideSourceId);
+			async before(code, id$2) {
+				if (options.data.markdownFiles[id$2]) return "";
+				code = await mdOptions?.transforms?.before?.(code, id$2) ?? code;
+				const match = id$2.match(regexSlideSourceId);
 				if (!match) return code;
 				const s = new MagicString(code);
-				markdownTransformMap.set(id, s);
+				markdownTransformMap.set(id$2, s);
 				const ctx = {
 					s,
 					slide: options.data.slides[+match[1] - 1],
@@ -2443,13 +2463,13 @@ async function createMarkdownPlugin(options, { markdown: mdOptions }) {
 function createMonacoTypesLoader({ userRoot, utils }) {
 	return {
 		name: "slidev:monaco-types-loader",
-		resolveId(id) {
-			if (id.startsWith("/@slidev-monaco-types/")) return id;
+		resolveId(id$2) {
+			if (id$2.startsWith("/@slidev-monaco-types/")) return id$2;
 			return null;
 		},
-		async load(id) {
-			if (!id.startsWith("/@slidev-monaco-types/")) return null;
-			const url = new URL(id, "http://localhost");
+		async load(id$2) {
+			if (!id$2.startsWith("/@slidev-monaco-types/")) return null;
+			const url = new URL(id$2, "http://localhost");
 			if (url.pathname === "/@slidev-monaco-types/resolve") {
 				const query = new URLSearchParams(url.search);
 				const pkg = query.get("pkg");
@@ -2502,9 +2522,9 @@ function createPatchMonacoSourceMapPlugin() {
 	return {
 		name: "slidev:patch-monaco-sourcemap",
 		enforce: "pre",
-		load(id) {
-			if (!id.includes("node_modules/monaco-editor/esm/vs/base")) return;
-			return readFile(cleanUrl(id), "utf-8");
+		load(id$2) {
+			if (!id$2.includes("node_modules/monaco-editor/esm/vs/base")) return;
+			return readFile(cleanUrl(id$2), "utf-8");
 		}
 	};
 }
@@ -2515,7 +2535,7 @@ async function createRemoteAssetsPlugin({ data: { config }, mode }, pluginOption
 	if (!(config.remoteAssets === true || config.remoteAssets === mode)) return;
 	const { VitePluginRemoteAssets, DefaultRules } = await import("vite-plugin-remote-assets");
 	return VitePluginRemoteAssets({
-		resolveMode: (id) => id.endsWith("index.html") ? "relative" : "@fs",
+		resolveMode: (id$2) => id$2.endsWith("index.html") ? "relative" : "@fs",
 		awaitDownload: mode === "build",
 		...pluginOptions.remoteAssets,
 		rules: [
@@ -2669,6 +2689,11 @@ async function createUnocssPlugin(options, pluginOptions) {
 
 //#endregion
 //#region node/vite/vue.ts
+const RE_VUE_EXT = /\.vue$/;
+const RE_VUE_QUERY_VUE = /\.vue\?vue/;
+const RE_VUE_QUERY_V = /\.vue\?v=/;
+const RE_MD_EXT = /\.md$/;
+const RE_MD_QUERY_VUE = /\.md\?vue/;
 const customElements = new Set([
 	"annotation",
 	"math",
@@ -2702,11 +2727,11 @@ async function createVuePlugin(_options, pluginOptions) {
 	const { vue: vueOptions = {}, vuejsx: vuejsxOptions = {} } = pluginOptions;
 	const VuePlugin = Vue({
 		include: [
-			/\.vue$/,
-			/\.vue\?vue/,
-			/\.vue\?v=/,
-			/\.md$/,
-			/\.md\?vue/
+			RE_VUE_EXT,
+			RE_VUE_QUERY_VUE,
+			RE_VUE_QUERY_V,
+			RE_MD_EXT,
+			RE_MD_QUERY_VUE
 		],
 		exclude: [],
 		...vueOptions,