react-shiki 0.9.1 → 0.9.3

package/dist/core.js

@@ -3,7 +3,7 @@ import {
   isInlineCode,
   rehypeInlineCodeProperty,
   useShikiHighlighter
-} from "./chunk-EXJNTVNR.js";
+} from "./chunk-S5E5K22S.js";
 
 // src/bundles/core.ts
 function validateCoreHighlighter(highlighter) {

package/dist/core.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/bundles/core.ts","../src/core.ts"],"sourcesContent":["import type { HighlighterCore } from 'shiki';\n\n/**\n * Validates that a highlighter is provided for the core bundle.\n * The core bundle requires users to provide their own highlighter instance.\n */\nexport function validateCoreHighlighter(\n  highlighter: HighlighterCore | undefined\n): HighlighterCore {\n  if (!highlighter) {\n    throw new Error(\n      'react-shiki/core requires a custom highlighter. ' +\n        'Use createHighlighterCore() from react-shiki or switch to react-shiki for plug-and-play usage.'\n    );\n  }\n  return highlighter;\n}\n","import { useShikiHighlighter as useBaseHook } from './lib/hook';\nimport { validateCoreHighlighter } from './bundles/core';\nimport type { UseShikiHighlighter } from './lib/types';\n\nexport { isInlineCode, rehypeInlineCodeProperty } from './lib/plugins';\n\nimport {\n  createShikiHighlighterComponent,\n  type ShikiHighlighterProps,\n} from './lib/component';\n\nexport type { ShikiHighlighterProps };\n\nexport type {\n  UseShikiHighlighter,\n  Language,\n  Theme,\n  Themes,\n  Element,\n  HighlighterOptions,\n} from './lib/types';\n\nexport { createHighlighterCore } from 'shiki/core';\nexport { createOnigurumaEngine } from 'shiki/engine/oniguruma';\nexport {\n  createJavaScriptRegexEngine,\n  createJavaScriptRawEngine,\n} from 'shiki/engine/javascript';\n\n/**\n * Highlight code with shiki (core bundle)\n *\n * @param code - Code to highlight\n * @param lang - Language (bundled or custom)\n * @param theme - Theme (bundled, multi-theme, or custom)\n * @param options - react-shiki options + shiki options\n * @returns Highlighted code as React elements or HTML string\n *\n * @example\n * ```tsx\n * import { createHighlighterCore, createOnigurumaEngine } from 'react-shiki/core';\n *\n *\n * const highlighter = await createHighlighterCore({\n *   themes: [import('@shikijs/themes/github-light'), import('@shikijs/themes/github-dark')],\n *   langs: [import('@shikijs/langs/typescript')],\n *   engine: createOnigurumaEngine(import('shiki/wasm'))\n * });\n *\n * const highlighted = useShikiHighlighter(\n *   'const x = 1;',\n *   'typescript',\n *   {\n *     light: 'github-light',\n *     dark: 'github-dark'\n *   },\n *   { highlighter }\n * );\n * ```\n *\n * Core bundle (minimal). For plug-and-play: `react-shiki` or `react-shiki/web`\n */\nexport const useShikiHighlighter: UseShikiHighlighter = (\n  code,\n  lang,\n  themeInput,\n  options = {}\n) => {\n  // Validate that highlighter is provided\n  const highlighter = validateCoreHighlighter(options.highlighter);\n\n  return useBaseHook(\n    code,\n    lang,\n    themeInput,\n    {\n      ...options,\n      highlighter,\n    },\n    async () => highlighter\n  );\n};\n\n/**\n * ShikiHighlighter component using a custom highlighter.\n * Requires a highlighter to be provided.\n */\nexport const ShikiHighlighter = createShikiHighlighterComponent(\n  useShikiHighlighter\n);\nexport default ShikiHighlighter;\n"],"mappings":";;;;;;;;AAMO,SAAS,wBACd,aACiB;AACjB,MAAI,CAAC,aAAa;AAChB,UAAM,IAAI;AAAA,MACR;AAAA,IAEF;AAAA,EACF;AACA,SAAO;AACT;;;ACMA,SAAS,6BAA6B;AACtC,SAAS,6BAA6B;AACtC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAmCA,IAAMA,uBAA2C,CACtD,MACA,MACA,YACA,UAAU,CAAC,MACR;AAEH,QAAM,cAAc,wBAAwB,QAAQ,WAAW;AAE/D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,GAAG;AAAA,MACH;AAAA,IACF;AAAA,IACA,YAAY;AAAA,EACd;AACF;AAMO,IAAM,mBAAmB;AAAA,EAC9BA;AACF;AACA,IAAO,eAAQ;","names":["useShikiHighlighter"]}
+{"version":3,"sources":["../src/bundles/core.ts","../src/core.ts"],"sourcesContent":["import type { HighlighterCore } from 'shiki';\n\n/**\n * Validates that a highlighter is provided for the core bundle.\n * The core bundle requires users to provide their own highlighter instance.\n */\nexport function validateCoreHighlighter(\n  highlighter: HighlighterCore | undefined\n): HighlighterCore {\n  if (!highlighter) {\n    throw new Error(\n      'react-shiki/core requires a custom highlighter. ' +\n        'Use createHighlighterCore() from react-shiki or switch to react-shiki for plug-and-play usage.'\n    );\n  }\n  return highlighter;\n}\n","import { useShikiHighlighter as useBaseHook } from './lib/hook';\nimport { validateCoreHighlighter } from './bundles/core';\nimport type { UseShikiHighlighter } from './lib/types';\n\nexport { isInlineCode, rehypeInlineCodeProperty } from './lib/plugins';\n\nimport {\n  createShikiHighlighterComponent,\n  type ShikiHighlighterProps,\n} from './lib/component';\n\nexport type { ShikiHighlighterProps };\n\nexport type {\n  UseShikiHighlighter,\n  Language,\n  Theme,\n  Themes,\n  Element,\n  HighlighterOptions,\n} from './lib/types';\n\nexport { createHighlighterCore } from 'shiki/core';\nexport { createOnigurumaEngine } from 'shiki/engine/oniguruma';\nexport {\n  createJavaScriptRegexEngine,\n  createJavaScriptRawEngine,\n} from 'shiki/engine/javascript';\n\nexport type { LanguageRegistration } from 'shiki/core';\n\n/**\n * Highlight code with shiki (core bundle)\n *\n * @param code - Code to highlight\n * @param lang - Language (bundled or custom)\n * @param theme - Theme (bundled, multi-theme, or custom)\n * @param options - react-shiki options + shiki options\n * @returns Highlighted code as React elements or HTML string\n *\n * @example\n * ```tsx\n * import { createHighlighterCore, createOnigurumaEngine } from 'react-shiki/core';\n *\n *\n * const highlighter = await createHighlighterCore({\n *   themes: [import('@shikijs/themes/github-light'), import('@shikijs/themes/github-dark')],\n *   langs: [import('@shikijs/langs/typescript')],\n *   engine: createOnigurumaEngine(import('shiki/wasm'))\n * });\n *\n * const highlighted = useShikiHighlighter(\n *   'const x = 1;',\n *   'typescript',\n *   {\n *     light: 'github-light',\n *     dark: 'github-dark'\n *   },\n *   { highlighter }\n * );\n * ```\n *\n * Core bundle (minimal). For plug-and-play: `react-shiki` or `react-shiki/web`\n */\nexport const useShikiHighlighter: UseShikiHighlighter = (\n  code,\n  lang,\n  themeInput,\n  options = {}\n) => {\n  // Validate that highlighter is provided\n  const highlighter = validateCoreHighlighter(options.highlighter);\n\n  return useBaseHook(\n    code,\n    lang,\n    themeInput,\n    {\n      ...options,\n      highlighter,\n    },\n    async () => highlighter\n  );\n};\n\n/**\n * ShikiHighlighter component using a custom highlighter.\n * Requires a highlighter to be provided.\n */\nexport const ShikiHighlighter = createShikiHighlighterComponent(\n  useShikiHighlighter\n);\nexport default ShikiHighlighter;\n"],"mappings":";;;;;;;;AAMO,SAAS,wBACd,aACiB;AACjB,MAAI,CAAC,aAAa;AAChB,UAAM,IAAI;AAAA,MACR;AAAA,IAEF;AAAA,EACF;AACA,SAAO;AACT;;;ACMA,SAAS,6BAA6B;AACtC,SAAS,6BAA6B;AACtC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAqCA,IAAMA,uBAA2C,CACtD,MACA,MACA,YACA,UAAU,CAAC,MACR;AAEH,QAAM,cAAc,wBAAwB,QAAQ,WAAW;AAE/D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,GAAG;AAAA,MACH;AAAA,IACF;AAAA,IACA,YAAY;AAAA,EACd;AACF;AAMO,IAAM,mBAAmB;AAAA,EAC9BA;AACF;AACA,IAAO,eAAQ;","names":["useShikiHighlighter"]}

package/dist/index.d.ts

@@ -1,9 +1,8 @@
 import * as react from 'react';
-import { S as ShikiHighlighterProps, U as UseShikiHighlighter } from './component-mMdHg8JD.js';
-export { E as Element, H as HighlighterOptions, L as Language, T as Theme, a as Themes, i as isInlineCode, r as rehypeInlineCodeProperty } from './component-mMdHg8JD.js';
+import { S as ShikiHighlighterProps, U as UseShikiHighlighter } from './component-CoSKNtmy.js';
+export { E as Element, H as HighlighterOptions, L as Language, T as Theme, a as Themes, i as isInlineCode, r as rehypeInlineCodeProperty } from './component-CoSKNtmy.js';
 export { createJavaScriptRawEngine, createJavaScriptRegexEngine } from 'shiki/engine/javascript';
-import 'shiki';
-import 'shiki/core';
+export { LanguageRegistration } from 'shiki';
 import 'hast';
 
 /**

package/dist/index.js

@@ -1,32 +1,26 @@
 import {
   createShikiHighlighterComponent,
   isInlineCode,
+  isLoadableLanguage,
   rehypeInlineCodeProperty,
   useShikiHighlighter
-} from "./chunk-EXJNTVNR.js";
+} from "./chunk-S5E5K22S.js";
 
 // src/bundles/full.ts
 import {
-  getSingletonHighlighter
+  getSingletonHighlighter,
+  bundledLanguages
 } from "shiki";
 import { createOnigurumaEngine } from "shiki/engine/oniguruma";
 async function createFullHighlighter(langsToLoad, themesToLoad, engine) {
-  try {
-    return await getSingletonHighlighter({
-      langs: [langsToLoad],
-      themes: themesToLoad,
-      engine: engine ?? createOnigurumaEngine(import("shiki/wasm"))
-    });
-  } catch (error) {
-    if (error instanceof Error && error.message.includes("Language")) {
-      return await getSingletonHighlighter({
-        langs: ["plaintext"],
-        themes: themesToLoad,
-        engine: engine ?? createOnigurumaEngine(import("shiki/wasm"))
-      });
-    }
-    throw error;
-  }
+  const langs = langsToLoad.filter(
+    (lang) => isLoadableLanguage(lang, bundledLanguages)
+  );
+  return await getSingletonHighlighter({
+    langs,
+    themes: themesToLoad,
+    engine: engine ?? createOnigurumaEngine(import("shiki/wasm"))
+  });
 }
 
 // src/index.ts

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/bundles/full.ts","../src/index.ts"],"sourcesContent":["import {\n  getSingletonHighlighter,\n  type Highlighter,\n  type Awaitable,\n  type RegexEngine,\n} from 'shiki';\nimport { createOnigurumaEngine } from 'shiki/engine/oniguruma';\nimport type { ShikiLanguageRegistration } from '../lib/extended-types';\nimport type { Theme } from '../lib/types';\n\n/**\n * Creates a highlighter using the full Shiki bundle with all languages and themes.\n * This is the largest bundle but provides maximum compatibility.\n */\nexport async function createFullHighlighter(\n  langsToLoad: ShikiLanguageRegistration,\n  themesToLoad: Theme[],\n  engine?: Awaitable<RegexEngine>\n): Promise<Highlighter> {\n  try {\n    return await getSingletonHighlighter({\n      langs: [langsToLoad],\n      themes: themesToLoad,\n      engine: engine ?? createOnigurumaEngine(import('shiki/wasm')),\n    });\n  } catch (error) {\n    if (error instanceof Error && error.message.includes('Language')) {\n      return await getSingletonHighlighter({\n        langs: ['plaintext'],\n        themes: themesToLoad,\n        engine: engine ?? createOnigurumaEngine(import('shiki/wasm')),\n      });\n    }\n    throw error;\n  }\n}\n","import { useShikiHighlighter as useBaseHook } from './lib/hook';\nimport { createFullHighlighter } from './bundles/full';\nimport type { UseShikiHighlighter } from './lib/types';\n\nexport { isInlineCode, rehypeInlineCodeProperty } from './lib/plugins';\n\nimport {\n  createShikiHighlighterComponent,\n  type ShikiHighlighterProps,\n} from './lib/component';\n\nexport type { ShikiHighlighterProps };\n\nexport type {\n  UseShikiHighlighter,\n  Language,\n  Theme,\n  Themes,\n  Element,\n  HighlighterOptions,\n} from './lib/types';\n\nexport {\n  createJavaScriptRegexEngine,\n  createJavaScriptRawEngine,\n} from 'shiki/engine/javascript';\n\n/**\n * Highlight code with shiki (full bundle)\n *\n * @param code - Code to highlight\n * @param lang - Language (bundled or custom)\n * @param theme - Theme (bundled, multi-theme, or custom)\n * @param options - react-shiki options + shiki options\n * @returns Highlighted code as React elements or HTML string\n *\n * @example\n * ```tsx\n * const highlighted = useShikiHighlighter(\n *   'const x = 1;',\n *   'typescript',\n *   {\n *     light: 'github-light',\n *     dark: 'github-dark'\n *   }\n * );\n * ```\n *\n * Full bundle (~6.4MB minified, 1.2MB gzipped). For smaller bundles: `react-shiki/web` or `react-shiki/core`\n */\nexport const useShikiHighlighter: UseShikiHighlighter = (\n  code,\n  lang,\n  themeInput,\n  options = {}\n) => {\n  return useBaseHook(\n    code,\n    lang,\n    themeInput,\n    options,\n    createFullHighlighter\n  );\n};\n\n/**\n * ShikiHighlighter component using the full bundle.\n * Includes all languages and themes for maximum compatibility.\n */\nexport const ShikiHighlighter = createShikiHighlighterComponent(\n  useShikiHighlighter\n);\nexport default ShikiHighlighter;\n"],"mappings":";;;;;;;;AAAA;AAAA,EACE;AAAA,OAIK;AACP,SAAS,6BAA6B;AAQtC,eAAsB,sBACpB,aACA,cACA,QACsB;AACtB,MAAI;AACF,WAAO,MAAM,wBAAwB;AAAA,MACnC,OAAO,CAAC,WAAW;AAAA,MACnB,QAAQ;AAAA,MACR,QAAQ,UAAU,sBAAsB,OAAO,YAAY,CAAC;AAAA,IAC9D,CAAC;AAAA,EACH,SAAS,OAAO;AACd,QAAI,iBAAiB,SAAS,MAAM,QAAQ,SAAS,UAAU,GAAG;AAChE,aAAO,MAAM,wBAAwB;AAAA,QACnC,OAAO,CAAC,WAAW;AAAA,QACnB,QAAQ;AAAA,QACR,QAAQ,UAAU,sBAAsB,OAAO,YAAY,CAAC;AAAA,MAC9D,CAAC;AAAA,IACH;AACA,UAAM;AAAA,EACR;AACF;;;ACbA;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAyBA,IAAMA,uBAA2C,CACtD,MACA,MACA,YACA,UAAU,CAAC,MACR;AACH,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAMO,IAAM,mBAAmB;AAAA,EAC9BA;AACF;AACA,IAAO,cAAQ;","names":["useShikiHighlighter"]}
+{"version":3,"sources":["../src/bundles/full.ts","../src/index.ts"],"sourcesContent":["import {\n  getSingletonHighlighter,\n  bundledLanguages,\n  type Highlighter,\n  type Awaitable,\n  type RegexEngine,\n} from 'shiki';\nimport { createOnigurumaEngine } from 'shiki/engine/oniguruma';\nimport type { Language, Theme } from '../lib/types';\nimport { isLoadableLanguage } from '../lib/language';\n\n/**\n * Creates a highlighter using the full Shiki bundle with all languages and themes.\n * This is the largest bundle but provides maximum compatibility.\n */\nexport async function createFullHighlighter(\n  langsToLoad: Language[],\n  themesToLoad: Theme[],\n  engine?: Awaitable<RegexEngine>\n): Promise<Highlighter> {\n  const langs = langsToLoad.filter((lang) =>\n    isLoadableLanguage(lang, bundledLanguages)\n  );\n\n  return await getSingletonHighlighter({\n    langs,\n    themes: themesToLoad,\n    engine: engine ?? createOnigurumaEngine(import('shiki/wasm')),\n  });\n}\n","import { useShikiHighlighter as useBaseHook } from './lib/hook';\nimport { createFullHighlighter } from './bundles/full';\nimport type { UseShikiHighlighter } from './lib/types';\n\nexport { isInlineCode, rehypeInlineCodeProperty } from './lib/plugins';\n\nimport {\n  createShikiHighlighterComponent,\n  type ShikiHighlighterProps,\n} from './lib/component';\n\nexport type { ShikiHighlighterProps };\n\nexport type {\n  UseShikiHighlighter,\n  Language,\n  Theme,\n  Themes,\n  Element,\n  HighlighterOptions,\n} from './lib/types';\n\nexport {\n  createJavaScriptRegexEngine,\n  createJavaScriptRawEngine,\n} from 'shiki/engine/javascript';\n\nexport type { LanguageRegistration } from 'shiki';\n\n/**\n * Highlight code with shiki (full bundle)\n *\n * @param code - Code to highlight\n * @param lang - Language (bundled or custom)\n * @param theme - Theme (bundled, multi-theme, or custom)\n * @param options - react-shiki options + shiki options\n * @returns Highlighted code as React elements or HTML string\n *\n * @example\n * ```tsx\n * const highlighted = useShikiHighlighter(\n *   'const x = 1;',\n *   'typescript',\n *   {\n *     light: 'github-light',\n *     dark: 'github-dark'\n *   }\n * );\n * ```\n *\n * Full bundle (~6.4MB minified, 1.2MB gzipped). For smaller bundles: `react-shiki/web` or `react-shiki/core`\n */\nexport const useShikiHighlighter: UseShikiHighlighter = (\n  code,\n  lang,\n  themeInput,\n  options = {}\n) => {\n  return useBaseHook(\n    code,\n    lang,\n    themeInput,\n    options,\n    createFullHighlighter\n  );\n};\n\n/**\n * ShikiHighlighter component using the full bundle.\n * Includes all languages and themes for maximum compatibility.\n */\nexport const ShikiHighlighter = createShikiHighlighterComponent(\n  useShikiHighlighter\n);\nexport default ShikiHighlighter;\n"],"mappings":";;;;;;;;;AAAA;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AACP,SAAS,6BAA6B;AAQtC,eAAsB,sBACpB,aACA,cACA,QACsB;AACtB,QAAM,QAAQ,YAAY;AAAA,IAAO,CAAC,SAChC,mBAAmB,MAAM,gBAAgB;AAAA,EAC3C;AAEA,SAAO,MAAM,wBAAwB;AAAA,IACnC;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ,UAAU,sBAAsB,OAAO,YAAY,CAAC;AAAA,EAC9D,CAAC;AACH;;;ACPA;AAAA,EACE;AAAA,EACA;AAAA,OACK;AA2BA,IAAMA,uBAA2C,CACtD,MACA,MACA,YACA,UAAU,CAAC,MACR;AACH,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAMO,IAAM,mBAAmB;AAAA,EAC9BA;AACF;AACA,IAAO,cAAQ;","names":["useShikiHighlighter"]}

package/dist/web.d.ts

@@ -1,9 +1,9 @@
 import * as react from 'react';
-import { S as ShikiHighlighterProps, U as UseShikiHighlighter } from './component-mMdHg8JD.js';
-export { E as Element, H as HighlighterOptions, L as Language, T as Theme, a as Themes, i as isInlineCode, r as rehypeInlineCodeProperty } from './component-mMdHg8JD.js';
+import { S as ShikiHighlighterProps, U as UseShikiHighlighter } from './component-CoSKNtmy.js';
+export { E as Element, H as HighlighterOptions, L as Language, T as Theme, a as Themes, i as isInlineCode, r as rehypeInlineCodeProperty } from './component-CoSKNtmy.js';
 export { createJavaScriptRawEngine, createJavaScriptRegexEngine } from 'shiki/engine/javascript';
+export { LanguageRegistration } from 'shiki/bundle/web';
 import 'shiki';
-import 'shiki/core';
 import 'hast';
 
 /**

package/dist/web.js

@@ -1,32 +1,26 @@
 import {
   createShikiHighlighterComponent,
   isInlineCode,
+  isLoadableLanguage,
   rehypeInlineCodeProperty,
   useShikiHighlighter
-} from "./chunk-EXJNTVNR.js";
+} from "./chunk-S5E5K22S.js";
 
 // src/bundles/web.ts
 import {
-  getSingletonHighlighter
+  getSingletonHighlighter,
+  bundledLanguages
 } from "shiki/bundle/web";
 import { createOnigurumaEngine } from "shiki/engine/oniguruma";
 async function createWebHighlighter(langsToLoad, themesToLoad, engine) {
-  try {
-    return await getSingletonHighlighter({
-      langs: [langsToLoad],
-      themes: themesToLoad,
-      engine: engine ?? createOnigurumaEngine(import("shiki/wasm"))
-    });
-  } catch (error) {
-    if (error instanceof Error && error.message.includes("Language")) {
-      return await getSingletonHighlighter({
-        langs: ["plaintext"],
-        themes: themesToLoad,
-        engine: engine ?? createOnigurumaEngine(import("shiki/wasm"))
-      });
-    }
-    throw error;
-  }
+  const langs = langsToLoad.filter(
+    (lang) => isLoadableLanguage(lang, bundledLanguages)
+  );
+  return await getSingletonHighlighter({
+    langs,
+    themes: themesToLoad,
+    engine: engine ?? createOnigurumaEngine(import("shiki/wasm"))
+  });
 }
 
 // src/web.ts

package/dist/web.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/bundles/web.ts","../src/web.ts"],"sourcesContent":["import {\n  getSingletonHighlighter,\n  type Highlighter,\n  type Awaitable,\n  type RegexEngine,\n} from 'shiki/bundle/web';\nimport { createOnigurumaEngine } from 'shiki/engine/oniguruma';\nimport type { ShikiLanguageRegistration } from '../lib/extended-types';\nimport type { Theme } from '../lib/types';\n\n/**\n * Creates a highlighter using the web Shiki bundle with web-focused languages.\n * Smaller than the full bundle while covering most web development needs.\n * Includes: HTML, CSS, JS, TS, JSON, Markdown, Vue, JSX, Svelte, etc.\n */\nexport async function createWebHighlighter(\n  langsToLoad: ShikiLanguageRegistration,\n  themesToLoad: Theme[],\n  engine?: Awaitable<RegexEngine>\n): Promise<Highlighter> {\n  try {\n    return await getSingletonHighlighter({\n      langs: [langsToLoad],\n      themes: themesToLoad,\n      engine: engine ?? createOnigurumaEngine(import('shiki/wasm')),\n    });\n  } catch (error) {\n    if (error instanceof Error && error.message.includes('Language')) {\n      return await getSingletonHighlighter({\n        langs: ['plaintext'],\n        themes: themesToLoad,\n        engine: engine ?? createOnigurumaEngine(import('shiki/wasm')),\n      });\n    }\n    throw error;\n  }\n}\n","import { useShikiHighlighter as useBaseHook } from './lib/hook';\nimport { createWebHighlighter } from './bundles/web';\nimport type { UseShikiHighlighter } from './lib/types';\n\nexport { isInlineCode, rehypeInlineCodeProperty } from './lib/plugins';\n\nimport {\n  createShikiHighlighterComponent,\n  type ShikiHighlighterProps,\n} from './lib/component';\n\nexport type { ShikiHighlighterProps };\n\nexport type {\n  UseShikiHighlighter,\n  Language,\n  Theme,\n  Themes,\n  Element,\n  HighlighterOptions,\n} from './lib/types';\n\nexport {\n  createJavaScriptRegexEngine,\n  createJavaScriptRawEngine,\n} from 'shiki/engine/javascript';\n\n/**\n * Highlight code with shiki (web bundle)\n *\n * @param code - Code to highlight\n * @param lang - Language (bundled or custom)\n * @param theme - Theme (bundled, multi-theme, or custom)\n * @param options - react-shiki options + shiki options\n * @returns Highlighted code as React elements or HTML string\n *\n * @example\n * ```tsx\n * const highlighted = useShikiHighlighter(\n *   'const x = 1;',\n *   'typescript',\n *   {\n *     light: 'github-light',\n *     dark: 'github-dark'\n *   }\n * );\n * ```\n *\n * Web bundle (~3.8MB minified, 695KB gzipped). For other bundles: `react-shiki` or `react-shiki/core`\n */\nexport const useShikiHighlighter: UseShikiHighlighter = (\n  code,\n  lang,\n  themeInput,\n  options = {}\n) => {\n  return useBaseHook(\n    code,\n    lang,\n    themeInput,\n    options,\n    createWebHighlighter\n  );\n};\n\n/**\n * ShikiHighlighter component using the web bundle.\n * Includes web-focused languages for balanced size and functionality.\n */\nexport const ShikiHighlighter = createShikiHighlighterComponent(\n  useShikiHighlighter\n);\nexport default ShikiHighlighter;\n"],"mappings":";;;;;;;;AAAA;AAAA,EACE;AAAA,OAIK;AACP,SAAS,6BAA6B;AAStC,eAAsB,qBACpB,aACA,cACA,QACsB;AACtB,MAAI;AACF,WAAO,MAAM,wBAAwB;AAAA,MACnC,OAAO,CAAC,WAAW;AAAA,MACnB,QAAQ;AAAA,MACR,QAAQ,UAAU,sBAAsB,OAAO,YAAY,CAAC;AAAA,IAC9D,CAAC;AAAA,EACH,SAAS,OAAO;AACd,QAAI,iBAAiB,SAAS,MAAM,QAAQ,SAAS,UAAU,GAAG;AAChE,aAAO,MAAM,wBAAwB;AAAA,QACnC,OAAO,CAAC,WAAW;AAAA,QACnB,QAAQ;AAAA,QACR,QAAQ,UAAU,sBAAsB,OAAO,YAAY,CAAC;AAAA,MAC9D,CAAC;AAAA,IACH;AACA,UAAM;AAAA,EACR;AACF;;;ACdA;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAyBA,IAAMA,uBAA2C,CACtD,MACA,MACA,YACA,UAAU,CAAC,MACR;AACH,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAMO,IAAM,mBAAmB;AAAA,EAC9BA;AACF;AACA,IAAO,cAAQ;","names":["useShikiHighlighter"]}
+{"version":3,"sources":["../src/bundles/web.ts","../src/web.ts"],"sourcesContent":["import {\n  getSingletonHighlighter,\n  bundledLanguages,\n  type Highlighter,\n  type Awaitable,\n  type RegexEngine,\n} from 'shiki/bundle/web';\nimport { createOnigurumaEngine } from 'shiki/engine/oniguruma';\nimport type { Language, Theme } from '../lib/types';\nimport { isLoadableLanguage } from '../lib/language';\n\n/**\n * Creates a highlighter using the web Shiki bundle with web-focused languages.\n * Smaller than the full bundle while covering most web development needs.\n * Includes: HTML, CSS, JS, TS, JSON, Markdown, Vue, JSX, Svelte, etc.\n */\nexport async function createWebHighlighter(\n  langsToLoad: Language[],\n  themesToLoad: Theme[],\n  engine?: Awaitable<RegexEngine>\n): Promise<Highlighter> {\n  const langs = langsToLoad.filter((lang) =>\n    isLoadableLanguage(lang, bundledLanguages)\n  );\n\n  return await getSingletonHighlighter({\n    langs,\n    themes: themesToLoad,\n    engine: engine ?? createOnigurumaEngine(import('shiki/wasm')),\n  });\n}\n","import { useShikiHighlighter as useBaseHook } from './lib/hook';\nimport { createWebHighlighter } from './bundles/web';\nimport type { UseShikiHighlighter } from './lib/types';\n\nexport { isInlineCode, rehypeInlineCodeProperty } from './lib/plugins';\n\nimport {\n  createShikiHighlighterComponent,\n  type ShikiHighlighterProps,\n} from './lib/component';\n\nexport type { ShikiHighlighterProps };\n\nexport type {\n  UseShikiHighlighter,\n  Language,\n  Theme,\n  Themes,\n  Element,\n  HighlighterOptions,\n} from './lib/types';\n\nexport {\n  createJavaScriptRegexEngine,\n  createJavaScriptRawEngine,\n} from 'shiki/engine/javascript';\n\nexport type { LanguageRegistration } from 'shiki/bundle/web';\n\n/**\n * Highlight code with shiki (web bundle)\n *\n * @param code - Code to highlight\n * @param lang - Language (bundled or custom)\n * @param theme - Theme (bundled, multi-theme, or custom)\n * @param options - react-shiki options + shiki options\n * @returns Highlighted code as React elements or HTML string\n *\n * @example\n * ```tsx\n * const highlighted = useShikiHighlighter(\n *   'const x = 1;',\n *   'typescript',\n *   {\n *     light: 'github-light',\n *     dark: 'github-dark'\n *   }\n * );\n * ```\n *\n * Web bundle (~3.8MB minified, 695KB gzipped). For other bundles: `react-shiki` or `react-shiki/core`\n */\nexport const useShikiHighlighter: UseShikiHighlighter = (\n  code,\n  lang,\n  themeInput,\n  options = {}\n) => {\n  return useBaseHook(\n    code,\n    lang,\n    themeInput,\n    options,\n    createWebHighlighter\n  );\n};\n\n/**\n * ShikiHighlighter component using the web bundle.\n * Includes web-focused languages for balanced size and functionality.\n */\nexport const ShikiHighlighter = createShikiHighlighterComponent(\n  useShikiHighlighter\n);\nexport default ShikiHighlighter;\n"],"mappings":";;;;;;;;;AAAA;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AACP,SAAS,6BAA6B;AAStC,eAAsB,qBACpB,aACA,cACA,QACsB;AACtB,QAAM,QAAQ,YAAY;AAAA,IAAO,CAAC,SAChC,mBAAmB,MAAM,gBAAgB;AAAA,EAC3C;AAEA,SAAO,MAAM,wBAAwB;AAAA,IACnC;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ,UAAU,sBAAsB,OAAO,YAAY,CAAC;AAAA,EAC9D,CAAC;AACH;;;ACRA;AAAA,EACE;AAAA,EACA;AAAA,OACK;AA2BA,IAAMA,uBAA2C,CACtD,MACA,MACA,YACA,UAAU,CAAC,MACR;AACH,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAMO,IAAM,mBAAmB;AAAA,EAC9BA;AACF;AACA,IAAO,cAAQ;","names":["useShikiHighlighter"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-shiki",
   "description": "Syntax highlighter component for react using shiki",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "license": "MIT",
   "author": {
     "name": "Bassim Shahidy",
@@ -28,10 +28,12 @@
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
-    "src/lib/styles.css"
+    "src/styles/features.css",
+    "src/styles/css.d.ts"
   ],
   "sideEffects": [
-    "src/lib/styles.css"
+    "src/styles/component.css",
+    "src/styles/features.css"
   ],
   "publishConfig": {
     "access": "public",
@@ -50,7 +52,10 @@
       "types": "./dist/core.d.ts",
       "default": "./dist/core.js"
     },
-    "./css": "./src/lib/styles.css"
+    "./css": {
+      "types": "./src/styles/css.d.ts",
+      "default": "./src/styles/features.css"
+    }
   },
   "peerDependencies": {
     "@types/react": ">=16.8.0",
@@ -70,21 +75,21 @@
     "clsx": "^2.1.1",
     "dequal": "^2.0.3",
     "hast-util-to-jsx-runtime": "^2.3.6",
-    "shiki": "^3.11.0",
-    "unist-util-visit": "^5.0.0"
+    "shiki": "^4.0.0",
+    "unist-util-visit": "^5.1.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.8.0",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/hast": "^3.0.4",
-    "@types/jest": "^29.5.14",
-    "@types/node": "22.17.2",
+    "@types/jest": "^30.0.0",
+    "@types/node": "25.3.3",
     "@types/react": "^19.1.10",
-    "@vitejs/plugin-react": "^4.7.0",
-    "html-react-parser": "^5.2.6",
-    "jsdom": "^26.1.0",
-    "tsup": "^8.5.0",
-    "vitest": "^3.2.4"
+    "@vitejs/plugin-react": "^5.1.4",
+    "html-react-parser": "^5.2.17",
+    "jsdom": "^28.1.0",
+    "tsup": "^8.5.1",
+    "vitest": "^4.0.18"
   },
   "scripts": {
     "dev": "tsup --watch",

package/src/styles/css.d.ts

@@ -0,0 +1 @@
+export {};

package/src/styles/features.css

@@ -0,0 +1,36 @@
+@layer base {
+  .line-numbers::before,
+  .rs-line-number::before {
+    counter-increment: line-number;
+    content: counter(line-number);
+    display: inline-flex;
+    justify-content: flex-end;
+    align-items: flex-start;
+    box-sizing: content-box;
+    min-width: var(--rs-line-numbers-width, 2ch);
+    padding-left: var(--rs-line-numbers-padding-left, 2ch);
+    padding-right: var(--rs-line-numbers-padding-right, 2ch);
+    color: var(--rs-line-numbers-foreground, rgba(107, 114, 128, 0.6));
+    font-size: var(--rs-line-numbers-font-size, inherit);
+    font-weight: var(--rs-line-numbers-font-weight, inherit);
+    line-height: var(--rs-line-numbers-line-height, inherit);
+    font-family: var(--rs-line-numbers-font-family, inherit);
+    opacity: var(--rs-line-numbers-opacity, 1);
+    user-select: none;
+    pointer-events: none;
+  }
+
+  .has-line-numbers,
+  .rs-has-line-numbers {
+    counter-reset: line-number calc(var(--line-start, 1) - 1);
+    --rs-line-numbers-foreground: var(--line-numbers-foreground, rgba(107, 114, 128, 0.5));
+    --rs-line-numbers-width: var(--line-numbers-width, 2ch);
+    --rs-line-numbers-padding-left: var(--line-numbers-padding-left, 0ch);
+    --rs-line-numbers-padding-right: var(--line-numbers-padding-right, 2ch);
+    --rs-line-numbers-font-size: var(--line-numbers-font-size, inherit);
+    --rs-line-numbers-font-weight: var(--line-numbers-font-weight, inherit);
+    --rs-line-numbers-line-height: var(--line-numbers-line-height, inherit);
+    --rs-line-numbers-font-family: var(--line-numbers-font-family, inherit);
+    --rs-line-numbers-opacity: var(--line-numbers-opacity, 1);
+  }
+}

package/dist/chunk-EXJNTVNR.js

@@ -1,349 +0,0 @@
-// src/lib/hook.ts
-import {
-  useEffect,
-  useMemo,
-  useRef as useRef2,
-  useState
-} from "react";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { toJsxRuntime } from "hast-util-to-jsx-runtime";
-
-// src/lib/utils.ts
-import { useRef } from "react";
-import { dequal } from "dequal";
-var useStableOptions = (value) => {
-  const ref = useRef(value);
-  const revision = useRef(0);
-  if (typeof value !== "object" || value === null) {
-    if (value !== ref.current) {
-      ref.current = value;
-      revision.current += 1;
-    }
-    return [value, revision.current];
-  }
-  if (value !== ref.current) {
-    if (!dequal(value, ref.current)) {
-      ref.current = value;
-      revision.current += 1;
-    }
-  }
-  return [ref.current, revision.current];
-};
-var throttleHighlighting = (performHighlight, timeoutControl, throttleMs) => {
-  const now = Date.now();
-  clearTimeout(timeoutControl.current.timeoutId);
-  const delay = Math.max(0, timeoutControl.current.nextAllowedTime - now);
-  timeoutControl.current.timeoutId = setTimeout(() => {
-    performHighlight().catch(console.error);
-    timeoutControl.current.nextAllowedTime = now + throttleMs;
-  }, delay);
-};
-
-// src/lib/resolvers.ts
-var resolveLanguage = (lang, customLanguages, langAliases) => {
-  const normalizedCustomLangs = customLanguages ? Array.isArray(customLanguages) ? customLanguages : [customLanguages] : [];
-  if (lang == null || typeof lang === "string" && !lang.trim()) {
-    return {
-      languageId: "plaintext",
-      displayLanguageId: "plaintext",
-      langsToLoad: void 0
-    };
-  }
-  if (typeof lang === "object") {
-    return {
-      languageId: lang.name,
-      displayLanguageId: lang.name || null,
-      langsToLoad: lang
-    };
-  }
-  const lowerLang = lang.toLowerCase();
-  const matches = (str) => str?.toLowerCase() === lowerLang;
-  const customMatch = normalizedCustomLangs.find(
-    (cl) => matches(cl.name) || matches(cl.scopeName) || matches(cl.scopeName?.split(".").pop()) || cl.aliases?.some(matches) || cl.fileTypes?.some(matches)
-  );
-  if (customMatch) {
-    return {
-      languageId: customMatch.name || lang,
-      displayLanguageId: lang,
-      langsToLoad: customMatch
-    };
-  }
-  if (langAliases?.[lang]) {
-    return {
-      languageId: langAliases[lang],
-      displayLanguageId: lang,
-      langsToLoad: langAliases[lang]
-    };
-  }
-  return {
-    languageId: lang,
-    displayLanguageId: lang,
-    langsToLoad: lang
-  };
-};
-var isTextmateTheme = (value) => typeof value === "object" && value !== null && "tokenColors" in value && Array.isArray(value.tokenColors);
-function resolveTheme(themeInput) {
-  const inputIsTextmateTheme = isTextmateTheme(themeInput);
-  const isMultiThemeConfig = typeof themeInput === "object" && themeInput !== null && !inputIsTextmateTheme;
-  const validMultiThemeObj = typeof themeInput === "object" && themeInput !== null && !inputIsTextmateTheme && Object.entries(themeInput).some(
-    ([key, value]) => key && value && key.trim() !== "" && value !== "" && (typeof value === "string" || isTextmateTheme(value))
-  );
-  if (isMultiThemeConfig) {
-    const themeId = validMultiThemeObj ? `multi-${Object.values(themeInput).map(
-      (theme) => (typeof theme === "string" ? theme : theme?.name) || "custom"
-    ).sort().join("-")}` : "multi-default";
-    return {
-      isMultiTheme: true,
-      themeId,
-      multiTheme: validMultiThemeObj ? themeInput : null,
-      themesToLoad: validMultiThemeObj ? Object.values(themeInput) : []
-    };
-  }
-  return {
-    isMultiTheme: false,
-    themeId: typeof themeInput === "string" ? themeInput : themeInput?.name || "custom",
-    singleTheme: themeInput,
-    themesToLoad: [themeInput]
-  };
-}
-
-// src/lib/transformers.ts
-function lineNumbersTransformer(startLine = 1) {
-  return {
-    name: "react-shiki:line-numbers",
-    code(node) {
-      this.addClassToHast(node, "has-line-numbers");
-      if (startLine !== 1) {
-        const existingStyle = node.properties?.style || "";
-        const newStyle = existingStyle ? `${existingStyle}; --line-start: ${startLine}` : `--line-start: ${startLine}`;
-        node.properties = {
-          ...node.properties,
-          style: newStyle
-        };
-      }
-    },
-    line(node) {
-      this.addClassToHast(node, "line-numbers");
-      return node;
-    }
-  };
-}
-
-// src/lib/hook.ts
-var DEFAULT_THEMES = {
-  light: "github-light",
-  dark: "github-dark"
-};
-var useShikiHighlighter = (code, lang, themeInput, options = {}, highlighterFactory) => {
-  const [highlightedCode, setHighlightedCode] = useState(null);
-  const [stableLang, langRev] = useStableOptions(lang);
-  const [stableTheme, themeRev] = useStableOptions(themeInput);
-  const [stableOpts, optsRev] = useStableOptions(options);
-  const { languageId, langsToLoad } = useMemo(
-    () => resolveLanguage(
-      stableLang,
-      stableOpts.customLanguages,
-      stableOpts.langAlias
-    ),
-    [stableLang, stableOpts.customLanguages, stableOpts.langAlias]
-  );
-  const { isMultiTheme, themeId, multiTheme, singleTheme, themesToLoad } = useMemo(() => resolveTheme(stableTheme), [stableTheme]);
-  const timeoutControl = useRef2({
-    nextAllowedTime: 0,
-    timeoutId: void 0
-  });
-  const shikiOptions = useMemo(() => {
-    const languageOption = { lang: languageId };
-    const {
-      defaultColor,
-      cssVariablePrefix,
-      showLineNumbers,
-      startingLineNumber,
-      ...restOptions
-    } = stableOpts;
-    const themeOptions = isMultiTheme ? {
-      themes: multiTheme || DEFAULT_THEMES,
-      defaultColor,
-      cssVariablePrefix
-    } : {
-      theme: singleTheme || DEFAULT_THEMES.dark
-    };
-    const transformers = restOptions.transformers || [];
-    if (showLineNumbers) {
-      transformers.push(lineNumbersTransformer(startingLineNumber));
-    }
-    return {
-      ...languageOption,
-      ...themeOptions,
-      ...restOptions,
-      transformers
-    };
-  }, [languageId, themeId, langRev, themeRev, optsRev]);
-  useEffect(() => {
-    let isMounted = true;
-    const highlightCode = async () => {
-      if (!languageId) return;
-      const highlighter = stableOpts.highlighter ? stableOpts.highlighter : await highlighterFactory(
-        langsToLoad,
-        themesToLoad,
-        stableOpts.engine
-      );
-      const loadedLanguages = highlighter.getLoadedLanguages();
-      const langToUse = loadedLanguages.includes(languageId) ? languageId : "plaintext";
-      const finalOptions = { ...shikiOptions, lang: langToUse };
-      if (isMounted) {
-        const output = stableOpts.outputFormat === "html" ? highlighter.codeToHtml(code, finalOptions) : toJsxRuntime(highlighter.codeToHast(code, finalOptions), {
-          jsx,
-          jsxs,
-          Fragment
-        });
-        setHighlightedCode(output);
-      }
-    };
-    const { delay } = stableOpts;
-    if (delay) {
-      throttleHighlighting(highlightCode, timeoutControl, delay);
-    } else {
-      highlightCode().catch(console.error);
-    }
-    return () => {
-      isMounted = false;
-      clearTimeout(timeoutControl.current.timeoutId);
-    };
-  }, [
-    code,
-    shikiOptions,
-    stableOpts.delay,
-    stableOpts.highlighter,
-    langsToLoad,
-    themesToLoad
-  ]);
-  return highlightedCode;
-};
-
-// src/lib/plugins.ts
-import { visit } from "unist-util-visit";
-function rehypeInlineCodeProperty() {
-  return (tree) => {
-    visit(tree, "element", (node, _index, parent) => {
-      if (node.tagName === "code" && parent.tagName !== "pre") {
-        node.properties.inline = true;
-      }
-    });
-  };
-}
-var isInlineCode = (node) => {
-  const textContent = (node.children || []).filter((child) => child.type === "text").map((child) => child.value).join("");
-  return !textContent.includes("\n");
-};
-
-// #style-inject:#style-inject
-function styleInject(css, { insertAt } = {}) {
-  if (!css || typeof document === "undefined") return;
-  const head = document.head || document.getElementsByTagName("head")[0];
-  const style = document.createElement("style");
-  style.type = "text/css";
-  if (insertAt === "top") {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-// src/lib/styles.css
-styleInject(".relative {\n  position: relative;\n}\n.defaultStyles pre {\n  overflow: auto;\n  border-radius: 0.5rem;\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n  padding-top: 1.25rem;\n  padding-bottom: 1.25rem;\n}\n.languageLabel {\n  position: absolute;\n  right: 0.75rem;\n  top: 0.5rem;\n  font-family: monospace;\n  font-size: 0.75rem;\n  letter-spacing: -0.05em;\n  color: rgba(107, 114, 128, 0.85);\n}\n.line-numbers::before {\n  counter-increment: line-number;\n  content: counter(line-number);\n  display: inline-flex;\n  justify-content: flex-end;\n  align-items: flex-start;\n  box-sizing: content-box;\n  min-width: var(--line-numbers-width, 2ch);\n  padding-left: var(--line-numbers-padding-left, 2ch);\n  padding-right: var(--line-numbers-padding-right, 2ch);\n  color: var(--line-numbers-foreground, rgba(107, 114, 128, 0.6));\n  font-size: var(--line-numbers-font-size, inherit);\n  font-weight: var(--line-numbers-font-weight, inherit);\n  line-height: var(--line-numbers-line-height, inherit);\n  font-family: var(--line-numbers-font-family, inherit);\n  opacity: var(--line-numbers-opacity, 1);\n  user-select: none;\n  pointer-events: none;\n}\n.has-line-numbers {\n  counter-reset: line-number calc(var(--line-start, 1) - 1);\n  --line-numbers-foreground: rgba(107, 114, 128, 0.5);\n  --line-numbers-width: 2ch;\n  --line-numbers-padding-left: 0ch;\n  --line-numbers-padding-right: 2ch;\n  --line-numbers-font-size: inherit;\n  --line-numbers-font-weight: inherit;\n  --line-numbers-line-height: inherit;\n  --line-numbers-font-family: inherit;\n  --line-numbers-opacity: 1;\n}\n");
-
-// src/lib/component.tsx
-import { clsx } from "clsx";
-import { forwardRef } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var createShikiHighlighterComponent = (useShikiHighlighterImpl) => {
-  return forwardRef(
-    ({
-      language,
-      theme,
-      delay,
-      transformers,
-      defaultColor,
-      cssVariablePrefix,
-      addDefaultStyles = true,
-      style,
-      langStyle,
-      className,
-      langClassName,
-      showLanguage = true,
-      showLineNumbers = false,
-      startingLineNumber = 1,
-      children: code,
-      as: Element = "pre",
-      customLanguages,
-      ...shikiOptions
-    }, ref) => {
-      const options = {
-        delay,
-        transformers,
-        customLanguages,
-        showLineNumbers,
-        defaultColor,
-        cssVariablePrefix,
-        startingLineNumber,
-        ...shikiOptions
-      };
-      const { displayLanguageId } = resolveLanguage(
-        language,
-        customLanguages
-      );
-      const highlightedCode = useShikiHighlighterImpl(
-        code,
-        language,
-        theme,
-        options
-      );
-      const isHtmlOutput = typeof highlightedCode === "string";
-      return /* @__PURE__ */ jsxs2(
-        Element,
-        {
-          ref,
-          "data-testid": "shiki-container",
-          className: clsx(
-            "relative",
-            "not-prose",
-            addDefaultStyles && "defaultStyles",
-            className
-          ),
-          style,
-          id: "shiki-container",
-          children: [
-            showLanguage && displayLanguageId ? /* @__PURE__ */ jsx2(
-              "span",
-              {
-                className: clsx("languageLabel", langClassName),
-                style: langStyle,
-                id: "language-label",
-                children: displayLanguageId
-              }
-            ) : null,
-            isHtmlOutput ? /* @__PURE__ */ jsx2("div", { dangerouslySetInnerHTML: { __html: highlightedCode } }) : highlightedCode
-          ]
-        }
-      );
-    }
-  );
-};
-
-export {
-  useShikiHighlighter,
-  rehypeInlineCodeProperty,
-  isInlineCode,
-  createShikiHighlighterComponent
-};
-//# sourceMappingURL=chunk-EXJNTVNR.js.map