react-shiki 0.5.1 → 0.5.3

package/README.md

@@ -145,11 +145,14 @@ Pass the component to react-markdown as a code component:
 
 ### Handling Inline Code
 
+Prior to `9.0.0`, `react-markdown` exposed the `inline` prop to `code` 
+components which helped to determine if code is inline. This functionality was 
+removed in `9.0.0`. For your convenience, `react-shiki` provides two 
+ways to replicate this functionality and API.
+
 **Method 1: Using the `isInlineCode` helper:**
 
-There are two ways to check if a code block is inline, both provide the same result:
-`react-shiki` exports `isInlineCode` which parses the `node`
-prop (from `react-markdown`) to determine if the code is inline:
+`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";
@@ -157,6 +160,7 @@ import { isInlineCode, ShikiHighlighter } from "react-shiki";
 const CodeHighlight = ({ className, children, node, ...props }) => {
   const match = className?.match(/language-(\w+)/);
   const language = match ? match[1] : undefined;
+
   const isInline = node ? isInlineCode(node) : undefined;
 
   return !isInline ? (
@@ -171,13 +175,14 @@ const CodeHighlight = ({ className, children, node, ...props }) => {
 };
 ```
 
-**Method 2: Using the rehype plugin:**
+**Method 2: Using the `rehypeInlineCodeProperty` plugin:**
 
-`react-shiki` also exports `rehypeInlineCodeProperty`, a rehype plugin that adds
-an `inline` property to `react-markdown` to determine if code is inline based on
-the presence of a `<pre>` tag as a parent of `<code>`.
+`react-shiki` also exports `rehypeInlineCodeProperty`, a rehype plugin that 
+provides the same API as `react-markdown` prior to `9.0.0`. It reintroduces the 
+`inline` prop which works by checking if `<code>` is nested within a `<pre>` tag, 
+if not, it's considered inline code and the `inline` prop is set to `true`.
 
-It's passed as a rehype plugin to `react-markdown`:
+It's passed as a `rehypePlugin` to `react-markdown`:
 
 ```tsx
 import ReactMarkdown from "react-markdown";
@@ -193,7 +198,7 @@ import { rehypeInlineCodeProperty } from "react-shiki";
 </ReactMarkdown>;
 ```
 
