@mistweaverco/mdsvex-shiki 1.0.15 → 1.0.17

package/README.md

@@ -1,13 +1,35 @@
 # mdsvex-shiki
 
-Supports most [common transformers][shiki-transformers] out of the box.
+A highlighter for mdsvex using Shiki with
+support for most [common transformers][shiki-transformers] out of the box.
+
+Why? Because mdsvex's built-in Prism highlighter is
+limited in features and customization options.
+
+We needed a better solution for our SvelteKit projects,
+so we created this package to fill the gap.
+
+<img width="945" height="874" alt="Screenshot" src="https://github.com/user-attachments/assets/c717f559-ae96-4372-a1ac-3eba3d4db340" />
 
 ## Installation
 
-Using bun:
+Using your package manager of choice, run:
 
 ```bash
-bun add @mistweaverco/mdsvex-shiki#v1.0.15
+# npm
+npm install @mistweaverco/mdsvex-shiki@v1.0.16
+
+# yarn
+yarn add @mistweaverco/mdsvex-shiki@v1.0.
+
+# bun
+bun add @mistweaverco/mdsvex-shiki@v1.0.16
+
+# pnpm
+pnpm add @mistweaverco/mdsvex-shiki@v1.0.16
+
+# deno
+deno add npm:@mistweaverco/mdsvex-shiki@v1.0.16
 ```
 
 ## Configuration

package/index.cjs

