react-shiki 0.6.0 → 0.7.0

package/README.md

@@ -14,27 +14,30 @@ A performant client-side syntax highlighting component and hook for React, built
   - [Features](#features)
   - [Installation](#installation)
   - [Usage](#usage)
+  - [Bundle Options](#bundle-options)
+  - [Configuration](#configuration)
     - [Common Configuration Options](#common-configuration-options)
     - [Component-specific Props](#component-specific-props)
-    - [Integration with react-markdown](#integration-with-react-markdown)
-    - [Handling Inline Code](#handling-inline-code)
     - [Multi-theme Support](#multi-theme-support)
     - [Custom Themes](#custom-themes)
     - [Custom Languages](#custom-languages)
       - [Preloading Custom Languages](#preloading-custom-languages)
     - [Custom Transformers](#custom-transformers)
-  - [Performance](#performance) 
-  - [Throttling Real-time Highlighting](#throttling-real-time-highlighting)
-  - [Streaming and LLM Chat UI](#streaming-and-llm-chat-ui)
+  - [Integration](#integration)
+    - [Integration with react-markdown](#integration-with-react-markdown)
+    - [Handling Inline Code](#handling-inline-code)
+  - [Performance](#performance)
+    - [Throttling Real-time Highlighting](#throttling-real-time-highlighting)
+    - [Streaming and LLM Chat UI](#streaming-and-llm-chat-ui)
   <!--toc:end-->
 
 ## Features
 
 - 🖼️ Provides both a `ShikiHighlighter` component and a `useShikiHighlighter` hook for more flexibility
-- 🔐 No `dangerouslySetInnerHTML` - output from Shiki is parsed using `html-react-parser`
-- 📦 Supports all built-in Shiki languages and themes
+- 🔐 Shiki output is processed from HAST directly into React elements, no `dangerouslySetInnerHTML` required
+- 📦 Multiple bundle options: Full bundle (~1.2MB gz), web bundle (~695KB gz), or minimal core bundle for fine-grained bundle control
 - 🖌️ Full support for custom TextMate themes and languages
-- 🔧 Supports passing custom Shiki transformers to the highlighter
+- 🔧 Supports passing custom Shiki transformers to the highlighter, in addition to all other options supported by `codeToHast`
 - 🚰 Performant highlighting of streamed code, with optional throttling
 - 📚 Includes minimal default styles for code blocks
 - 🚀 Shiki dynamically imports only the languages and themes used on a page for optimal performance
@@ -55,7 +58,7 @@ You can use either the `ShikiHighlighter` component or the `useShikiHighlighter`
 **Using the Component:**
 
 ```tsx
-import { ShikiHighlighter } from "react-shiki";
+import ShikiHighlighter from "react-shiki";
 
 function CodeBlock() {
   return (
@@ -78,18 +81,87 @@ function CodeBlock({ code, language }) {
 }
 ```
 
+## Bundle Options
+`react-shiki`, like `shiki`, offers three entry points to balance convenience and bundle optimization:
+
+### `react-shiki` (Full Bundle)
+```tsx
+import ShikiHighlighter from 'react-shiki';
+```
+- **Size**: ~6.4MB minified, 1.2MB gzipped
+- **Languages**: All Shiki languages and themes
+- **Use case**: Unknown language requirements, maximum language support
+- **Setup**: Zero configuration required
+
+### `react-shiki/web` (Web Bundle)  
+```tsx
+import ShikiHighlighter from 'react-shiki/web';
+```
+- **Size**: ~3.8MB minified, 695KB gzipped
+- **Languages**: Web-focused languages (HTML, CSS, JS, TS, JSON, Markdown, Vue, JSX, Svelte)
+- **Use case**: Web applications with balanced size/functionality
+- **Setup**: Drop-in replacement for main entry point
+
+### `react-shiki/core` (Minimal Bundle)
+```tsx
+import ShikiHighlighter, { 
+  createHighlighterCore,        // re-exported from shiki/core
+  createOnigurumaEngine,        // re-exported from shiki/engine/oniguruma
+  createJavaScriptRegexEngine,  // re-exported from shiki/engine/javascript
+} from 'react-shiki/core';
+
+// Create custom highlighter with dynamic imports to optimize client-side bundle size
+const highlighter = await createHighlighterCore({
+  themes: [import('@shikijs/themes/nord')],
+  langs: [import('@shikijs/langs/typescript')],
+  engine: createOnigurumaEngine(import('shiki/wasm')) 
+    // or createJavaScriptRegexEngine()
+});
+
+<ShikiHighlighter highlighter={highlighter} language="typescript" theme="nord">
+  {code}
+</ShikiHighlighter>
+```
+- **Size**: Minimal (only what you import)
+- **Languages**: User-defined via custom highlighter  
+- **Use case**: Production apps requiring maximum bundle control
+- **Setup**: Requires custom highlighter configuration
+- **Engine options**: Choose JavaScript engine (smaller bundle, faster startup) or Oniguruma (WASM, maximum language support)
+
+### RegExp Engines
+
+Shiki offers two built-in engines:
+- **Oniguruma** - default, uses the compiled Oniguruma WebAssembly, and offer maximum language support
+- **JavaScript** - smaller bundle, faster startup, recommended when running highlighting on the client
+
+Unlike the Oniguruma engine, the JavaScript engine is [strict by default](https://shiki.style/guide/regex-engines#use-with-unsupported-languages). It will throw an error if it encounters an invalid Oniguruma pattern or a pattern that it cannot convert. If you want best-effort results for unsupported grammars, you can enable the forgiving option to suppress any conversion errors:
+
+```tsx
+createJavaScriptRegexEngine({ forgiving: true });
+```
+
+See [Shiki - RegExp Engines](https://shiki.style/guide/regex-engines) for more info.
+
+
+## Configuration
+
 ### Common Configuration Options
 
-| Option              | Type               | Default         | Description                                                               |
-| ------------------- | ------------------ | --------------- | ------------------------------------------------------------------------- |
-| `code`            | `string`           | -               | Code to highlight                                                          |
-| `language`          | `string \| object` | -               | Language to highlight, built-in or custom textmate grammer object                                                         |
+
+| Option              | Type               | Default         | Description                                                                   |
+| ------------------- | ------------------ | --------------- | ----------------------------------------------------------------------------- |
+| `code`            | `string`           | -               | Code to highlight                                                               |
+| `language`          | `string \| object` | -               | Language to highlight, built-in or custom textmate grammer object             |
 | `theme`             | `string \| object` | `'github-dark'` | Single or multi-theme configuration, built-in or custom textmate theme object |
 | `delay`             | `number`           | `0`             | Delay between highlights (in milliseconds)                                    |
-| `transformers`      | `array`            | `[]`            | Custom Shiki transformers for modifying the highlighting output               |
 | `customLanguages`   | `array`            | `[]`            | Array of custom languages to preload                                          |
+| `transformers`      | `array`            | `[]`            | Custom Shiki transformers for modifying the highlighting output               |
 | `cssVariablePrefix` | `string`           | `'--shiki'`     | Prefix for CSS variables storing theme colors                                 |
 | `defaultColor`      | `string \| false`  | `'light'`       | Default theme mode when using multiple themes, can also disable default theme |
+| `tabindex`          | `number`           | `0`             | Tab index for the code block                                                  |
+| `decorations`       | `array`            | `[]`            | Custom decorations to wrap the highlighted tokens with                        |
+| `structure`        | `string`           | `classic`  | The structure of the generated HAST and HTML - `classic` or `inline`               |
+| [`codeToHastOptions`](https://github.com/shikijs/shiki/blob/main/packages/types/src/options.ts#L121) | -             | -              | All other options supported by Shiki's `codeToHast`      |
 
 ### Component-specific Props
 
@@ -105,13 +177,123 @@ The `ShikiHighlighter` component offers minimal built-in styling and customizati
 | `style`            | `object`  | -       | Inline style object for the code block                     |
 | `langStyle`        | `object`  | -       | Inline style object for the language label                 |
 
+### Multi-theme Support
+
+To use multiple theme modes, pass an object with your multi-theme configuration to the `theme` prop in the `ShikiHighlighter` component:
+
+```tsx
+<ShikiHighlighter
+  language="tsx"
+  theme={{
+    light: "github-light",
+    dark: "github-dark",
+    dim: "github-dark-dimmed",
+  }}
+  defaultColor="dark"
+>
+  {code.trim()}
+</ShikiHighlighter>
+```
+
+Or, when using the hook, pass it to the `theme` parameter:
+
+```tsx
+const highlightedCode = useShikiHighlighter(
+  code,
+  "tsx",
+  {
+    light: "github-light",
+    dark: "github-dark",
+    dim: "github-dark-dimmed",
+  },
+  {
+    defaultColor: "dark",
+  }
+);
+```
+
+See [shiki's documentation](https://shiki.matsu.io/docs/themes) for more information on dual and multi theme support, and for the CSS needed to make the themes reactive to your site's theme.
+
+### Custom Themes
+
+Custom themes can be passed as a TextMate theme in JavaScript object. For example, [it should look like this](https://github.com/antfu/textmate-grammars-themes/blob/main/packages/tm-themes/themes/dark-plus.json).
+
+```tsx
+import tokyoNight from "../styles/tokyo-night.json";
+
+// Using the component
+<ShikiHighlighter language="tsx" theme={tokyoNight}>
+  {code.trim()}
+</ShikiHighlighter>
+
+// Using the hook
+const highlightedCode = useShikiHighlighter(code, "tsx", tokyoNight);
+```
+
+### Custom Languages
+
+Custom languages should be passed as a TextMate grammar in JavaScript object. For example, [it should look like this](https://github.com/shikijs/textmate-grammars-themes/blob/main/packages/tm-grammars/grammars/typescript.json)
+
+```tsx
+import mcfunction from "../langs/mcfunction.tmLanguage.json";
+
+// Using the component
+<ShikiHighlighter language={mcfunction} theme="github-dark">
+  {code.trim()}
+</ShikiHighlighter>
+
+// Using the hook
+const highlightedCode = useShikiHighlighter(code, mcfunction, "github-dark");
+```
+
+#### Preloading Custom Languages
+
+For dynamic highlighting scenarios where language selection happens at runtime:
+
+```tsx
+import mcfunction from "../langs/mcfunction.tmLanguage.json";
+import bosque from "../langs/bosque.tmLanguage.json";
+
+// With the component
+<ShikiHighlighter
+  language="typescript"
+  theme="github-dark"
+  customLanguages={[mcfunction, bosque]}
+>
+  {code.trim()}
+</ShikiHighlighter>
+
+// With the hook
+const highlightedCode = useShikiHighlighter(code, "typescript", "github-dark", {
+  customLanguages: [mcfunction, bosque],
+});
+```
+
+### Custom Transformers
+
+```tsx
+import { customTransformer } from "../utils/shikiTransformers";
+
+// Using the component
+<ShikiHighlighter language="tsx" transformers={[customTransformer]}>
+  {code.trim()}
+</ShikiHighlighter>
+
+// Using the hook
+const highlightedCode = useShikiHighlighter(code, "tsx", "github-dark", {
+  transformers: [customTransformer],
+});
+```
+
+## Integration
+
 ### Integration with react-markdown
 
 Create a component to handle syntax highlighting:
 
 ```tsx
 import ReactMarkdown from "react-markdown";
-import { ShikiHighlighter, isInlineCode } from "react-shiki";
+import ShikiHighlighter, { isInlineCode } from "react-shiki";
 
 const CodeHighlight = ({ className, children, node, ...props }) => {
   const code = String(children).trim();
@@ -155,7 +337,7 @@ ways to replicate this functionality and API.
 `react-shiki` exports `isInlineCode` which parses the `node` prop from `react-markdown` and identifies inline code by checking for the absence of newline characters:
 
 ```tsx
-import { isInlineCode, ShikiHighlighter } from "react-shiki";
+import ShikiHighlighter, { isInlineCode } from "react-shiki";
 
 const CodeHighlight = ({ className, children, node, ...props }) => {
   const match = className?.match(/language-(\w+)/);
@@ -224,114 +406,6 @@ const CodeHighlight = ({
 };
 ```
 
-### Multi-theme Support
-
-To use multiple theme modes, pass an object with your multi-theme configuration to the `theme` prop in the `ShikiHighlighter` component:
-
-```tsx
-<ShikiHighlighter
-  language="tsx"
-  theme={{
-    light: "github-light",
-    dark: "github-dark",
-    dim: "github-dark-dimmed",
-  }}
-  defaultColor="dark"
->
-  {code.trim()}
-</ShikiHighlighter>
-```
-
-Or, when using the hook, pass it to the `theme` parameter:
-
-```tsx
-const highlightedCode = useShikiHighlighter(
-  code,
-  "tsx",
-  {
-    light: "github-light",
-    dark: "github-dark",
-    dim: "github-dark-dimmed",
-  },
-  {
-    defaultColor: "dark",
-  }
-);
-```
-
-See [shiki's documentation](https://shiki.matsu.io/docs/themes) for more information on dual and multi theme support, and for the CSS needed to make the themes reactive to your site's theme.
-
-### Custom Themes
-
-Custom themes can be passed as a TextMate theme in JavaScript object. For example, [it should look like this](https://github.com/antfu/textmate-grammars-themes/blob/main/packages/tm-themes/themes/dark-plus.json).
-
-```tsx
-import tokyoNight from "../styles/tokyo-night.json";
-
-// Using the component
-<ShikiHighlighter language="tsx" theme={tokyoNight}>
-  {code.trim()}
-</ShikiHighlighter>
-
-// Using the hook
-const highlightedCode = useShikiHighlighter(code, "tsx", tokyoNight);
-```
-
-### Custom Languages
-
-Custom languages should be passed as a TextMate grammar in JavaScript object. For example, [it should look like this](https://github.com/shikijs/textmate-grammars-themes/blob/main/packages/tm-grammars/grammars/typescript.json)
-
-```tsx
-import mcfunction from "../langs/mcfunction.tmLanguage.json";
-
-// Using the component
-<ShikiHighlighter language={mcfunction} theme="github-dark">
-  {code.trim()}
-</ShikiHighlighter>
-
-// Using the hook
-const highlightedCode = useShikiHighlighter(code, mcfunction, "github-dark");
-```
-
-#### Preloading Custom Languages
-
-For dynamic highlighting scenarios where language selection happens at runtime:
-
-```tsx
-import mcfunction from "../langs/mcfunction.tmLanguage.json";
-import bosque from "../langs/bosque.tmLanguage.json";
-
-// With the component
-<ShikiHighlighter
-  language="typescript"
-  theme="github-dark"
-  customLanguages={[mcfunction, bosque]}
->
-  {code.trim()}
-</ShikiHighlighter>
-
-// With the hook
-const highlightedCode = useShikiHighlighter(code, "typescript", "github-dark", {
-  customLanguages: [mcfunction, bosque],
-});
-```
-
-### Custom Transformers
-
-```tsx
-import { customTransformer } from "../utils/shikiTransformers";
-
-// Using the component
-<ShikiHighlighter language="tsx" transformers={[customTransformer]}>
-  {code.trim()}
-</ShikiHighlighter>
-
-// Using the hook
-const highlightedCode = useShikiHighlighter(code, "tsx", "github-dark", {
-  transformers: [customTransformer],
-});
-```
-
 ## Performance
 
 ### Throttling Real-time Highlighting
@@ -447,7 +521,7 @@ export const CodeHighlight = ({
 };
 ```
 
-Passed to `react-markdown` as a `code` component in memo-ized chat messages:
+Passed to `react-markdown` as a `code` component in memoized chat messages:
 
 ```tsx
 const RenderedMessage = React.memo(({ message }: { message: Message }) => (

package/dist/chunk-XAMWR6XF.js

@@ -0,0 +1,283 @@
+// src/lib/utils.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");
+};
+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/hook.ts
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { dequal } from "dequal/lite";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { toJsxRuntime } from "hast-util-to-jsx-runtime";
+
+// src/lib/resolvers.ts
+var resolveLanguage = (lang, customLanguages) => {
+  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
+    };
+  }
+  return {
+    languageId: lang,
+    displayLanguageId: lang,
+    langsToLoad: lang
+  };
+};
+function resolveTheme(themeInput) {
+  const isTextmateTheme = typeof themeInput === "object" && "tokenColors" in themeInput && Array.isArray(themeInput.tokenColors);
+  const isMultiThemeConfig = typeof themeInput === "object" && themeInput !== null && !isTextmateTheme;
+  const validMultiThemeObj = typeof themeInput === "object" && themeInput !== null && !isTextmateTheme && Object.entries(themeInput).some(
+    ([key, value]) => key && value && key.trim() !== "" && value !== "" && (typeof value === "string" || isTextmateTheme)
+  );
+  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/hook.ts
+var DEFAULT_THEMES = {
+  light: "github-light",
+  dark: "github-dark"
+};
+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 useShikiHighlighter = (code, lang, themeInput, createHighlighter, options = {}) => {
+  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),
+    [stableLang, stableOpts.customLanguages]
+  );
+  const { isMultiTheme, themeId, multiTheme, singleTheme, themesToLoad } = useMemo(() => resolveTheme(stableTheme), [stableTheme]);
+  const timeoutControl = useRef({
+    nextAllowedTime: 0,
+    timeoutId: void 0
+  });
+  const shikiOptions = useMemo(() => {
+    const { defaultColor, cssVariablePrefix, ...restOptions } = stableOpts;
+    const languageOption = { lang: languageId };
+    const themeOptions = isMultiTheme ? {
+      themes: multiTheme || DEFAULT_THEMES,
+      defaultColor,
+      cssVariablePrefix
+    } : {
+      theme: singleTheme || DEFAULT_THEMES.dark
+    };
+    return { ...languageOption, ...themeOptions, ...restOptions };
+  }, [languageId, themeId, langRev, themeRev, optsRev]);
+  useEffect(() => {
+    let isMounted = true;
+    const highlightCode = async () => {
+      if (!languageId) return;
+      const highlighter = stableOpts.highlighter ? stableOpts.highlighter : await createHighlighter(
+        langsToLoad,
+        themesToLoad
+      );
+      const loadedLanguages = highlighter.getLoadedLanguages();
+      const langToUse = loadedLanguages.includes(languageId) ? languageId : "plaintext";
+      const finalOptions = { ...shikiOptions, lang: langToUse };
+      const hast = highlighter.codeToHast(code, finalOptions);
+      if (isMounted) {
+        setHighlightedCode(toJsxRuntime(hast, { jsx, jsxs, Fragment }));
+      }
+    };
+    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;
+};
+
+// #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");
+
+// src/lib/component.tsx
+import { clsx } from "clsx";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var createShikiHighlighterComponent = (useShikiHighlighterImpl) => {
+  return ({
+    language,
+    theme,
+    delay,
+    transformers,
+    defaultColor,
+    cssVariablePrefix,
+    addDefaultStyles = true,
+    style,
+    langStyle,
+    className,
+    langClassName,
+    showLanguage = true,
+    children: code,
+    as: Element = "pre",
+    customLanguages,
+    ...shikiOptions
+  }) => {
+    const options = {
+      delay,
+      transformers,
+      customLanguages,
+      defaultColor,
+      cssVariablePrefix,
+      ...shikiOptions
+    };
+    const { displayLanguageId } = resolveLanguage(
+      language,
+      customLanguages
+    );
+    const highlightedCode = useShikiHighlighterImpl(
+      code,
+      language,
+      theme,
+      options
+    );
+    return /* @__PURE__ */ jsxs2(
+      Element,
+      {
+        "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,
+          highlightedCode
+        ]
+      }
+    );
+  };
+};
+
+export {
+  rehypeInlineCodeProperty,
+  isInlineCode,
+  useShikiHighlighter,
+  createShikiHighlighterComponent
+};
+//# sourceMappingURL=chunk-XAMWR6XF.js.map