react-shiki 0.5.3 → 0.7.0

package/dist/chunk-XAMWR6XF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/lib/hook.ts","../src/lib/resolvers.ts","#style-inject:#style-inject","../src/lib/styles.css","../src/lib/component.tsx"],"sourcesContent":["import { visit } from 'unist-util-visit';\n\nimport type { TimeoutState, Element } from './types';\n\n/**\n * Rehype plugin to add an 'inline' property to <code> elements\n * Sets 'inline' property to true if the <code> is not within a <pre> tag\n *\n * Pass this plugin to the `rehypePlugins` prop of react-markdown\n * You can then access `inline` as a prop in components passed to react-markdown\n *\n * @example\n * <ReactMarkdown rehypePlugins={[rehypeInlineCodeProperty]} />\n */\nexport function rehypeInlineCodeProperty() {\n  return (tree: any): undefined => {\n    visit(tree, 'element', (node: Element, _index, parent: Element) => {\n      if (node.tagName === 'code' && parent.tagName !== 'pre') {\n        node.properties.inline = true;\n      }\n    });\n  };\n}\n\n/**\n * Function to determine if code is inline based on the presence of line breaks\n *\n * @example\n * const isInline = node && isInlineCode(node: Element)\n */\nexport const isInlineCode = (node: Element): boolean => {\n  const textContent = (node.children || [])\n    .filter((child) => child.type === 'text')\n    .map((child) => child.value)\n    .join('');\n\n  return !textContent.includes('\\n');\n};\n\n/**\n * Optionally throttles rapid sequential highlighting operations\n * Exported for testing in __tests__/throttleHighlighting.test.ts\n *\n * @example\n * const timeoutControl = useRef<TimeoutState>({\n *   nextAllowedTime: 0,\n *   timeoutId: undefined\n * });\n *\n * throttleHighlighting(highlightCode, timeoutControl, 1000);\n */\nexport const throttleHighlighting = (\n  performHighlight: () => Promise<void>,\n  timeoutControl: React.RefObject<TimeoutState>,\n  throttleMs: number\n) => {\n  const now = Date.now();\n  clearTimeout(timeoutControl.current.timeoutId);\n\n  const delay = Math.max(0, timeoutControl.current.nextAllowedTime - now);\n  timeoutControl.current.timeoutId = setTimeout(() => {\n    performHighlight().catch(console.error);\n    timeoutControl.current.nextAllowedTime = now + throttleMs;\n  }, delay);\n};\n","import {\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react';\n\nimport { dequal } from 'dequal/lite';\n\nimport { jsx, jsxs, Fragment } from 'react/jsx-runtime';\nimport { toJsxRuntime } from 'hast-util-to-jsx-runtime';\n\nimport type {\n  CodeToHastOptions,\n  CodeOptionsSingleTheme,\n  CodeOptionsMultipleThemes,\n  Highlighter,\n  HighlighterCore,\n} from 'shiki';\n\nimport type { ShikiLanguageRegistration } from './extended-types';\n\nimport type {\n  Language,\n  Theme,\n  HighlighterOptions,\n  TimeoutState,\n  Themes,\n} from './types';\n\nimport { throttleHighlighting } from './utils';\nimport { resolveLanguage, resolveTheme } from './resolvers';\n\nconst DEFAULT_THEMES: Themes = {\n  light: 'github-light',\n  dark: 'github-dark',\n};\n\n/**\n * Returns a deep-stable reference and a version counter that only changes when content changes.\n * Includes optimizations for primitive values and reference equality.\n */\nconst useStableOptions = <T>(value: T) => {\n  const ref = useRef(value);\n  const revision = useRef(0);\n\n  // Fast-path for primitive values\n  if (typeof value !== 'object' || value === null) {\n    if (value !== ref.current) {\n      ref.current = value;\n      revision.current += 1;\n    }\n    return [value, revision.current] as const;\n  }\n\n  // Reference equality check before expensive deep comparison\n  if (value !== ref.current) {\n    if (!dequal(value, ref.current)) {\n      ref.current = value;\n      revision.current += 1;\n    }\n  }\n\n  return [ref.current, revision.current] as const;\n};\n\n/**\n * Base hook for syntax highlighting using Shiki.\n * This is the core implementation used by all entry points.\n *\n * @param code - The code to highlight\n * @param lang - Language for highlighting\n * @param themeInput - Theme or themes to use\n * @param options - Highlighting options\n * @param createHighlighter - Factory function to create highlighter (internal use)\n */\nexport const useShikiHighlighter = (\n  code: string,\n  lang: Language,\n  themeInput: Theme | Themes,\n  createHighlighter: (\n    langsToLoad: ShikiLanguageRegistration,\n    themesToLoad: Theme[]\n  ) => Promise<Highlighter | HighlighterCore>,\n  options: HighlighterOptions = {}\n) => {\n  const [highlightedCode, setHighlightedCode] =\n    useState<ReactNode | null>(null);\n\n  // Stabilize options, language and theme inputs to prevent unnecessary\n  // re-renders or recalculations when object references change\n  const [stableLang, langRev] = useStableOptions(lang);\n  const [stableTheme, themeRev] = useStableOptions(themeInput);\n  const [stableOpts, optsRev] = useStableOptions(options);\n\n  const { languageId, langsToLoad } = useMemo(\n    () => resolveLanguage(stableLang, stableOpts.customLanguages),\n    [stableLang, stableOpts.customLanguages]\n  );\n\n  const { isMultiTheme, themeId, multiTheme, singleTheme, themesToLoad } =\n    useMemo(() => resolveTheme(stableTheme), [stableTheme]);\n\n  const timeoutControl = useRef<TimeoutState>({\n    nextAllowedTime: 0,\n    timeoutId: undefined,\n  });\n\n  const shikiOptions = useMemo<CodeToHastOptions>(() => {\n    const { defaultColor, cssVariablePrefix, ...restOptions } =\n      stableOpts;\n    const languageOption = { lang: languageId };\n\n    const themeOptions = isMultiTheme\n      ? ({\n          themes: multiTheme || DEFAULT_THEMES,\n          defaultColor,\n          cssVariablePrefix,\n        } as CodeOptionsMultipleThemes)\n      : ({\n          theme: singleTheme || DEFAULT_THEMES.dark,\n        } as CodeOptionsSingleTheme);\n\n    return { ...languageOption, ...themeOptions, ...restOptions };\n  }, [languageId, themeId, langRev, themeRev, optsRev]);\n\n  useEffect(() => {\n    let isMounted = true;\n\n    const highlightCode = async () => {\n      if (!languageId) return;\n\n      // Use provided custom highlighter or create one using the factory\n      const highlighter = stableOpts.highlighter\n        ? stableOpts.highlighter\n        : await createHighlighter(\n            langsToLoad as ShikiLanguageRegistration,\n            themesToLoad\n          );\n\n      // Check if language is loaded, fallback to plaintext if not\n      const loadedLanguages = highlighter.getLoadedLanguages();\n      const langToUse = loadedLanguages.includes(languageId) ? languageId : 'plaintext';\n      const finalOptions = { ...shikiOptions, lang: langToUse };\n      \n      const hast = highlighter.codeToHast(code, finalOptions);\n\n      if (isMounted) {\n        setHighlightedCode(toJsxRuntime(hast, { jsx, jsxs, Fragment }));\n      }\n    };\n\n    const { delay } = stableOpts;\n\n    if (delay) {\n      throttleHighlighting(highlightCode, timeoutControl, delay);\n    } else {\n      highlightCode().catch(console.error);\n    }\n\n    return () => {\n      isMounted = false;\n      clearTimeout(timeoutControl.current.timeoutId);\n    };\n  }, [\n    code,\n    shikiOptions,\n    stableOpts.delay,\n    stableOpts.highlighter,\n    langsToLoad,\n    themesToLoad,\n  ]);\n\n  return highlightedCode;\n};\n","import type { Language, Theme, Themes } from './types';\nimport type { ThemeRegistrationAny } from 'shiki/core';\nimport type { LanguageRegistration } from './extended-types';\n\n/**\n * Resolved languages and metadata\n */\ntype LanguageResult = {\n  languageId: string;\n  displayLanguageId: string | null;\n  langsToLoad: Language;\n};\n\n/**\n * Resolves the language input to standardized IDs and objects for Shiki and UI display\n * @param lang The language input from props\n * @param customLanguages An array of custom textmate grammar objects or a single grammar object\n * @returns A LanguageResult object containing:\n *   - languageId: The resolved language ID\n *   - displayLanguageId: The display language ID\n *   - langToLoad: The language object or string id to load\n */\nexport const resolveLanguage = (\n  lang: Language,\n  customLanguages?: LanguageRegistration | LanguageRegistration[]\n): LanguageResult => {\n  const normalizedCustomLangs = customLanguages\n    ? Array.isArray(customLanguages)\n      ? customLanguages\n      : [customLanguages]\n    : [];\n\n  // Language is null or empty string\n  if (lang == null || (typeof lang === 'string' && !lang.trim())) {\n    return {\n      languageId: 'plaintext',\n      displayLanguageId: 'plaintext',\n      langsToLoad: undefined,\n    };\n  }\n\n  // Language is custom\n  if (typeof lang === 'object') {\n    return {\n      languageId: lang.name,\n      displayLanguageId: lang.name || null,\n      langsToLoad: lang,\n    };\n  }\n\n  // Language is string\n  const lowerLang = lang.toLowerCase();\n  const matches = (str: string | undefined): boolean =>\n    str?.toLowerCase() === lowerLang;\n\n  // Check if the string identifies a provided custom language\n  const customMatch = normalizedCustomLangs.find(\n    (cl) =>\n      matches(cl.name) ||\n      matches(cl.scopeName) ||\n      matches(cl.scopeName?.split('.').pop()) ||\n      cl.aliases?.some(matches) ||\n      cl.fileTypes?.some(matches)\n  );\n\n  if (customMatch) {\n    return {\n      languageId: customMatch.name || lang,\n      displayLanguageId: lang,\n      langsToLoad: customMatch,\n    };\n  }\n\n  // For any other string, pass it through, \n  // fallback is handled in highlighter factories\n  return {\n    languageId: lang,\n    displayLanguageId: lang,\n    langsToLoad: lang,\n  };\n};\n\n/**\n * Resolved themes and metadata\n */\ninterface ThemeResult {\n  isMultiTheme: boolean;\n  themeId: Theme;\n  multiTheme?: Themes | ThemeRegistrationAny | null;\n  singleTheme?: Theme | undefined;\n  themesToLoad: Theme[];\n}\n\n/**\n * Determines theme configuration and returns the resolved theme with metadata\n * @param themeInput - The theme input, either as a string name or theme object\n * @returns Object containing:\n *   - isMultiTheme: If theme input is a multi-theme configuration\n *   - themeId: Theme reference identifier\n *   - multiTheme: The multi-theme config if it exists\n *   - singleTheme: The single theme if it exists\n *   - themesToLoad: The themes to load when creating the highlighter\n */\nexport function resolveTheme(themeInput: Theme | Themes): ThemeResult {\n  const isTextmateTheme =\n    typeof themeInput === 'object' &&\n    'tokenColors' in themeInput &&\n    Array.isArray(themeInput.tokenColors);\n\n  // Assume non textmate objects are multi theme configs\n  const isMultiThemeConfig =\n    typeof themeInput === 'object' &&\n    themeInput !== null &&\n    !isTextmateTheme;\n\n  const validMultiThemeObj =\n    typeof themeInput === 'object' &&\n    themeInput !== null &&\n    !isTextmateTheme &&\n    Object.entries(themeInput).some(\n      ([key, value]) =>\n        key &&\n        value &&\n        key.trim() !== '' &&\n        value !== '' &&\n        (typeof value === 'string' || isTextmateTheme)\n    );\n\n  if (isMultiThemeConfig) {\n    const themeId = validMultiThemeObj\n      ? `multi-${Object.values(themeInput)\n          .map(\n            (theme) =>\n              (typeof theme === 'string' ? theme : theme?.name) ||\n              'custom'\n          )\n          .sort()\n          .join('-')}`\n      : 'multi-default';\n\n    // If config is invalid, return null to handle fallback in `buildShikiOptions()`\n    return {\n      isMultiTheme: true,\n      themeId,\n      multiTheme: validMultiThemeObj ? themeInput : null,\n      themesToLoad: validMultiThemeObj ? Object.values(themeInput) : [],\n    };\n  }\n\n  return {\n    isMultiTheme: false,\n    themeId:\n      typeof themeInput === 'string'\n        ? themeInput\n        : themeInput?.name || 'custom',\n    singleTheme: themeInput,\n    themesToLoad: [themeInput],\n  };\n}\n","\n          export default function styleInject(css, { insertAt } = {}) {\n            if (!css || typeof document === 'undefined') return\n          \n            const head = document.head || document.getElementsByTagName('head')[0]\n            const style = document.createElement('style')\n            style.type = 'text/css'\n          \n            if (insertAt === 'top') {\n              if (head.firstChild) {\n                head.insertBefore(style, head.firstChild)\n              } else {\n                head.appendChild(style)\n              }\n            } else {\n              head.appendChild(style)\n            }\n          \n            if (style.styleSheet) {\n              style.styleSheet.cssText = css\n            } else {\n              style.appendChild(document.createTextNode(css))\n            }\n          }\n          ","import styleInject from '#style-inject';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\")","import './styles.css';\nimport { clsx } from 'clsx';\nimport { resolveLanguage } from './resolvers';\n\nimport type {\n  HighlighterOptions,\n  Language,\n  Theme,\n  Themes,\n} from './types';\n\n/**\n * Props for the ShikiHighlighter component\n */\nexport interface ShikiHighlighterProps extends HighlighterOptions {\n  /**\n   * The programming language for syntax highlighting\n   * Supports custom textmate grammar objects in addition to Shiki's bundled languages\n   * @see https://shiki.style/languages\n   */\n  language: Language;\n\n  /**\n   * The code to be highlighted\n   */\n  children: string;\n\n  /**\n   * The color theme or themes for syntax highlighting\n   * Supports single, dual, or multiple themes\n   * Supports custom textmate theme objects in addition to Shiki's bundled themes\n   *\n   * @example\n   * theme='github-dark' // single theme\n   * theme={{ light: 'github-light', dark: 'github-dark' }} // multi-theme\n   *\n   * @see https://shiki.style/themes\n   */\n  theme: Theme | Themes;\n\n  /**\n   * Controls the application of default styles to the generated code blocks\n   *\n   * Default styles include padding, overflow handling, border radius, language label styling, and font settings\n   * @default true\n   */\n  addDefaultStyles?: boolean;\n\n  /**\n   * Add custom inline styles to the generated code block\n   */\n  style?: React.CSSProperties;\n\n  /**\n   * Add custom inline styles to the language label\n   */\n  langStyle?: React.CSSProperties;\n\n  /**\n   * Add custom CSS class names to the generated code block\n   */\n  className?: string;\n\n  /**\n   * Add custom CSS class names to the language label\n   */\n  langClassName?: string;\n\n  /**\n   * Whether to show the language label\n   * @default true\n   */\n  showLanguage?: boolean;\n\n  /**\n   * The HTML element that wraps the generated code block.\n   * @default 'pre'\n   */\n  as?: React.ElementType;\n}\n\n/**\n * Base ShikiHighlighter component factory.\n * This creates a component that uses the provided hook implementation.\n */\nexport const createShikiHighlighterComponent = (\n  useShikiHighlighterImpl: (\n    code: string,\n    lang: Language,\n    themeInput: Theme | Themes,\n    options?: HighlighterOptions\n  ) => React.ReactNode\n) => {\n  return ({\n    language,\n    theme,\n    delay,\n    transformers,\n    defaultColor,\n    cssVariablePrefix,\n    addDefaultStyles = true,\n    style,\n    langStyle,\n    className,\n    langClassName,\n    showLanguage = true,\n    children: code,\n    as: Element = 'pre',\n    customLanguages,\n    ...shikiOptions\n  }: ShikiHighlighterProps): React.ReactElement => {\n    const options: HighlighterOptions = {\n      delay,\n      transformers,\n      customLanguages,\n      defaultColor,\n      cssVariablePrefix,\n      ...shikiOptions,\n    };\n\n    // Use resolveLanguage to get displayLanguageId directly\n    const { displayLanguageId } = resolveLanguage(\n      language,\n      customLanguages\n    );\n\n    const highlightedCode = useShikiHighlighterImpl(\n      code,\n      language,\n      theme,\n      options\n    );\n\n    return (\n      <Element\n        data-testid=\"shiki-container\"\n        className={clsx(\n          'relative',\n          'not-prose',\n          addDefaultStyles && 'defaultStyles',\n          className\n        )}\n        style={style}\n        id=\"shiki-container\"\n      >\n        {showLanguage && displayLanguageId ? (\n          <span\n            className={clsx('languageLabel', langClassName)}\n            style={langStyle}\n            id=\"language-label\"\n          >\n            {displayLanguageId}\n          </span>\n        ) : null}\n        {highlightedCode}\n      </Element>\n    );\n  };\n};\n"],"mappings":"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","names":["jsx","jsxs"]}