@@ -4837,20 +4837,20 @@ var mdsvexWrapItUpTransformer = (lang, codeText, disableCopyButton) => {
               tabindex: "0"
             },
             children: [
-              ...children.map((child) => {
+              ...children.flatMap((child) => {
                 if (child.type === "element" && child.tagName === "pre") {
-                  return {
-                    ...child,
-                    children: [
-                      {
-                        type: "element",
-                        tagName: "div",
-                        properties: { class: "header" },
-                        children: headerChildren
-                      },
-                      ...child.children
-                    ]
-                  };
+                  return [
+                    {
+                      type: "element",
+                      tagName: "div",
+                      properties: { class: "header" },
+                      children: headerChildren
+                    },
+                    {
+                      ...child,
+                      children: child.children
+                    }
+                  ];
                 }
                 return child;
               })
@@ -4878,7 +4878,7 @@ var mdsvexWrapItUpTransformer = (lang, codeText, disableCopyButton) => {
   };
 };
 
-// node_modules/shiki/node_modules/@shikijs/types/dist/index.mjs
+// node_modules/@shikijs/types/dist/index.mjs
 class ShikiError extends Error {
   constructor(message) {
     super(message);
@@ -9629,7 +9629,7 @@ function all(parent) {
   }
   return results.join("");
 }
-// node_modules/shiki/node_modules/@shikijs/core/dist/index.mjs
+// node_modules/@shikijs/core/dist/index.mjs
 function resolveColorReplacements(theme, options) {
   const replacements = typeof theme === "string" ? {} : { ...theme.colorReplacements };
   const themeName = typeof theme === "string" ? theme : theme.name;
@@ -9727,34 +9727,6 @@ function createPositionConverter(code) {
     posToIndex
   };
 }
-function guessEmbeddedLanguages(code, _lang, highlighter) {
-  const langs = /* @__PURE__ */ new Set;
-  for (const match of code.matchAll(/:?lang=["']([^"']+)["']/g)) {
-    const lang = match[1].toLowerCase().trim();
-    if (lang)
-      langs.add(lang);
-  }
-  for (const match of code.matchAll(/(?:```|~~~)([\w-]+)/g)) {
-    const lang = match[1].toLowerCase().trim();
-    if (lang)
-      langs.add(lang);
-  }
-  for (const match of code.matchAll(/\\begin\{([\w-]+)\}/g)) {
-    const lang = match[1].toLowerCase().trim();
-    if (lang)
-      langs.add(lang);
-  }
-  for (const match of code.matchAll(/<script\s+(?:type|lang)=["']([^"']+)["']/gi)) {
-    const fullType = match[1].toLowerCase().trim();
-    const lang = fullType.includes("/") ? fullType.split("/").pop() : fullType;
-    if (lang)
-      langs.add(lang);
-  }
-  if (!highlighter)
-    return Array.from(langs);
-  const bundle = highlighter.getBundledLanguages();
-  return Array.from(langs).filter((l) => l && bundle[l]);
-}
 var DEFAULT_COLOR_LIGHT_DARK = "light-dark()";
 var COLOR_KEYS = ["color", "background-color"];
 function splitToken(token, offsets) {
@@ -11612,78 +11584,6 @@ function createBundledHighlighter(options) {
   }
   return createHighlighter;
 }
-function makeSingletonHighlighter(createHighlighter) {
-  let _shiki;
-  async function getSingletonHighlighter(options = {}) {
-    if (!_shiki) {
-      _shiki = createHighlighter({
-        ...options,
-        themes: [],
-        langs: []
-      });
-      const s = await _shiki;
-      await Promise.all([
-        s.loadTheme(...options.themes || []),
-        s.loadLanguage(...options.langs || [])
-      ]);
-      return s;
-    } else {
-      const s = await _shiki;
-      await Promise.all([
-        s.loadTheme(...options.themes || []),
-        s.loadLanguage(...options.langs || [])
-      ]);
-      return s;
-    }
-  }
-  return getSingletonHighlighter;
-}
-function createSingletonShorthands(createHighlighter, config) {
-  const getSingletonHighlighter = makeSingletonHighlighter(createHighlighter);
-  async function get(code, options) {
-    const shiki = await getSingletonHighlighter({
-      langs: [options.lang],
-      themes: "theme" in options ? [options.theme] : Object.values(options.themes)
-    });
-    const langs = await config?.guessEmbeddedLanguages?.(code, options.lang, shiki);
-    if (langs) {
-      await shiki.loadLanguage(...langs);
-    }
-    return shiki;
-  }
-  return {
-    getSingletonHighlighter(options) {
-      return getSingletonHighlighter(options);
-    },
-    async codeToHtml(code, options) {
-      const shiki = await get(code, options);
-      return shiki.codeToHtml(code, options);
-    },
-    async codeToHast(code, options) {
-      const shiki = await get(code, options);
-      return shiki.codeToHast(code, options);
-    },
-    async codeToTokens(code, options) {
-      const shiki = await get(code, options);
-      return shiki.codeToTokens(code, options);
-    },
-    async codeToTokensBase(code, options) {
-      const shiki = await get(code, options);
-      return shiki.codeToTokensBase(code, options);
-    },
-    async codeToTokensWithThemes(code, options) {
-      const shiki = await get(code, options);
-      return shiki.codeToTokensWithThemes(code, options);
-    },
-    async getLastGrammarState(code, options) {
-      const shiki = await getSingletonHighlighter({
-        langs: [options.lang],
-        themes: [options.theme]
-      });
-      return shiki.getLastGrammarState(code, options);
-    }
-  };
-}
 // node_modules/shiki/dist/langs.mjs
 var bundledLanguagesInfo = [
   {
@@ -13862,21 +13762,8 @@ var createHighlighter = /* @__PURE__ */ createBundledHighlighter({
   themes: bundledThemes,
   engine: () => createOnigurumaEngine(Promise.resolve().then(() => (init_wasm2(), exports_wasm2)))
 });
-var {
-  codeToHtml: codeToHtml2,
-  codeToHast: codeToHast2,
-  codeToTokens: codeToTokens2,
-  codeToTokensBase: codeToTokensBase2,
-  codeToTokensWithThemes: codeToTokensWithThemes2,
-  getSingletonHighlighter,
-  getLastGrammarState: getLastGrammarState2
-} = /* @__PURE__ */ createSingletonShorthands(createHighlighter, { guessEmbeddedLanguages });
 // src/index.ts
 var defaultShikiOptions = {
-  themes: {
-    dark: "catppuccin-mocha",
-    light: "catppuccin-mocha"
-  },
   cssVariablePrefix: "--shiki-",
   transformers: [
     transformerMetaHighlight(),
@@ -13887,22 +13774,63 @@ var defaultShikiOptions = {
     transformerNotationErrorLevel()
   ]
 };
+var defaultThemes = {
+  dark: "catppuccin-mocha",
+  light: "catppuccin-mocha"
+};
+var highlighterInstance = null;
+var highlighterPromise = null;
+var getHighlighterInstance = async (themes, langs = "all") => {
+  if (highlighterInstance) {
+    return highlighterInstance;
+  }
+  if (highlighterPromise) {
+    return highlighterPromise;
+  }
+  const langsArray = langs === "all" ? Object.keys(bundledLanguages) : langs;
+  let themesArray;
+  if (Array.isArray(themes)) {
+    themesArray = themes;
+  } else if (typeof themes === "object" && "light" in themes && "dark" in themes) {
+    themesArray = [themes.light, themes.dark];
+  } else {
+    themesArray = [themes];
+  }
+  const highlighterOptions = {
+    themes: themesArray,
+    langs: langsArray
+  };
+  highlighterPromise = createHighlighter(highlighterOptions);
+  highlighterInstance = await highlighterPromise;
+  return highlighterInstance;
+};
 var mdsvexShiki = async (config) => {
+  const themes = config.shikiOptions?.themes || defaultThemes;
+  const langs = config.shikiOptions?.langs || "all";
   const shikiOptions = {
     ...defaultShikiOptions,
     ...config.shikiOptions
   };
+  delete shikiOptions.themes;
+  delete shikiOptions.langs;
+  await getHighlighterInstance(themes, langs);
   return async (code, lang245) => {
     lang245 = lang245 ?? "text";
-    shikiOptions.lang = lang245;
-    shikiOptions.transformers = [
-      ...defaultShikiOptions.transformers,
-      ...shikiOptions.transformers
+    const highlighter = await getHighlighterInstance(themes, langs);
+    const transformers = [
+      ...defaultShikiOptions.transformers || [],
+      ...shikiOptions.transformers || []
     ];
-    if (shikiOptions.transformers.find((t) => t.name === "transformerMdsvexWrapItUp") === undefined) {
-      shikiOptions.transformers.push(mdsvexWrapItUpTransformer(lang245, code, config.disableCopyButton));
-    }
-    return escapeHTML(await codeToHtml2(code, shikiOptions));
+    if (!transformers.find((t) => t.name === "transformerMdsvexWrapItUp")) {
+      transformers.push(mdsvexWrapItUpTransformer(lang245, code, config.disableCopyButton));
+    }
+    const html5 = highlighter.codeToHtml(code, {
+      ...shikiOptions,
+      lang: lang245,
+      transformers,
+      themes: typeof themes === "object" && !Array.isArray(themes) ? themes : undefined
+    });
+    return escapeHTML(html5);
   };
 };
 var src_default = mdsvexShiki;

package/index.d.ts

@@ -19,7 +19,13 @@ export type HighlighterOptions = {
 	displayTitle?: boolean;
 	displayLanguage?: boolean;
 	disableCopyButton?: boolean;
-	shikiOptions?: Partial<CodeToHastOptions<BundledLanguage, BundledTheme>>;
+	shikiOptions?: Partial<CodeToHastOptions<BundledLanguage, BundledTheme>> & {
+		themes?: BundledTheme[] | {
+			light: BundledTheme;
+			dark: BundledTheme;
+		} | BundledTheme;
+		langs?: BundledLanguage[] | "all";
+	};
 };
 export declare const defaultShikiOptions: Partial<CodeToHastOptions<BundledLanguage, BundledTheme>>;
 export declare const mdsvexShiki: (config: HighlighterOptions) => Promise<(code: string, lang: string) => Promise<string>>;

package/index.js

@@ -4810,20 +4810,20 @@ var mdsvexWrapItUpTransformer = (lang, codeText, disableCopyButton) => {
               tabindex: "0"
             },
             children: [
-              ...children.map((child) => {
+              ...children.flatMap((child) => {
                 if (child.type === "element" && child.tagName === "pre") {
-                  return {
-                    ...child,
-                    children: [
-                      {
-                        type: "element",
-                        tagName: "div",
-                        properties: { class: "header" },
-                        children: headerChildren
-                      },
-                      ...child.children
-                    ]
-                  };
+                  return [
+                    {
+                      type: "element",
+                      tagName: "div",
+                      properties: { class: "header" },
+                      children: headerChildren
+                    },
+                    {
+                      ...child,
+                      children: child.children
+                    }
+                  ];
                 }
                 return child;
               })
@@ -4851,7 +4851,7 @@ var mdsvexWrapItUpTransformer = (lang, codeText, disableCopyButton) => {
   };
 };
 
-// node_modules/shiki/node_modules/@shikijs/types/dist/index.mjs
+// node_modules/@shikijs/types/dist/index.mjs
 class ShikiError extends Error {
   constructor(message) {
     super(message);
@@ -9602,7 +9602,7 @@ function all(parent) {
   }
   return results.join("");
 }
-// node_modules/shiki/node_modules/@shikijs/core/dist/index.mjs
+// node_modules/@shikijs/core/dist/index.mjs
 function resolveColorReplacements(theme, options) {
   const replacements = typeof theme === "string" ? {} : { ...theme.colorReplacements };
   const themeName = typeof theme === "string" ? theme : theme.name;
@@ -9700,34 +9700,6 @@ function createPositionConverter(code) {
     posToIndex
   };
 }
-function guessEmbeddedLanguages(code, _lang, highlighter) {
-  const langs = /* @__PURE__ */ new Set;
-  for (const match of code.matchAll(/:?lang=["']([^"']+)["']/g)) {
-    const lang = match[1].toLowerCase().trim();
-    if (lang)
-      langs.add(lang);
-  }
-  for (const match of code.matchAll(/(?:```|~~~)([\w-]+)/g)) {
-    const lang = match[1].toLowerCase().trim();
-    if (lang)
-      langs.add(lang);
-  }
-  for (const match of code.matchAll(/\\begin\{([\w-]+)\}/g)) {
-    const lang = match[1].toLowerCase().trim();
-    if (lang)
-      langs.add(lang);
-  }
-  for (const match of code.matchAll(/<script\s+(?:type|lang)=["']([^"']+)["']/gi)) {
-    const fullType = match[1].toLowerCase().trim();
-    const lang = fullType.includes("/") ? fullType.split("/").pop() : fullType;
-    if (lang)
-      langs.add(lang);
-  }
-  if (!highlighter)
-    return Array.from(langs);
-  const bundle = highlighter.getBundledLanguages();
-  return Array.from(langs).filter((l) => l && bundle[l]);
-}
 var DEFAULT_COLOR_LIGHT_DARK = "light-dark()";
 var COLOR_KEYS = ["color", "background-color"];
 function splitToken(token, offsets) {
@@ -11585,78 +11557,6 @@ function createBundledHighlighter(options) {
   }
   return createHighlighter;
 }
-function makeSingletonHighlighter(createHighlighter) {
-  let _shiki;
-  async function getSingletonHighlighter(options = {}) {
-    if (!_shiki) {
-      _shiki = createHighlighter({
-        ...options,
-        themes: [],
-        langs: []
-      });
-      const s = await _shiki;
-      await Promise.all([
-        s.loadTheme(...options.themes || []),
-        s.loadLanguage(...options.langs || [])
-      ]);
-      return s;
-    } else {
-      const s = await _shiki;
-      await Promise.all([
-        s.loadTheme(...options.themes || []),
-        s.loadLanguage(...options.langs || [])
-      ]);
-      return s;
-    }
-  }
-  return getSingletonHighlighter;
-}
-function createSingletonShorthands(createHighlighter, config) {
-  const getSingletonHighlighter = makeSingletonHighlighter(createHighlighter);
-  async function get(code, options) {
-    const shiki = await getSingletonHighlighter({
-      langs: [options.lang],
-      themes: "theme" in options ? [options.theme] : Object.values(options.themes)
-    });
-    const langs = await config?.guessEmbeddedLanguages?.(code, options.lang, shiki);
-    if (langs) {
-      await shiki.loadLanguage(...langs);
-    }
-    return shiki;
-  }
-  return {
-    getSingletonHighlighter(options) {
-      return getSingletonHighlighter(options);
-    },
-    async codeToHtml(code, options) {
-      const shiki = await get(code, options);
-      return shiki.codeToHtml(code, options);
-    },
-    async codeToHast(code, options) {
-      const shiki = await get(code, options);
-      return shiki.codeToHast(code, options);
-    },
-    async codeToTokens(code, options) {
-      const shiki = await get(code, options);
-      return shiki.codeToTokens(code, options);
-    },
-    async codeToTokensBase(code, options) {
-      const shiki = await get(code, options);
-      return shiki.codeToTokensBase(code, options);
-    },
-    async codeToTokensWithThemes(code, options) {
-      const shiki = await get(code, options);
-      return shiki.codeToTokensWithThemes(code, options);
-    },
-    async getLastGrammarState(code, options) {
-      const shiki = await getSingletonHighlighter({
-        langs: [options.lang],
-        themes: [options.theme]
-      });
-      return shiki.getLastGrammarState(code, options);
-    }
-  };
-}
 // node_modules/shiki/dist/langs.mjs
 var bundledLanguagesInfo = [
   {
@@ -13835,21 +13735,8 @@ var createHighlighter = /* @__PURE__ */ createBundledHighlighter({
   themes: bundledThemes,
   engine: () => createOnigurumaEngine(Promise.resolve().then(() => (init_wasm2(), exports_wasm2)))
 });
-var {
-  codeToHtml: codeToHtml2,
-  codeToHast: codeToHast2,
-  codeToTokens: codeToTokens2,
-  codeToTokensBase: codeToTokensBase2,
-  codeToTokensWithThemes: codeToTokensWithThemes2,
-  getSingletonHighlighter,
-  getLastGrammarState: getLastGrammarState2
-} = /* @__PURE__ */ createSingletonShorthands(createHighlighter, { guessEmbeddedLanguages });
 // src/index.ts
 var defaultShikiOptions = {
-  themes: {
-    dark: "catppuccin-mocha",
-    light: "catppuccin-mocha"
-  },
   cssVariablePrefix: "--shiki-",
   transformers: [
     transformerMetaHighlight(),
@@ -13860,22 +13747,63 @@ var defaultShikiOptions = {
     transformerNotationErrorLevel()
   ]
 };
+var defaultThemes = {
+  dark: "catppuccin-mocha",
+  light: "catppuccin-mocha"
+};
+var highlighterInstance = null;
+var highlighterPromise = null;
+var getHighlighterInstance = async (themes, langs = "all") => {
+  if (highlighterInstance) {
+    return highlighterInstance;
+  }
+  if (highlighterPromise) {
+    return highlighterPromise;
+  }
+  const langsArray = langs === "all" ? Object.keys(bundledLanguages) : langs;
+  let themesArray;
+  if (Array.isArray(themes)) {
+    themesArray = themes;
+  } else if (typeof themes === "object" && "light" in themes && "dark" in themes) {
+    themesArray = [themes.light, themes.dark];
+  } else {
+    themesArray = [themes];
+  }
+  const highlighterOptions = {
+    themes: themesArray,
+    langs: langsArray
+  };
+  highlighterPromise = createHighlighter(highlighterOptions);
+  highlighterInstance = await highlighterPromise;
+  return highlighterInstance;
+};
 var mdsvexShiki = async (config) => {
+  const themes = config.shikiOptions?.themes || defaultThemes;
+  const langs = config.shikiOptions?.langs || "all";
   const shikiOptions = {
     ...defaultShikiOptions,
     ...config.shikiOptions
   };
+  delete shikiOptions.themes;
+  delete shikiOptions.langs;
+  await getHighlighterInstance(themes, langs);
   return async (code, lang245) => {
     lang245 = lang245 ?? "text";
-    shikiOptions.lang = lang245;
-    shikiOptions.transformers = [
-      ...defaultShikiOptions.transformers,
-      ...shikiOptions.transformers
+    const highlighter = await getHighlighterInstance(themes, langs);
+    const transformers = [
+      ...defaultShikiOptions.transformers || [],
+      ...shikiOptions.transformers || []
     ];
-    if (shikiOptions.transformers.find((t) => t.name === "transformerMdsvexWrapItUp") === undefined) {
-      shikiOptions.transformers.push(mdsvexWrapItUpTransformer(lang245, code, config.disableCopyButton));
-    }
-    return escapeHTML(await codeToHtml2(code, shikiOptions));
+    if (!transformers.find((t) => t.name === "transformerMdsvexWrapItUp")) {
+      transformers.push(mdsvexWrapItUpTransformer(lang245, code, config.disableCopyButton));
+    }
+    const html5 = highlighter.codeToHtml(code, {
+      ...shikiOptions,
+      lang: lang245,
+      transformers,
+      themes: typeof themes === "object" && !Array.isArray(themes) ? themes : undefined
+    });
+    return escapeHTML(html5);
   };
 };
 var src_default = mdsvexShiki;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mistweaverco/mdsvex-shiki",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",

package/styles.css

@@ -25,7 +25,7 @@
 }
 
 .mdsvex-shiki {
-  padding: 5px 15px;
+  padding: 12px 20px;
   background-color: var(--shiki-dark-bg);
   position: relative;
   border: 1px solid var(--shiki-dark-border);
@@ -56,6 +56,8 @@
 }
 
 .mdsvex-shiki .header .language {
+  right: 12px;
+  top: 8px;
   color: var(--shiki-dark);
   font-size: 0.875em;
   opacity: 0.7;
@@ -79,7 +81,8 @@
   color: var(--shiki-dark);
   background-color: transparent;
   border: none;
-  padding: 0.25em 0.5em;
+  right: 6px;
+  top: 8px;
   cursor: pointer;
   opacity: 0;
   display: flex;