-Now `inline` can be accessed as a prop in the `CodeHighlight` component:
+Now `inline` can be accessed as a prop in the `code` component:
 
 ```tsx
 const CodeHighlight = ({

package/dist/index.d.ts

@@ -1,7 +1,6 @@
-import React, { ReactNode } from 'react';
-import { LanguageRegistration as LanguageRegistration$1, CodeOptionsMultipleThemes, BundledTheme, CodeToHastOptionsCommon, BundledLanguage, SpecialLanguage, ThemeRegistrationAny, StringLiteralUnion } from 'shiki';
-import { Element } from 'hast';
-export { Element } from 'hast';
+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';
 
 /**
  * Attribution:
@@ -39,11 +38,15 @@ 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 = BundledLanguage | LanguageRegistration | SpecialLanguage | (string & {}) | undefined;
+type Language = LanguageRegistration | StringLiteralUnion<BundledLanguage | SpecialLanguage> | undefined;
 /**
  * A Shiki BundledTheme or a custom textmate theme object
  * @see https://shiki.style/themes
@@ -71,7 +74,7 @@ type Themes = {
 /**
  * Configuration options specific to react-shiki
  */
-type ReactShikiOptions = {
+interface ReactShikiOptions {
     /**
      * Minimum time (in milliseconds) between highlight operations.
      * @default undefined (no throttling)
@@ -81,11 +84,71 @@ type ReactShikiOptions = {
      * Custom textmate grammars to be preloaded for highlighting.
      */
     customLanguages?: LanguageRegistration | LanguageRegistration[];
-};
+}
 /**
  * Configuration options for the syntax highlighter
  */
-type HighlighterOptions = ReactShikiOptions & Pick<CodeOptionsMultipleThemes<BundledTheme>, 'defaultColor' | 'cssVariablePrefix'> & Pick<CodeToHastOptionsCommon, 'transformers'>;
+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');
+ * ```
+ *
+ * ```ts
+ * // Custom Languages, Transformers, and Delay
+ * const highlightedCode = useShikiHighlighter(code, language, theme, {
+ *   transformers: [customTransformer],
+ *   delay: 150
+ *   customLanguages: ['bosque', 'mcfunction']
+ * });
+ * ```
+ *
+ * ```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']
+ *   }
+ * );
+ * ```
+ */
+declare const 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
@@ -170,63 +233,4 @@ interface ShikiHighlighterProps extends HighlighterOptions {
  */
 declare const ShikiHighlighter: ({ language, theme, delay, transformers, defaultColor, cssVariablePrefix, addDefaultStyles, style, langStyle, className, langClassName, showLanguage, children: code, as: Element, customLanguages, }: ShikiHighlighterProps) => React.ReactElement;
 
-/**
- * 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');
- * ```
- *
- * ```ts
- * // Custom Languages, Transformers, and Delay
- * const highlightedCode = useShikiHighlighter(code, language, theme, {
- *   transformers: [customTransformer],
- *   delay: 150
- *   customLanguages: ['bosque', 'mcfunction']
- * });
- * ```
- *
- * ```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']
- *   }
- * );
- * ```
- */
-declare const 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;
-
-export { type HighlighterOptions, type Language, type Theme, type Themes, ShikiHighlighter as default, isInlineCode, rehypeInlineCodeProperty, useShikiHighlighter };
+export { type Element, type HighlighterOptions, type Language, type ShikiHighlighterProps, type Theme, type Themes, ShikiHighlighter as default, isInlineCode, rehypeInlineCodeProperty, useShikiHighlighter };

package/dist/index.js

@@ -1,4 +1,4 @@
-function v(e,{insertAt:o}={}){if(!e||typeof document>"u")return;let i=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css",o==="top"&&i.firstChild?i.insertBefore(t,i.firstChild):i.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))}v(`.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 A from"react";import{clsx as N}from"clsx";import{useEffect as V,useMemo as O,useRef as _,useState as U}from"react";import q from"html-react-parser";import{createHighlighter as w,createSingletonShorthands as G}from"shiki";import{visit as $}from"unist-util-visit";import{bundledLanguages as z,isSpecialLang as D}from"shiki";function F(){return e=>{$(e,"element",(o,i,t)=>{o.tagName==="code"&&t.tagName!=="pre"&&(o.properties.inline=!0)})}}var B=e=>!(e.children||[]).filter(i=>i.type==="text").map(i=>i.value).join("").includes(`
-`),k={pre(e){return"properties"in e&&(e.properties.tabindex="-1"),e}},E=(e,o,i)=>{let t=Date.now();clearTimeout(o.current.timeoutId);let r=Math.max(0,o.current.nextAllowedTime-t);o.current.timeoutId=setTimeout(()=>{e().catch(console.error),o.current.nextAllowedTime=t+i},r)},f=(e,o=[])=>{if(e&&typeof e=="object")return{isCustom:!0,languageId:e.name,displayLanguageId:e.name,resolvedLanguage:e};if(typeof e=="string"){let i=e;if(e in z||D(e))return{isCustom:!1,languageId:e,displayLanguageId:i};let t=o.find(r=>r.fileTypes?.includes(e)||r.scopeName?.split(".")[1]===e||r.name?.toLowerCase()===e.toLowerCase());return t?{isCustom:!0,languageId:t.name,displayLanguageId:i,resolvedLanguage:t}:{isCustom:!1,languageId:"plaintext",displayLanguageId:i}}return{isCustom:!1,languageId:"plaintext",displayLanguageId:"plaintext"}};function I(e){let o=typeof e=="object"&&"tokenColors"in e&&Array.isArray(e.tokenColors),i=typeof e=="object"&&e!==null&&!o,t=typeof e=="object"&&e!==null&&!o&&Object.entries(e).some(([r,s])=>r&&s&&r.trim()!==""&&s!==""&&(typeof s=="string"||o));return i?{isMultiTheme:!0,themeId:t?`multi-${Object.values(e).map(s=>(typeof s=="string"?s:s?.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 M={light:"github-light",dark:"github-dark"},J=G(w),j=new Map,K=async(e,o,i)=>{let t=j.get(e);return t||(t=w({langs:[o],themes:i}),j.set(e,t)),t},R=(e,o,i,t={})=>{let[r,s]=U(null),m=t.customLanguages?Array.isArray(t.customLanguages)?t.customLanguages:[t.customLanguages]:[],u=m.map(n=>n.name||"").sort().join("-"),h=O(()=>[k,...t.transformers||[]],[t.transformers]),{isMultiTheme:y,themeId:d,multiTheme:T,singleTheme:L,themesToLoad:C}=O(()=>I(i),[i]),{isCustom:a,languageId:g,resolvedLanguage:c}=O(()=>f(o,m),[o,u]),x=`${g}-${d}`,p=_({nextAllowedTime:0,timeoutId:void 0}),S=()=>{let{defaultColor:n,cssVariablePrefix:l}=t,b={lang:g,transformers:h},H=y?{themes:T||M,defaultColor:n,cssVariablePrefix:l}:{theme:L||M.dark};return{...b,...H}};return V(()=>{let n=!0,l=async()=>{let b=a&&c?await K(x,c,C):J,H=S(),P=await b.codeToHtml(e,H);n&&s(q(P))};return t.delay?E(l,p,t.delay):l().catch(console.error),()=>{n=!1,clearTimeout(p.current.timeoutId)}},[e,g,d,u,h,t.delay,t.defaultColor,t.cssVariablePrefix]),r};var Q=({language:e,theme:o,delay:i,transformers:t,defaultColor:r,cssVariablePrefix:s,addDefaultStyles:m=!0,style:u,langStyle:h,className:y,langClassName:d,showLanguage:T=!0,children:L,as:C="pre",customLanguages:a})=>{let g={delay:i,transformers:t,customLanguages:a,defaultColor:r,cssVariablePrefix:s},c=a?Array.isArray(a)?a:[a]:[],{isCustom:x,languageId:p,displayLanguageId:S,resolvedLanguage:n}=f(e,c),l=R(L,e,o,g);return A.createElement(C,{"data-testid":"shiki-container",className:N("relative","not-prose",m&&"defaultStyles",y),style:u,id:"shiki-container"},T&&e?A.createElement("span",{className:N("languageLabel",d),style:h,id:"language-label"},x?`${n?.scopeName.split(".")[1]}`:S||p):null,l)};export{Q as default,B as isInlineCode,F as rehypeInlineCodeProperty,R as useShikiHighlighter};
+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};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["#style-inject:#style-inject","../src/styles.css","../src/component.tsx","../src/hook.ts","../src/utils.ts"],"sourcesContent":["\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{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}\\n\")","import './styles.css';\n// biome-ignore lint/style/useImportType: React import is needed\nimport React from 'react';\nimport { clsx } from 'clsx';\nimport { useShikiHighlighter } from './hook';\nimport type {\n  Language,\n  Theme,\n  HighlighterOptions,\n  Themes,\n} from './types';\nimport { resolveLanguage } from './utils';\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 * ShikiHighlighter is a React component that provides syntax highlighting for code snippets.\n * It uses Shiki to render beautiful, theme-based syntax highlighting with optimized performance.\n *\n * @example\n * ```tsx\n * <ShikiHighlighter\n *   language=\"typescript\"\n *   theme=\"github-dark\"\n *   delay={100}\n *   transformers={[customTransformer]}\n *   addDefaultStyles={false}\n *   className=\"code-block\"\n *   langClassName=\"lang-label\"\n *   langStyle={{ color: 'blue' }},\n *   style={{ fontSize: '1.2rem' }}\n * >\n *   {code}\n * </ShikiHighlighter>\n * ```\n */\nexport const ShikiHighlighter = ({\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}: ShikiHighlighterProps): React.ReactElement => {\n  const options: HighlighterOptions = {\n    delay,\n    transformers,\n    customLanguages,\n    defaultColor,\n    cssVariablePrefix,\n  };\n\n  const normalizedCustomLanguages = customLanguages\n    ? Array.isArray(customLanguages)\n      ? customLanguages\n      : [customLanguages]\n    : [];\n\n  const { isCustom, languageId, displayLanguageId, resolvedLanguage } =\n    resolveLanguage(language, normalizedCustomLanguages);\n\n  const highlightedCode = useShikiHighlighter(\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 && language ? (\n        <span\n          className={clsx('languageLabel', langClassName)}\n          style={langStyle}\n          id=\"language-label\"\n        >\n          {isCustom\n            ? `${resolvedLanguage?.scopeName.split('.')[1]}`\n            : displayLanguageId || languageId}\n        </span>\n      ) : null}\n      {highlightedCode}\n    </Element>\n  );\n};\n","import {\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react';\n\nimport parse from 'html-react-parser';\n\nimport {\n  createHighlighter,\n  createSingletonShorthands,\n  type Highlighter,\n  type CodeToHastOptions,\n  type CodeOptionsSingleTheme,\n  type CodeOptionsMultipleThemes,\n} from 'shiki';\n\nimport type {\n  LanguageRegistration,\n  ShikiLanguageRegistration,\n} from './extended-types';\n\nimport type {\n  Language,\n  Theme,\n  HighlighterOptions,\n  TimeoutState,\n  Themes,\n} from './types';\n\nimport {\n  removeTabIndexFromPre,\n  throttleHighlighting,\n  resolveLanguage,\n  resolveTheme,\n} from './utils';\n\nconst DEFAULT_THEMES = {\n  light: 'github-light',\n  dark: 'github-dark',\n};\n\n// Use Shiki managed singleton for bundled languages, create and cache a fresh instance for custom languages\nconst bundledHighlighter = createSingletonShorthands(createHighlighter);\nconst customLangHighlighter = new Map<string, Promise<Highlighter>>();\n\nconst getCachedCustomHighlighter = async (\n  cacheKey: string,\n  customLang: LanguageRegistration,\n  themesToLoad: Theme[]\n) => {\n  let instance = customLangHighlighter.get(cacheKey);\n\n  if (!instance) {\n    instance = createHighlighter({\n      langs: [customLang as ShikiLanguageRegistration],\n      themes: themesToLoad,\n    });\n    customLangHighlighter.set(cacheKey, instance);\n  }\n  return instance;\n};\n\n/**\n * A React hook that provides syntax highlighting using Shiki.\n * Supports single theme and multi-theme highlighting, custom themes\n * and languages, custom transformers, and optional throttling.\n *\n * ```ts\n * // Basic Usage\n * const highlightedCode = useShikiHighlighter( code, 'typescript', 'github-dark');\n * ```\n *\n * ```ts\n * // Custom Languages, Transformers, and Delay\n * const highlightedCode = useShikiHighlighter(code, language, theme, {\n *   transformers: [customTransformer],\n *   delay: 150\n *   customLanguages: ['bosque', 'mcfunction']\n * });\n * ```\n *\n * ```ts\n * // Multiple Themes, Custom Languages, Delay, and Custom Transformers\n * const highlightedCode = useShikiHighlighter(\n *   code,\n *   language,\n *   {\n *     light: 'github-light',\n *     dark: 'github-dark',\n *     dim: 'github-dark-dimmed'\n *   },\n *   {\n *     delay: 150,\n *     defaultColor: 'dim',\n *     transformers: [customTransformer],\n *     customLanguages: ['bosque', 'mcfunction']\n *   }\n * );\n * ```\n */\nexport const useShikiHighlighter = (\n  code: string,\n  lang: Language,\n  themeInput: Theme | Themes,\n  options: HighlighterOptions = {}\n) => {\n  const [highlightedCode, setHighlightedCode] =\n    useState<ReactNode | null>(null);\n\n  const normalizedCustomLanguages: LanguageRegistration[] =\n    options.customLanguages\n      ? Array.isArray(options.customLanguages)\n        ? options.customLanguages\n        : [options.customLanguages]\n      : [];\n\n  const customLangId = normalizedCustomLanguages\n    .map((lang) => lang.name || '')\n    .sort()\n    .join('-');\n\n  const transformers = useMemo(() => {\n    return [removeTabIndexFromPre, ...(options.transformers || [])];\n  }, [options.transformers]);\n\n  const { isMultiTheme, themeId, multiTheme, singleTheme, themesToLoad } =\n    useMemo(() => resolveTheme(themeInput), [themeInput]);\n\n  const { isCustom, languageId, resolvedLanguage } = useMemo(\n    () => resolveLanguage(lang, normalizedCustomLanguages),\n    [lang, customLangId]\n  );\n\n  const cacheKey = `${languageId}-${themeId}`;\n\n  const timeoutControl = useRef<TimeoutState>({\n    nextAllowedTime: 0,\n    timeoutId: undefined,\n  });\n\n  const buildShikiOptions = (): CodeToHastOptions => {\n    const { defaultColor, cssVariablePrefix } = options;\n    const commonOptions = { lang: languageId, transformers };\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 { ...commonOptions, ...themeOptions };\n  };\n\n  useEffect(() => {\n    let isMounted = true;\n\n    const highlightCode = async () => {\n      const codeHighlighter =\n        isCustom && resolvedLanguage\n          ? await getCachedCustomHighlighter(\n              cacheKey,\n              resolvedLanguage,\n              themesToLoad\n            )\n          : bundledHighlighter;\n\n      const highlighterOptions: CodeToHastOptions = buildShikiOptions();\n\n      const html = await codeHighlighter.codeToHtml(\n        code,\n        highlighterOptions\n      );\n      if (isMounted) {\n        setHighlightedCode(parse(html));\n      }\n    };\n\n    if (options.delay) {\n      throttleHighlighting(highlightCode, timeoutControl, options.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    languageId,\n    themeId,\n    customLangId,\n    transformers,\n    options.delay,\n    options.defaultColor,\n    options.cssVariablePrefix,\n  ]);\n\n  return highlightedCode;\n};\n","import { visit } from 'unist-util-visit';\nimport { bundledLanguages, isSpecialLang } from 'shiki';\nimport type { ShikiTransformer, ThemeRegistrationAny } from 'shiki';\nimport type { Element } from 'hast';\nimport type { Language, Theme, Themes, TimeoutState } from './types';\nimport type { LanguageRegistration } from './extended-types';\n\n/**\n * Type for the HAST node, use to type `node` from react-markdown\n */\nexport type { Element };\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 * Shiki transformer to remove tabindex from <pre> elements\n *\n * Consider retaining tabindex for WCAG 3.1 compliance, scrollable code blocks should be focusable\n *   https://github.com/shikijs/shiki/issues/428\n *   https://www.w3.org/WAI/standards-guidelines/act/rules/0ssw9k/proposed/\n */\nexport const removeTabIndexFromPre: ShikiTransformer = {\n  pre(node) {\n    if ('properties' in node) {\n      node.properties.tabindex = '-1';\n    }\n    return node;\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.MutableRefObject<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\ntype ResolvedLanguage = {\n  isCustom: boolean;\n  languageId: string;\n  displayLanguageId?: string;\n  resolvedLanguage?: LanguageRegistration;\n};\n\n/**\n * Determines whether a language is custom or built-in, normalizes\n * the language identifier and returns the resolved language with metadata\n *\n * @param lang - The language identifier, either as a string name or language object\n * @param customLanguages - Optional array of custom language definitions\n * @returns Object containing:\n *   - isCustom: Whether the language requires custom highlighting\n *   - languageId: The normalized language identifier\n *   - displayLanguageId: The display name for language label\n *   - resolvedLanguage: The full language definition if custom\n */\nexport const resolveLanguage = (\n  lang: Language,\n  customLanguages: LanguageRegistration[] = []\n): ResolvedLanguage => {\n  // Language is custom but not preloaded\n  if (lang && typeof lang === 'object') {\n    return {\n      isCustom: true,\n      languageId: lang.name,\n      displayLanguageId: lang.name,\n      resolvedLanguage: lang,\n    };\n  }\n\n  // Language is a string\n  if (typeof lang === 'string') {\n    const displayLanguageId = lang;\n\n    // Check if its built-in\n    if (lang in bundledLanguages || isSpecialLang(lang)) {\n      return {\n        isCustom: false,\n        languageId: lang,\n        displayLanguageId,\n      };\n    }\n\n    // Check if it matches a preloaded custom language\n    const customMatch = customLanguages.find(\n      (cl) =>\n        cl.fileTypes?.includes(lang) ||\n        cl.scopeName?.split('.')[1] === lang ||\n        cl.name?.toLowerCase() === lang.toLowerCase()\n    );\n\n    if (customMatch) {\n      return {\n        isCustom: true,\n        languageId: customMatch.name,\n        displayLanguageId,\n        resolvedLanguage: customMatch,\n      };\n    }\n\n    // If unknown, highlight in plaintext but display unknown language\n    return {\n      isCustom: false,\n      languageId: 'plaintext',\n      displayLanguageId,\n    };\n  }\n\n  // Fallback\n  return {\n    isCustom: false,\n    languageId: 'plaintext',\n    displayLanguageId: 'plaintext',\n  };\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): {\n  isMultiTheme: boolean;\n  themeId: Theme;\n  multiTheme?: Themes | ThemeRegistrationAny | null;\n  singleTheme?: Theme | undefined;\n  themesToLoad: Theme[];\n} {\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"],"mappings":"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","names":["styleInject","css","insertAt","head","style","styleInject","React","clsx","useEffect","useMemo","useRef","useState","parse","createHighlighter","createSingletonShorthands","visit","bundledLanguages","isSpecialLang","rehypeInlineCodeProperty","tree","node","_index","parent","isInlineCode","child","removeTabIndexFromPre","throttleHighlighting","performHighlight","timeoutControl","throttleMs","now","delay","resolveLanguage","lang","customLanguages","displayLanguageId","customMatch","cl","resolveTheme","themeInput","isTextmateTheme","isMultiThemeConfig","validMultiThemeObj","key","value","theme","DEFAULT_THEMES","bundledHighlighter","createSingletonShorthands","createHighlighter","customLangHighlighter","getCachedCustomHighlighter","cacheKey","customLang","themesToLoad","instance","useShikiHighlighter","code","lang","themeInput","options","highlightedCode","setHighlightedCode","useState","normalizedCustomLanguages","customLangId","transformers","useMemo","removeTabIndexFromPre","isMultiTheme","themeId","multiTheme","singleTheme","resolveTheme","isCustom","languageId","resolvedLanguage","resolveLanguage","timeoutControl","useRef","buildShikiOptions","defaultColor","cssVariablePrefix","commonOptions","themeOptions","useEffect","isMounted","highlightCode","codeHighlighter","highlighterOptions","html","parse","throttleHighlighting","ShikiHighlighter","language","theme","delay","transformers","defaultColor","cssVariablePrefix","addDefaultStyles","style","langStyle","className","langClassName","showLanguage","code","Element","customLanguages","options","normalizedCustomLanguages","isCustom","languageId","displayLanguageId","resolvedLanguage","resolveLanguage","highlightedCode","useShikiHighlighter","React","clsx"]}
+{"version":3,"sources":["../src/hook.ts","../src/utils.ts","#style-inject:#style-inject","../src/styles.css","../src/component.tsx"],"sourcesContent":["import {\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react';\n\nimport parse from 'html-react-parser';\n\nimport {\n  getSingletonHighlighter,\n  type CodeToHastOptions,\n  type CodeOptionsSingleTheme,\n  type CodeOptionsMultipleThemes,\n} from 'shiki';\n\nimport type {\n  LanguageRegistration,\n  ShikiLanguageRegistration,\n} from './extended-types';\n\nimport type {\n  Language,\n  Theme,\n  HighlighterOptions,\n  TimeoutState,\n  Themes,\n} from './types';\n\nimport {\n  removeTabIndexFromPre,\n  throttleHighlighting,\n  resolveLanguage,\n  resolveTheme,\n} from './utils';\n\nconst DEFAULT_THEMES = {\n  light: 'github-light',\n  dark: 'github-dark',\n};\n\n/**\n * A React hook that provides syntax highlighting using Shiki.\n * Supports single theme and multi-theme highlighting, custom themes\n * and languages, custom transformers, and optional throttling.\n *\n * ```ts\n * // Basic Usage\n * const highlightedCode = useShikiHighlighter( code, 'typescript', 'github-dark');\n * ```\n *\n * ```ts\n * // Custom Languages, Transformers, and Delay\n * const highlightedCode = useShikiHighlighter(code, language, theme, {\n *   transformers: [customTransformer],\n *   delay: 150\n *   customLanguages: ['bosque', 'mcfunction']\n * });\n * ```\n *\n * ```ts\n * // Multiple Themes, Custom Languages, Delay, and Custom Transformers\n * const highlightedCode = useShikiHighlighter(\n *   code,\n *   language,\n *   {\n *     light: 'github-light',\n *     dark: 'github-dark',\n *     dim: 'github-dark-dimmed'\n *   },\n *   {\n *     delay: 150,\n *     defaultColor: 'dim',\n *     transformers: [customTransformer],\n *     customLanguages: ['bosque', 'mcfunction']\n *   }\n * );\n * ```\n */\nexport const useShikiHighlighter = (\n  code: string,\n  lang: Language,\n  themeInput: Theme | Themes,\n  options: HighlighterOptions = {}\n) => {\n  const [highlightedCode, setHighlightedCode] =\n    useState<ReactNode | null>(null);\n\n  const normalizedCustomLanguages: LanguageRegistration[] =\n    options.customLanguages\n      ? Array.isArray(options.customLanguages)\n        ? options.customLanguages\n        : [options.customLanguages]\n      : [];\n\n  const customLangId = normalizedCustomLanguages\n    .map((lang) => lang.name || '')\n    .sort()\n    .join('-');\n\n  const transformers = useMemo(() => {\n    return [removeTabIndexFromPre, ...(options.transformers || [])];\n  }, [options.transformers]);\n\n  const { isMultiTheme, themeId, multiTheme, singleTheme, themesToLoad } =\n    useMemo(() => resolveTheme(themeInput), [themeInput]);\n\n  const { languageId, langsToLoad } = useMemo(\n    () => resolveLanguage(lang, normalizedCustomLanguages),\n    [lang, customLangId]\n  );\n\n  const timeoutControl = useRef<TimeoutState>({\n    nextAllowedTime: 0,\n    timeoutId: undefined,\n  });\n\n  const buildShikiOptions = (): CodeToHastOptions => {\n    const { defaultColor, cssVariablePrefix } = options;\n    const commonOptions = { lang: languageId, transformers };\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 { ...commonOptions, ...themeOptions };\n  };\n\n  useEffect(() => {\n    let isMounted = true;\n\n    const highlightCode = async () => {\n      if (!languageId) return;\n      const highlighter = await getSingletonHighlighter({\n        langs: [langsToLoad as ShikiLanguageRegistration],\n        themes: themesToLoad,\n      });\n\n      const highlighterOptions: CodeToHastOptions = buildShikiOptions();\n\n      const html = highlighter.codeToHtml(code, highlighterOptions);\n\n      if (isMounted) {\n        setHighlightedCode(parse(html));\n      }\n    };\n\n    if (options.delay) {\n      throttleHighlighting(highlightCode, timeoutControl, options.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    languageId,\n    themeId,\n    customLangId,\n    transformers,\n    options.delay,\n    options.defaultColor,\n    options.cssVariablePrefix,\n  ]);\n\n  return highlightedCode;\n};\n","import { visit } from 'unist-util-visit';\nimport { bundledLanguages, isSpecialLang } from 'shiki';\n\nimport type { ShikiTransformer, ThemeRegistrationAny } from 'shiki';\nimport type { LanguageRegistration } from './extended-types';\nimport type {\n  Language,\n  Theme,\n  Themes,\n  TimeoutState,\n  Element,\n} 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 * Shiki transformer to remove tabindex from <pre> elements\n *\n * Consider retaining tabindex for WCAG 3.1 compliance, scrollable code blocks should be focusable\n *   https://github.com/shikijs/shiki/issues/428\n *   https://www.w3.org/WAI/standards-guidelines/act/rules/0ssw9k/proposed/\n */\nexport const removeTabIndexFromPre: ShikiTransformer = {\n  pre(node) {\n    if ('properties' in node) {\n      node.properties.tabindex = '-1';\n    }\n    return node;\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\n/**\n * Resolved language information\n */\ntype LanguageResult = {\n  languageId: string;\n  resolvedLanguage?: LanguageRegistration;\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\n * @returns A LanguageResult object containing:\n *   - languageId: The resolved language ID\n *   - displayLanguageId: The display language ID\n *   - resolvedLanguage: The resolved language object\n *   - langToLoad: The language object or string id to load\n */\nexport const resolveLanguage = (\n  lang: Language,\n  customLanguages: LanguageRegistration[] = []\n): LanguageResult => {\n  const bundledLangs = new Set(\n    Object.keys(bundledLanguages).map((id) => id.toLowerCase())\n  );\n\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 = customLanguages.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  // Language is Built-in/Special\n  if (\n    (bundledLangs.has(lowerLang) || isSpecialLang(lowerLang)) &&\n    !customMatch\n  ) {\n    return {\n      languageId: lang,\n      displayLanguageId: lang,\n      langsToLoad: lang,\n    };\n  }\n\n  // Language is not supported\n  return {\n    languageId: 'plaintext',\n    displayLanguageId: lang,\n    langsToLoad: undefined,\n  };\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): {\n  isMultiTheme: boolean;\n  themeId: Theme;\n  multiTheme?: Themes | ThemeRegistrationAny | null;\n  singleTheme?: Theme | undefined;\n  themesToLoad: Theme[];\n} {\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{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}\\n\")","import './styles.css';\nimport { clsx } from 'clsx';\nimport { useShikiHighlighter } from './hook';\nimport { resolveLanguage } from './utils';\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 * ShikiHighlighter is a React component that provides syntax highlighting for code snippets.\n * It uses Shiki to render beautiful, theme-based syntax highlighting with optimized performance.\n *\n * @example\n * ```tsx\n * <ShikiHighlighter\n *   language=\"typescript\"\n *   theme=\"github-dark\"\n *   delay={100}\n *   transformers={[customTransformer]}\n *   addDefaultStyles={false}\n *   className=\"code-block\"\n *   langClassName=\"lang-label\"\n *   langStyle={{ color: 'blue' }},\n *   style={{ fontSize: '1.2rem' }}\n * >\n *   {code}\n * </ShikiHighlighter>\n * ```\n */\nexport const ShikiHighlighter = ({\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}: ShikiHighlighterProps): React.ReactElement => {\n  const options: HighlighterOptions = {\n    delay,\n    transformers,\n    customLanguages,\n    defaultColor,\n    cssVariablePrefix,\n  };\n\n  const normalizedCustomLanguages = customLanguages\n    ? Array.isArray(customLanguages)\n      ? customLanguages\n      : [customLanguages]\n    : [];\n\n  const { displayLanguageId } =\n    resolveLanguage(language, normalizedCustomLanguages);\n\n  const highlightedCode = useShikiHighlighter(\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"],"mappings":"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","names":["useEffect","useMemo","useRef","useState","parse","getSingletonHighlighter","visit","bundledLanguages","isSpecialLang","rehypeInlineCodeProperty","tree","node","_index","parent","isInlineCode","child","removeTabIndexFromPre","throttleHighlighting","performHighlight","timeoutControl","throttleMs","now","delay","resolveLanguage","lang","customLanguages","bundledLangs","id","lowerLang","matches","str","customMatch","cl","resolveTheme","themeInput","isTextmateTheme","isMultiThemeConfig","validMultiThemeObj","key","value","theme","DEFAULT_THEMES","useShikiHighlighter","code","lang","themeInput","options","highlightedCode","setHighlightedCode","useState","normalizedCustomLanguages","customLangId","transformers","useMemo","removeTabIndexFromPre","isMultiTheme","themeId","multiTheme","singleTheme","themesToLoad","resolveTheme","languageId","langsToLoad","resolveLanguage","timeoutControl","useRef","buildShikiOptions","defaultColor","cssVariablePrefix","commonOptions","themeOptions","useEffect","isMounted","highlightCode","highlighter","getSingletonHighlighter","highlighterOptions","html","parse","throttleHighlighting","styleInject","css","insertAt","head","style","styleInject","clsx","jsx","jsxs","ShikiHighlighter","language","theme","delay","transformers","defaultColor","cssVariablePrefix","addDefaultStyles","style","langStyle","className","langClassName","showLanguage","code","Element","customLanguages","options","normalizedCustomLanguages","displayLanguageId","resolveLanguage","highlightedCode","useShikiHighlighter","clsx"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-shiki",
   "description": "Syntax highlighter component for react using shiki",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "license": "MIT",
   "author": {
     "name": "Bassim Shahidy",
@@ -36,30 +36,34 @@
     }
   },
   "peerDependencies": {
-    "react": ">= 15.0.0",
-    "react-dom": ">= 15.0.0"
+    "react": ">= 16.8.0",
+    "react-dom": ">= 16.8.0"
   },
   "dependencies": {
     "@types/jest": "^29.5.14",
     "clsx": "^2.1.1",
-    "html-react-parser": "^5.1.12",
-    "shiki": "^3.0.0",
+    "html-react-parser": "^5.2.3",
+    "shiki": "^3.2.1",
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^14.3.1",
+    "@testing-library/react": "^16.3.0",
     "@types/hast": "^3.0.4",
-    "@types/node": "22.13.4",
-    "@types/react": "^18.3.18",
+    "@types/node": "22.14.0",
+    "@types/react": "^19.1.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "jsdom": "^22.1.0",
-    "tsup": "^8.3.6",
-    "vitest": "^0.34.6"
+    "jsdom": "^26.0.0",
+    "tsup": "^8.4.0",
+    "vitest": "^3.1.1"
   },
   "scripts": {
     "dev": "tsup --watch",
     "build": "tsup",
-    "test": "vitest"
+    "test": "vitest",
+    "lint": "biome lint .",
+    "lint:fix": "biome lint --write .",
+    "format": "biome format --write .",
+    "check": "tsc && biome check ."
   }
 }