package/dist/component-D73l5tW-.d.ts

@@ -0,0 +1,209 @@
+import { Highlighter, HighlighterCore, CodeOptionsMultipleThemes, BundledTheme, CodeToHastOptions, StringLiteralUnion, BundledLanguage, SpecialLanguage, ThemeRegistrationAny } from 'shiki';
+import { ReactNode } from 'react';
+import { LanguageRegistration as LanguageRegistration$1 } from 'shiki/core';
+import { Element as Element$1 } from 'hast';
+
+/**
+ * Attribution:
+ *  This code was written by github:hippotastic in expressive-code/expressive-code
+ *  https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-shiki/src/languages.ts
+ */
+
+type IShikiRawRepository = LanguageRegistration$1['repository'];
+type IShikiRawRule = IShikiRawRepository[keyof IShikiRawRepository];
+type ILocation = IShikiRawRepository['$vscodeTextmateLocation'];
+interface ILocatable {
+    readonly $vscodeTextmateLocation?: ILocation;
+}
+interface IRawRepositoryMap {
+    [name: string]: IRawRule;
+}
+type IRawRepository = IRawRepositoryMap & ILocatable;
+interface IRawCapturesMap {
+    [captureId: string]: IRawRule;
+}
+type IRawCaptures = IRawCapturesMap & ILocatable;
+interface IRawRule extends Omit<IShikiRawRule, 'applyEndPatternLast' | 'captures' | 'patterns'> {
+    readonly applyEndPatternLast?: boolean | number;
+    readonly captures?: IRawCaptures;
+    readonly comment?: string;
+    readonly patterns?: IRawRule[];
+}
+/**
+ * A less strict version of Shiki's `LanguageRegistration` interface that aligns better with
+ * actual grammars found in the wild. This version attempts to reduce the amount
+ * of type errors that would occur when importing and adding external grammars,
+ * while still being supported by the language processing code.
+ */
+interface LanguageRegistration extends Omit<LanguageRegistration$1, 'repository'> {
+    repository?: IRawRepository;
+}
+
+/**
+ * HTML Element, use to type `node` from react-markdown
+ */
+type Element = Element$1;
+/**
+ * A Shiki BundledLanguage or a custom textmate grammar object
+ * @see https://shiki.style/languages
+ */
+type Language = LanguageRegistration | StringLiteralUnion<BundledLanguage | SpecialLanguage> | undefined;
+/**
+ * A Shiki BundledTheme or a custom textmate theme object
+ * @see https://shiki.style/themes
+ */
+type Theme = ThemeRegistrationAny | StringLiteralUnion<BundledTheme>;
+/**
+ * A map of color names to themes.
+ * This allows you to specify multiple themes for the generated code.
+ * Supports custom textmate theme objects in addition to Shiki's bundled themes
+ *
+ * @example
+ * ```ts
+ * useShikiHighlighter(code, language, {
+ *   light: 'github-light',
+ *   dark: 'github-dark',
+ *   dim: 'github-dark-dimmed'
+ * })
+ * ```
+ *
+ * @see https://shiki.style/guide/dual-themes
+ */
+type Themes = {
+    [key: string]: ThemeRegistrationAny | StringLiteralUnion<BundledTheme>;
+};
+/**
+ * Configuration options specific to react-shiki
+ */
+interface ReactShikiOptions {
+    /**
+     * Minimum time (in milliseconds) between highlight operations.
+     * @default undefined (no throttling)
+     */
+    delay?: number;
+    /**
+     * Custom textmate grammars to be preloaded for highlighting.
+     */
+    customLanguages?: LanguageRegistration | LanguageRegistration[];
+    /**
+     * Custom Shiki highlighter instance to use instead of the default one.
+     * Keeps bundle small by only importing specified languages/themes.
+     * Can be either a Highlighter or HighlighterCore instance.
+     *
+     * @example
+     * import {
+     *   createHighlighterCore,
+     *   createOnigurumaEngine,
+     *   useShikiHighlighter
+     * } from "react-shiki";
+     *
+     * const customHighlighter = await createHighlighterCore({
+     *   themes: [
+     *     import('@shikijs/themes/nord')
+     *   ],
+     *   langs: [
+     *     import('@shikijs/langs/javascript'),
+     *     import('@shikijs/langs/typescript')
+     *   ],
+     *   engine: createOnigurumaEngine(import('shiki/wasm'))
+     * });
+     *
+     * const highlightedCode = useShikiHighlighter(code, language, theme, {
+     *   highlighter: customHighlighter,
+     * });
+     */
+    highlighter?: Highlighter | HighlighterCore;
+}
+/**
+ * Configuration options for the syntax highlighter
+ * Extends CodeToHastOptions to allow passing any Shiki options directly
+ */
+interface HighlighterOptions extends ReactShikiOptions, Pick<CodeOptionsMultipleThemes<BundledTheme>, 'defaultColor' | 'cssVariablePrefix'>, Omit<CodeToHastOptions, 'lang' | 'theme' | 'themes'> {
+}
+/**
+ * Public API signature for the useShikiHighlighter hook.
+ * This ensures all entry points have consistent signatures.
+ */
+type UseShikiHighlighter = (code: string, lang: Language, themeInput: Theme | Themes, options?: HighlighterOptions) => ReactNode;
+
+/**
+ * Rehype plugin to add an 'inline' property to <code> elements
+ * Sets 'inline' property to true if the <code> is not within a <pre> tag
+ *
+ * Pass this plugin to the `rehypePlugins` prop of react-markdown
+ * You can then access `inline` as a prop in components passed to react-markdown
+ *
+ * @example
+ * <ReactMarkdown rehypePlugins={[rehypeInlineCodeProperty]} />
+ */
+declare function rehypeInlineCodeProperty(): (tree: any) => undefined;
+/**
+ * Function to determine if code is inline based on the presence of line breaks
+ *
+ * @example
+ * const isInline = node && isInlineCode(node: Element)
+ */
+declare const isInlineCode: (node: Element) => boolean;
+
+/**
+ * Props for the ShikiHighlighter component
+ */
+interface ShikiHighlighterProps extends HighlighterOptions {
+    /**
+     * The programming language for syntax highlighting
+     * Supports custom textmate grammar objects in addition to Shiki's bundled languages
+     * @see https://shiki.style/languages
+     */
+    language: Language;
+    /**
+     * The code to be highlighted
+     */
+    children: string;
+    /**
+     * The color theme or themes for syntax highlighting
+     * Supports single, dual, or multiple themes
+     * Supports custom textmate theme objects in addition to Shiki's bundled themes
+     *
+     * @example
+     * theme='github-dark' // single theme
+     * theme={{ light: 'github-light', dark: 'github-dark' }} // multi-theme
+     *
+     * @see https://shiki.style/themes
+     */
+    theme: Theme | Themes;
+    /**
+     * Controls the application of default styles to the generated code blocks
+     *
+     * Default styles include padding, overflow handling, border radius, language label styling, and font settings
+     * @default true
+     */
+    addDefaultStyles?: boolean;
+    /**
+     * Add custom inline styles to the generated code block
+     */
+    style?: React.CSSProperties;
+    /**
+     * Add custom inline styles to the language label
+     */
+    langStyle?: React.CSSProperties;
+    /**
+     * Add custom CSS class names to the generated code block
+     */
+    className?: string;
+    /**
+     * Add custom CSS class names to the language label
+     */
+    langClassName?: string;
+    /**
+     * Whether to show the language label
+     * @default true
+     */
+    showLanguage?: boolean;
+    /**
+     * The HTML element that wraps the generated code block.
+     * @default 'pre'
+     */
+    as?: React.ElementType;
+}
+
+export { type Element as E, type HighlighterOptions as H, type Language as L, type ShikiHighlighterProps as S, type Theme as T, type UseShikiHighlighter as U, type Themes as a, isInlineCode as i, rehypeInlineCodeProperty as r };

package/dist/core.d.ts

@@ -0,0 +1,38 @@
+import { S as ShikiHighlighterProps, U as UseShikiHighlighter } from './component-D73l5tW-.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-D73l5tW-.js';
+export { createHighlighterCore } from 'shiki/core';
+export { createOnigurumaEngine } from 'shiki/engine/oniguruma';
+export { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
+import 'shiki';
+import 'react';
+import 'hast';
+
+/**
+ * A React hook that provides syntax highlighting using Shiki with a custom highlighter.
+ * Requires a highlighter to be provided in options for minimal bundle size.
+ *
+ * @example
+ * ```ts
+ * import { createHighlighterCore, createOnigurumaEngine } from 'react-shiki/core';
+ *
+ * const highlighter = await createHighlighterCore({
+ *   themes: [import('@shikijs/themes/nord')],
+ *   langs: [import('@shikijs/langs/typescript')],
+ *   engine: createOnigurumaEngine(import('shiki/wasm'))
+ * });
+ *
+ * const code = useShikiHighlighter(code, 'typescript', 'nord', { highlighter });
+ * ```
+ *
+ * For plug-and-play usage, consider:
+ * - `react-shiki` for full shiki bundle (~6.4MB minified, 1.2MB gzipped)
+ * - `react-shiki/web` for smaller shiki web bundle (~3.8MB minified, 695KB gzipped)
+ */
+declare const useShikiHighlighter: UseShikiHighlighter;
+/**
+ * ShikiHighlighter component using a custom highlighter.
+ * Requires a highlighter to be provided.
+ */
+declare const ShikiHighlighter: ({ language, theme, delay, transformers, defaultColor, cssVariablePrefix, addDefaultStyles, style, langStyle, className, langClassName, showLanguage, children: code, as: Element, customLanguages, ...shikiOptions }: ShikiHighlighterProps) => React.ReactElement;
+
+export { ShikiHighlighter, ShikiHighlighterProps, UseShikiHighlighter, ShikiHighlighter as default, useShikiHighlighter };

package/dist/core.js

@@ -0,0 +1,43 @@
+import {
+  createShikiHighlighterComponent,
+  isInlineCode,
+  rehypeInlineCodeProperty,
+  useShikiHighlighter
+} from "./chunk-XAMWR6XF.js";
+
+// src/bundles/core.ts
+function validateCoreHighlighter(highlighter) {
+  if (!highlighter) {
+    throw new Error(
+      "react-shiki/core requires a custom highlighter. Use createHighlighterCore() from react-shiki or switch to react-shiki for plug-and-play usage."
+    );
+  }
+  return highlighter;
+}
+
+// src/core.ts
+import { createHighlighterCore } from "shiki/core";
+import { createOnigurumaEngine } from "shiki/engine/oniguruma";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+var useShikiHighlighter2 = (code, lang, themeInput, options = {}) => {
+  const highlighter = validateCoreHighlighter(options.highlighter);
+  return useShikiHighlighter(code, lang, themeInput, async () => highlighter, {
+    ...options,
+    highlighter
+  });
+};
+var ShikiHighlighter = createShikiHighlighterComponent(
+  useShikiHighlighter2
+);
+var core_default = ShikiHighlighter;
+export {
+  ShikiHighlighter,
+  createHighlighterCore,
+  createJavaScriptRegexEngine,
+  createOnigurumaEngine,
+  core_default as default,
+  isInlineCode,
+  rehypeInlineCodeProperty,
+  useShikiHighlighter2 as useShikiHighlighter
+};
+//# sourceMappingURL=core.js.map

package/dist/core.js.map

@@ -0,0 +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/utils';\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 { createJavaScriptRegexEngine } from 'shiki/engine/javascript';\n\n/**\n * A React hook that provides syntax highlighting using Shiki with a custom highlighter.\n * Requires a highlighter to be provided in options for minimal bundle size.\n *\n * @example\n * ```ts\n * import { createHighlighterCore, createOnigurumaEngine } from 'react-shiki/core';\n *\n * const highlighter = await createHighlighterCore({\n *   themes: [import('@shikijs/themes/nord')],\n *   langs: [import('@shikijs/langs/typescript')],\n *   engine: createOnigurumaEngine(import('shiki/wasm'))\n * });\n *\n * const code = useShikiHighlighter(code, 'typescript', 'nord', { highlighter });\n * ```\n *\n * For plug-and-play usage, consider:\n * - `react-shiki` for full shiki bundle (~6.4MB minified, 1.2MB gzipped)\n * - `react-shiki/web` for smaller shiki web bundle (~3.8MB minified, 695KB gzipped)\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(code, lang, themeInput, async () => highlighter, {\n    ...options,\n    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,SAAS,mCAAmC;AAuBrC,IAAMA,uBAA2C,CACtD,MACA,MACA,YACA,UAAU,CAAC,MACR;AAEH,QAAM,cAAc,wBAAwB,QAAQ,WAAW;AAE/D,SAAO,oBAAY,MAAM,MAAM,YAAY,YAAY,aAAa;AAAA,IAClE,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH;AAMO,IAAM,mBAAmB;AAAA,EAC9BA;AACF;AACA,IAAO,eAAQ;","names":["useShikiHighlighter"]}

package/dist/index.d.ts

@@ -1,236 +1,25 @@
-import { ReactNode } from 'react';
-import { LanguageRegistration as LanguageRegistration$1, StringLiteralUnion, BundledLanguage, SpecialLanguage, ThemeRegistrationAny, BundledTheme, CodeOptionsMultipleThemes, CodeToHastOptionsCommon } from 'shiki';
-import { Element as Element$1 } from 'hast';
+import { S as ShikiHighlighterProps, U as UseShikiHighlighter } from './component-D73l5tW-.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-D73l5tW-.js';
+import 'shiki';
+import 'react';
+import 'shiki/core';
+import 'hast';
 
 /**
- * Attribution:
- *  This code was written by github:hippotastic in expressive-code/expressive-code
- *  https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-shiki/src/languages.ts
- */
-
-type IShikiRawRepository = LanguageRegistration$1['repository'];
-type IShikiRawRule = IShikiRawRepository[keyof IShikiRawRepository];
-type ILocation = IShikiRawRepository['$vscodeTextmateLocation'];
-interface ILocatable {
-    readonly $vscodeTextmateLocation?: ILocation;
-}
-interface IRawRepositoryMap {
-    [name: string]: IRawRule;
-}
-type IRawRepository = IRawRepositoryMap & ILocatable;
-interface IRawCapturesMap {
-    [captureId: string]: IRawRule;
-}
-type IRawCaptures = IRawCapturesMap & ILocatable;
-interface IRawRule extends Omit<IShikiRawRule, 'applyEndPatternLast' | 'captures' | 'patterns'> {
-    readonly applyEndPatternLast?: boolean | number;
-    readonly captures?: IRawCaptures;
-    readonly comment?: string;
-    readonly patterns?: IRawRule[];
-}
-/**
- * A less strict version of Shiki's `LanguageRegistration` interface that aligns better with
- * actual grammars found in the wild. This version attempts to reduce the amount
- * of type errors that would occur when importing and adding external grammars,
- * while still being supported by the language processing code.
- */
-interface LanguageRegistration extends Omit<LanguageRegistration$1, 'repository'> {
-    repository?: IRawRepository;
-}
-
-/**
- * HTML Element, use to type `node` from react-markdown
- */
-type Element = Element$1;
-/**
- * A Shiki BundledLanguage or a custom textmate grammar object
- * @see https://shiki.style/languages
- */
-type Language = LanguageRegistration | StringLiteralUnion<BundledLanguage | SpecialLanguage> | undefined;
-/**
- * A Shiki BundledTheme or a custom textmate theme object
- * @see https://shiki.style/themes
- */
-type Theme = ThemeRegistrationAny | StringLiteralUnion<BundledTheme>;
-/**
- * A map of color names to themes.
- * This allows you to specify multiple themes for the generated code.
- * Supports custom textmate theme objects in addition to Shiki's bundled themes
- *
- * @example
- * ```ts
- * useShikiHighlighter(code, language, {
- *   light: 'github-light',
- *   dark: 'github-dark',
- *   dim: 'github-dark-dimmed'
- * })
- * ```
- *
- * @see https://shiki.style/guide/dual-themes
- */
-type Themes = {
-    [key: string]: ThemeRegistrationAny | StringLiteralUnion<BundledTheme>;
-};
-/**
- * Configuration options specific to react-shiki
- */
-interface ReactShikiOptions {
-    /**
-     * Minimum time (in milliseconds) between highlight operations.
-     * @default undefined (no throttling)
-     */
-    delay?: number;
-    /**
-     * Custom textmate grammars to be preloaded for highlighting.
-     */
-    customLanguages?: LanguageRegistration | LanguageRegistration[];
-}
-/**
- * Configuration options for the syntax highlighter
- */
-interface HighlighterOptions extends ReactShikiOptions, Pick<CodeOptionsMultipleThemes<BundledTheme>, 'defaultColor' | 'cssVariablePrefix'>, Pick<CodeToHastOptionsCommon, 'transformers'> {
-}
-
-/**
- * A React hook that provides syntax highlighting using Shiki.
- * Supports single theme and multi-theme highlighting, custom themes
- * and languages, custom transformers, and optional throttling.
- *
- * ```ts
- * // Basic Usage
- * const highlightedCode = useShikiHighlighter( code, 'typescript', 'github-dark');
- * ```
+ * A React hook that provides syntax highlighting using Shiki with the full bundle.
+ * Includes all languages and themes for maximum compatibility.
  *
- * ```ts
- * // Custom Languages, Transformers, and Delay
- * const highlightedCode = useShikiHighlighter(code, language, theme, {
- *   transformers: [customTransformer],
- *   delay: 150
- *   customLanguages: ['bosque', 'mcfunction']
- * });
- * ```
+ * Bundle size: ~6.4MB minified (1.2MB gzipped)
  *
- * ```ts
- * // Multiple Themes, Custom Languages, Delay, and Custom Transformers
- * const highlightedCode = useShikiHighlighter(
- *   code,
- *   language,
- *   {
- *     light: 'github-light',
- *     dark: 'github-dark',
- *     dim: 'github-dark-dimmed'
- *   },
- *   {
- *     delay: 150,
- *     defaultColor: 'dim',
- *     transformers: [customTransformer],
- *     customLanguages: ['bosque', 'mcfunction']
- *   }
- * );
- * ```
+ * For smaller bundles, consider:
+ * - `react-shiki/web` for smaller shiki web bundle (~3.8MB minified, 695KB gzipped)
+ * - `react-shiki/core` for custom fine-grained bundle
  */
-declare const useShikiHighlighter: (code: string, lang: Language, themeInput: Theme | Themes, options?: HighlighterOptions) => ReactNode;
-
+declare const useShikiHighlighter: UseShikiHighlighter;
 /**
- * Rehype plugin to add an 'inline' property to <code> elements
- * Sets 'inline' property to true if the <code> is not within a <pre> tag
- *
- * Pass this plugin to the `rehypePlugins` prop of react-markdown
- * You can then access `inline` as a prop in components passed to react-markdown
- *
- * @example
- * <ReactMarkdown rehypePlugins={[rehypeInlineCodeProperty]} />
- */
-declare function rehypeInlineCodeProperty(): (tree: any) => undefined;
-/**
- * Function to determine if code is inline based on the presence of line breaks
- *
- * @example
- * const isInline = node && isInlineCode(node: Element)
- */
-declare const isInlineCode: (node: Element) => boolean;
-
-/**
- * Props for the ShikiHighlighter component
- */
-interface ShikiHighlighterProps extends HighlighterOptions {
-    /**
-     * The programming language for syntax highlighting
-     * Supports custom textmate grammar objects in addition to Shiki's bundled languages
-     * @see https://shiki.style/languages
-     */
-    language: Language;
-    /**
-     * The code to be highlighted
-     */
-    children: string;
-    /**
-     * The color theme or themes for syntax highlighting
-     * Supports single, dual, or multiple themes
-     * Supports custom textmate theme objects in addition to Shiki's bundled themes
-     *
-     * @example
-     * theme='github-dark' // single theme
-     * theme={{ light: 'github-light', dark: 'github-dark' }} // multi-theme
-     *
-     * @see https://shiki.style/themes
-     */
-    theme: Theme | Themes;
-    /**
-     * Controls the application of default styles to the generated code blocks
-     *
-     * Default styles include padding, overflow handling, border radius, language label styling, and font settings
-     * @default true
-     */
-    addDefaultStyles?: boolean;
-    /**
-     * Add custom inline styles to the generated code block
-     */
-    style?: React.CSSProperties;
-    /**
-     * Add custom inline styles to the language label
-     */
-    langStyle?: React.CSSProperties;
-    /**
-     * Add custom CSS class names to the generated code block
-     */
-    className?: string;
-    /**
-     * Add custom CSS class names to the language label
-     */
-    langClassName?: string;
-    /**
-     * Whether to show the language label
-     * @default true
-     */
-    showLanguage?: boolean;
-    /**
-     * The HTML element that wraps the generated code block.
-     * @default 'pre'
-     */
-    as?: React.ElementType;
-}
-/**
- * ShikiHighlighter is a React component that provides syntax highlighting for code snippets.
- * It uses Shiki to render beautiful, theme-based syntax highlighting with optimized performance.
- *
- * @example
- * ```tsx
- * <ShikiHighlighter
- *   language="typescript"
- *   theme="github-dark"
- *   delay={100}
- *   transformers={[customTransformer]}
- *   addDefaultStyles={false}
- *   className="code-block"
- *   langClassName="lang-label"
- *   langStyle={{ color: 'blue' }},
- *   style={{ fontSize: '1.2rem' }}
- * >
- *   {code}
- * </ShikiHighlighter>
- * ```
+ * ShikiHighlighter component using the full bundle.
+ * Includes all languages and themes for maximum compatibility.
  */
-declare const ShikiHighlighter: ({ language, theme, delay, transformers, defaultColor, cssVariablePrefix, addDefaultStyles, style, langStyle, className, langClassName, showLanguage, children: code, as: Element, customLanguages, }: ShikiHighlighterProps) => React.ReactElement;
+declare const ShikiHighlighter: ({ language, theme, delay, transformers, defaultColor, cssVariablePrefix, addDefaultStyles, style, langStyle, className, langClassName, showLanguage, children: code, as: Element, customLanguages, ...shikiOptions }: ShikiHighlighterProps) => React.ReactElement;
 
-export { type Element, type HighlighterOptions, type Language, type ShikiHighlighterProps, type Theme, type Themes, ShikiHighlighter as default, isInlineCode, rehypeInlineCodeProperty, useShikiHighlighter };
+export { ShikiHighlighter, ShikiHighlighterProps, UseShikiHighlighter, ShikiHighlighter as default, useShikiHighlighter };

package/dist/index.js

@@ -1,4 +1,48 @@
-import{useEffect as z,useMemo as b,useRef as D,useState as F}from"react";import B from"html-react-parser";import{getSingletonHighlighter as V}from"shiki";import{visit as w}from"unist-util-visit";import{bundledLanguages as M,isSpecialLang as A}from"shiki";function N(){return e=>{w(e,"element",(i,o,t)=>{i.tagName==="code"&&t.tagName!=="pre"&&(i.properties.inline=!0)})}}var P=e=>!(e.children||[]).filter(o=>o.type==="text").map(o=>o.value).join("").includes(`
-`),k={pre(e){return"properties"in e&&(e.properties.tabindex="-1"),e}},R=(e,i,o)=>{let t=Date.now();clearTimeout(i.current.timeoutId);let r=Math.max(0,i.current.nextAllowedTime-t);i.current.timeoutId=setTimeout(()=>{e().catch(console.error),i.current.nextAllowedTime=t+o},r)},p=(e,i=[])=>{let o=new Set(Object.keys(M).map(a=>a.toLowerCase()));if(e==null||typeof e=="string"&&!e.trim())return{languageId:"plaintext",displayLanguageId:"plaintext",langsToLoad:void 0};if(typeof e=="object")return{languageId:e.name,displayLanguageId:e.name||null,langsToLoad:e};let t=e.toLowerCase(),r=a=>a?.toLowerCase()===t,n=i.find(a=>r(a.name)||r(a.scopeName)||r(a.scopeName?.split(".").pop())||a.aliases?.some(r)||a.fileTypes?.some(r));return n?{languageId:n.name||e,displayLanguageId:e,langsToLoad:n}:(o.has(t)||A(t))&&!n?{languageId:e,displayLanguageId:e,langsToLoad:e}:{languageId:"plaintext",displayLanguageId:e,langsToLoad:void 0}};function v(e){let i=typeof e=="object"&&"tokenColors"in e&&Array.isArray(e.tokenColors),o=typeof e=="object"&&e!==null&&!i,t=typeof e=="object"&&e!==null&&!i&&Object.entries(e).some(([r,n])=>r&&n&&r.trim()!==""&&n!==""&&(typeof n=="string"||i));return o?{isMultiTheme:!0,themeId:t?`multi-${Object.values(e).map(n=>(typeof n=="string"?n:n?.name)||"custom").sort().join("-")}`:"multi-default",multiTheme:t?e:null,themesToLoad:t?Object.values(e):[]}:{isMultiTheme:!1,themeId:typeof e=="string"?e:e?.name||"custom",singleTheme:e,themesToLoad:[e]}}var I={light:"github-light",dark:"github-dark"},H=(e,i,o,t={})=>{let[r,n]=F(null),a=t.customLanguages?Array.isArray(t.customLanguages)?t.customLanguages:[t.customLanguages]:[],g=a.map(l=>l.name||"").sort().join("-"),m=b(()=>[k,...t.transformers||[]],[t.transformers]),{isMultiTheme:c,themeId:f,multiTheme:T,singleTheme:y,themesToLoad:L}=b(()=>v(o),[o]),{languageId:s,langsToLoad:x}=b(()=>p(i,a),[i,g]),d=D({nextAllowedTime:0,timeoutId:void 0}),u=()=>{let{defaultColor:l,cssVariablePrefix:h}=t,S={lang:s,transformers:m},C=c?{themes:T||I,defaultColor:l,cssVariablePrefix:h}:{theme:y||I.dark};return{...S,...C}};return z(()=>{let l=!0,h=async()=>{if(!s)return;let S=await V({langs:[x],themes:L}),C=u(),E=S.codeToHtml(e,C);l&&n(B(E))};return t.delay?R(h,d,t.delay):h().catch(console.error),()=>{l=!1,clearTimeout(d.current.timeoutId)}},[e,s,f,g,m,t.delay,t.defaultColor,t.cssVariablePrefix]),r};function O(e,{insertAt:i}={}){if(!e||typeof document>"u")return;let o=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css",i==="top"&&o.firstChild?o.insertBefore(t,o.firstChild):o.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))}O(`.relative{position:relative}.defaultStyles pre{overflow:auto;border-radius:.5rem;padding:1.25rem 1.5rem}.languageLabel{position:absolute;right:.75rem;top:.5rem;font-family:monospace;font-size:.75rem;letter-spacing:-.05em;color:#6b7280d9}
-`);import{clsx as j}from"clsx";import{jsx as U,jsxs as $}from"react/jsx-runtime";var _=({language:e,theme:i,delay:o,transformers:t,defaultColor:r,cssVariablePrefix:n,addDefaultStyles:a=!0,style:g,langStyle:m,className:c,langClassName:f,showLanguage:T=!0,children:y,as:L="pre",customLanguages:s})=>{let x={delay:o,transformers:t,customLanguages:s,defaultColor:r,cssVariablePrefix:n},d=s?Array.isArray(s)?s:[s]:[],{displayLanguageId:u}=p(e,d),l=H(y,e,i,x);return $(L,{"data-testid":"shiki-container",className:j("relative","not-prose",a&&"defaultStyles",c),style:g,id:"shiki-container",children:[T&&u?U("span",{className:j("languageLabel",f),style:m,id:"language-label",children:u}):null,l]})};export{_ as default,P as isInlineCode,N as rehypeInlineCodeProperty,H as useShikiHighlighter};
+import {
+  createShikiHighlighterComponent,
+  isInlineCode,
+  rehypeInlineCodeProperty,
+  useShikiHighlighter
+} from "./chunk-XAMWR6XF.js";
+
+// src/bundles/full.ts
+import { getSingletonHighlighter } from "shiki";
+async function createFullHighlighter(langsToLoad, themesToLoad) {
+  try {
+    return await getSingletonHighlighter({
+      langs: [langsToLoad],
+      themes: themesToLoad
+    });
+  } catch (error) {
+    if (error instanceof Error && error.message.includes("Language")) {
+      return await getSingletonHighlighter({
+        langs: ["plaintext"],
+        themes: themesToLoad
+      });
+    }
+    throw error;
+  }
+}
+
+// src/index.ts
+var useShikiHighlighter2 = (code, lang, themeInput, options = {}) => {
+  return useShikiHighlighter(
+    code,
+    lang,
+    themeInput,
+    createFullHighlighter,
+    options
+  );
+};
+var ShikiHighlighter = createShikiHighlighterComponent(
+  useShikiHighlighter2
+);
+var src_default = ShikiHighlighter;
+export {
+  ShikiHighlighter,
+  src_default as default,
+  isInlineCode,
+  rehypeInlineCodeProperty,
+  useShikiHighlighter2 as useShikiHighlighter
+};
 //# sourceMappingURL=index.js.map