react-shiki 0.2.2 → 0.2.3

package/README.md

@@ -4,7 +4,7 @@
 > This package is still a work in progress, fully functional but not
 > extensively tested.
 
-Performant server and client side syntax highlighting component + hook
+Performant client side syntax highlighting component + hook
 for react using [Shiki](https://shiki.matsu.io/)
 
 [See the demo page with highlighted code blocks showcasing several Shiki themes!](https://react-shiki.vercel.app/)
@@ -17,7 +17,7 @@ for react using [Shiki](https://shiki.matsu.io/)
   - [Usage](#usage)
     - [`react-markdown`](#react-markdown)
     - [Custom themes](#custom-themes)
-  - [Client-side highlighting](#client-side-highlighting)
+  - [Performance](#performance)
     - [Throttling real-time highlighting](#throttling-real-time-highlighting)
     - [Streaming and LLM chat UI](#streaming-and-llm-chat-ui)
     <!--toc:end-->
@@ -74,6 +74,8 @@ function CodeBlock() {
 }
 ```
 
+The `ShikiHighlighter` component will follow a similar API to `react-syntax-highlighter`, but uses Shiki and is optimized for performant sequential highlighting. As of now, not all of `react-syntax-highlighter` functionality is supported, but the goal of this component is to eventually act as a drop in replacement for `react-syntax-highlighter`.
+
 The component accepts several props in addition to language and theme:
 
 - `showLanguage: boolean` - Shows the language name in the top right corner of
@@ -84,13 +86,15 @@ The component accepts several props in addition to language and theme:
 - `delay: number` - Delay between highlights in milliseconds, useful for throttling
   rapid highlighting on the client
 - `className: string` - Class name to be passed to the component
-- `style: object` - Style object to be passed to the component
+- `style: object` - Inline style object to be passed to the component
+- `langStyle: object` - Inline style object to be passed to the language label
 
 ```tsx
 function Houston() {
   return (
     <ShikiHighlighter
       language="jsx"
+      className="code-block"
       theme="houston"
       showLanguage={false}
       addDefaultStyles={true}
@@ -105,7 +109,7 @@ function Houston() {
 }
 ```
 
-**react-shiki** exports `isInlineCode` to check if a code block is inline:
+`react-shiki` exports `isInlineCode` to check if a code block is inline:
 
 ```tsx
 const isInline: boolean | undefined = node ? isInlineCode(node) : undefined;
@@ -173,9 +177,9 @@ import tokyoNight from '@styles/tokyo-night.mjs';
 </ShikiHighlighter>;
 ```
 
-## Client-side highlighting
+## Performance
 
-react-shiki supports performance-optimized highlighting on the client.
+`react-shiki` supports performance-optimized highlighting on the client.
 
 ### Throttling real-time highlighting
 
@@ -190,7 +194,7 @@ const highlightedCode = useShikiHighlighter(code, language, theme, {
 
 ### Streaming and LLM chat UI
 
-react-shiki can be used to highlight streamed code from LLM responses in real-time.
+`react-shiki` can be used to highlight streamed code from LLM responses in real-time.
 
 I use it for an
 LLM chatbot UI, it renders markdown and highlights code in memoized chat messages.

package/dist/index.d.ts

@@ -60,6 +60,10 @@ interface ShikiHighlighterProps extends HighlighterOptions {
      * 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
      */
@@ -90,12 +94,12 @@ interface ShikiHighlighterProps extends HighlighterOptions {
  * </ShikiHighlighter>
  * ```
  */
-declare const ShikiHighlighter: ({ language, theme, delay, addDefaultStyles, style, className, showLanguage, children: code, as: Element, }: ShikiHighlighterProps) => React.ReactElement;
+declare const ShikiHighlighter: ({ language, theme, delay, addDefaultStyles, style, langStyle, className, showLanguage, children: code, as: Element, }: ShikiHighlighterProps) => React.ReactElement;
 
-/************************************************************************
- ** A React hook that provides syntax highlighting using Shiki. Uses a **
- ** singleton highlighter instance and supports throttled updates.     **
-*************************************************************************/
+/**
+* A React hook that provides syntax highlighting using Shiki. Uses a
+* singleton highlighter instance and supports optional throttled highlights
+*/
 declare const useShikiHighlighter: (code: string, lang: Language, theme: Theme, options?: HighlighterOptions) => ReactNode | null;
 
 declare const isInlineCode: (node: Element) => boolean;

package/dist/index.js

@@ -1,3 +1,3 @@
-function g(e,{insertAt:i}={}){if(!e||typeof document>"u")return;let t=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css",i==="top"&&t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}g(`.relative{position:relative}.container 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 p from"react";import{clsx as I}from"clsx";import{useEffect as T,useRef as H,useState as b}from"react";import S from"html-react-parser";import{createHighlighter as w,ShikiError as u}from"shiki";var x=e=>e.position?.start.line===e.position?.end.line,d={pre(e){e.properties.tabindex="-1"}};var m=null,L=async e=>{m||(m=w({themes:[],langs:[]}));let i=await m;return await E(i,e),i},E=async(e,i)=>{try{await e.loadTheme(i)}catch(t){throw t instanceof u&&console.warn("Error loading theme:",t.message),t}},P=async(e,i)=>{let t=i??"plaintext";try{return await e.loadLanguage(t),t}catch(r){return r instanceof u&&r.message.includes("not included in this bundle")&&console.warn(`Language '${t}' not supported, falling back to plaintext`),"plaintext"}},k=(e,i,t)=>{let r=Date.now();clearTimeout(i.current.timeoutId);let o=Math.max(0,i.current.nextAllowedTime-r);i.current.timeoutId=setTimeout(()=>{e().catch(console.error),i.current.nextAllowedTime=r+t},o)},c=(e,i,t,r={})=>{let[o,h]=b(null),n=H({nextAllowedTime:0,timeoutId:void 0});return T(()=>{let a=!0,l=async()=>{let s=await L(t),f=await P(s,i),y=s.codeToHtml(e,{lang:f,theme:t,transformers:[d]});a&&h(S(y))};return r.delay?k(l,n,r.delay):l().catch(console.error),()=>{a=!1,clearTimeout(n.current.timeoutId)}},[e,i]),o};var R=({language:e,theme:i,delay:t,addDefaultStyles:r=!0,style:o,className:h,showLanguage:n=!0,children:a,as:l="pre"})=>{let s=c(a,e,i,{delay:t});return p.createElement(l,{className:I("relative",r&&"container",h),style:o},n&&e?p.createElement("span",{className:"languageLabel",style:o},e):null,s)};export{R as default,x as isInlineCode,c as useShikiHighlighter};
+function m(e,{insertAt:i}={}){if(!e||typeof document>"u")return;let t=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css",i==="top"&&t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}m(`.relative{position:relative}.container 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 f from"react";import{clsx as k}from"clsx";import{useEffect as T,useRef as H,useState as S}from"react";import b from"html-react-parser";import{createHighlighter as w,ShikiError as p}from"shiki";var x=e=>e.position?.start.line===e.position?.end.line,u={pre(e){e.properties.tabindex="-1"}};var c=null,L=async e=>{c||(c=w({themes:[],langs:[]}));let i=await c;return await E(i,e),i},E=async(e,i)=>{try{await e.loadTheme(i)}catch(t){throw t instanceof p&&console.warn("Error loading theme:",t.message),t}},P=async(e,i)=>{let t=i??"plaintext";try{return await e.loadLanguage(t),t}catch(r){return r instanceof p&&r.message.includes("not included in this bundle")&&console.warn(`Language '${t}' not supported, falling back to plaintext`),"plaintext"}},R=(e,i,t)=>{let r=Date.now();clearTimeout(i.current.timeoutId);let o=Math.max(0,i.current.nextAllowedTime-r);i.current.timeoutId=setTimeout(()=>{e().catch(console.error),i.current.nextAllowedTime=r+t},o)},d=(e,i,t,r={})=>{let[o,h]=S(null),n=H({nextAllowedTime:0,timeoutId:void 0});return T(()=>{let a=!0,l=async()=>{let s=await L(t),g=await P(s,i),y=s.codeToHtml(e,{lang:g,theme:t,transformers:[u]});a&&h(b(y))};return r.delay?R(l,n,r.delay):l().catch(console.error),()=>{a=!1,clearTimeout(n.current.timeoutId)}},[e,i]),o};var C=({language:e,theme:i,delay:t,addDefaultStyles:r=!0,style:o,langStyle:h,className:n,showLanguage:a=!0,children:l,as:s="pre"})=>{let g=d(l,e,i,{delay:t});return f.createElement(s,{className:k("relative",r&&"container",n),style:o},a&&e?f.createElement("span",{className:"languageLabel",style:h},e):null,g)};export{C as default,x as isInlineCode,d as useShikiHighlighter};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["#style-inject:#style-inject","../src/styles.css","../src/ShikiHighlighter.tsx","../src/useShiki.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}.container 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 React from 'react';\nimport { clsx } from 'clsx';\nimport { useShikiHighlighter } from './useShiki';\nimport type { Language, Theme, HighlighterOptions } 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   * @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 for syntax highlighting\n   * Supports Shiki and custom textmate themes\n   * @see https://shiki.style/themes\n   */\n  theme: Theme;\n\n  /** \n   * The delay in milliseconds between streamed updates\n   * Use this when highlighting code being streamed on the client\n   * @default undefined (no delay)\n   */\n  delay?: number;\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 CSS class names to the generated code block \n   */\n  className?: 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} // Optional throttling for streamed updates\n * >\n *   {code}\n * </ShikiHighlighter>\n * ```\n */\nexport const ShikiHighlighter = ({\n  language,\n  theme,\n  delay,\n  addDefaultStyles = true,\n  style,\n  className,\n  showLanguage = true,\n  children: code,\n  as: Element = 'pre',\n}: ShikiHighlighterProps): React.ReactElement => {\n  const highlightedCode = useShikiHighlighter(code, language, theme, { delay });\n\n  return (\n    <Element\n      className={clsx(\n        'relative',\n        addDefaultStyles && 'container',\n        className\n      )}\n      style={style}\n    >\n      {showLanguage && language ? (\n        <span className=\"languageLabel\" style={style}>\n          {language}\n        </span>\n      ) : null}\n      {highlightedCode}\n    </Element>\n  );\n};\n","import { useEffect, useRef, useState, type ReactNode } from 'react';\nimport parse from 'html-react-parser';\n\nimport {\n  createHighlighter,\n  ShikiError,\n  type BundledLanguage,\n  type Highlighter\n} from 'shiki';\n\nimport type {\n  Language,\n  Theme,\n  HighlighterOptions,\n  TimeoutState\n} from './types';\n\nimport { removeTabIndexFromPre } from '@/utils';\n\n\n/************************************\n ** Singleton highlighter instance **\n ************************************/\nlet highlighterPromise: Promise<Highlighter> | null = null;\n\n\n/***********************************************************\n ** Creates or returns the singleton highlighter instance **\n ***********************************************************/\nconst makeHighlighter = async (theme: Theme): Promise<Highlighter> => {\n  if (!highlighterPromise) {\n    highlighterPromise = createHighlighter({\n      themes: [],\n      langs: []\n    });\n  }\n\n  const highlighter = await highlighterPromise;\n  await loadTheme(highlighter, theme);\n  return highlighter;\n};\n\n\n/************************************************************\n ** Loads a theme dynamically if it hasn't been loaded yet **\n ************************************************************/\nconst loadTheme = async (\n  highlighter: Highlighter,\n  theme: Theme\n): Promise<void> => {\n  try {\n    await highlighter.loadTheme(theme);\n  } catch (error) {\n    if (error instanceof ShikiError) {\n      console.warn('Error loading theme:', error.message);\n    }\n    throw error;\n  }\n};\n\n\n/******************************************************************************\n ** Loads a language dynamically, falling back to plaintext if not available **                                             **\n ******************************************************************************/\nconst loadLanguage = async (\n  highlighter: Highlighter,\n  lang: Language\n): Promise<string> => {\n  const resolvedLanguage = lang ?? 'plaintext';\n\n  try {\n    await highlighter.loadLanguage(resolvedLanguage as BundledLanguage);\n    return resolvedLanguage;\n  } catch (error) {\n    if (error instanceof ShikiError && error.message.includes('not included in this bundle')) {\n      console.warn(`Language '${resolvedLanguage}' not supported, falling back to plaintext`);\n    }\n    return 'plaintext';\n  }\n};\n\n\n/*******************************************************************************\n ** Throttles highlighting operations to prevent overwhelming the highlighter **                                               **\n *******************************************************************************/\nconst 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\n\n/************************************************************************\n ** A React hook that provides syntax highlighting using Shiki. Uses a **\n ** singleton highlighter instance and supports throttled updates.     **\n*************************************************************************/\nexport const useShikiHighlighter = (\n  code: string,\n  lang: Language,\n  theme: Theme,\n  options: HighlighterOptions = {}\n): ReactNode | null => {\n  const [highlightedCode, setHighlightedCode] = useState<ReactNode | null>(null);\n  const delayRef = useRef<TimeoutState>({\n    nextAllowedTime: 0,\n    timeoutId: undefined\n  });\n\n  useEffect(() => {\n    let isMounted = true;\n\n    const highlightCode = async () => {\n      const highlighter = await makeHighlighter(theme);\n      const language = await loadLanguage(highlighter, lang);\n\n      const html = highlighter.codeToHtml(code, {\n        lang: language,\n        theme,\n        transformers: [removeTabIndexFromPre],\n      });\n\n      if (isMounted) {\n        setHighlightedCode(parse(html));\n      }\n    };\n\n    if (options.delay) {\n      throttleHighlighting(highlightCode, delayRef, options.delay);\n    } else {\n      highlightCode().catch(console.error);\n    }\n\n    return () => {\n      isMounted = false;\n      clearTimeout(delayRef.current.timeoutId);\n    };\n  }, [code, lang]);\n\n  return highlightedCode;\n};\n","import type { Element } from 'hast';\n\nexport const isInlineCode = (node: Element): boolean => {\n  return node.position?.start.line === node.position?.end.line;\n};\n\n\nexport const removeTabIndexFromPre = {\n  pre(node: Element) {\n    node.properties.tabindex = '-1';\n  },\n};\n\nexport type { Element };\n"],"mappings":"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","names":["styleInject","css","insertAt","head","style","styleInject","React","clsx","useEffect","useRef","useState","parse","createHighlighter","ShikiError","isInlineCode","node","removeTabIndexFromPre","highlighterPromise","makeHighlighter","theme","createHighlighter","highlighter","loadTheme","error","ShikiError","loadLanguage","lang","resolvedLanguage","throttleHighlighting","performHighlight","timeoutControl","throttleMs","now","delay","useShikiHighlighter","code","options","highlightedCode","setHighlightedCode","useState","delayRef","useRef","useEffect","isMounted","highlightCode","language","html","removeTabIndexFromPre","parse","ShikiHighlighter","language","theme","delay","addDefaultStyles","style","className","showLanguage","code","Element","highlightedCode","useShikiHighlighter","React","clsx"]}
+{"version":3,"sources":["#style-inject:#style-inject","../src/styles.css","../src/ShikiHighlighter.tsx","../src/useShiki.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}.container 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 React from 'react';\nimport { clsx } from 'clsx';\nimport { useShikiHighlighter } from './useShiki';\nimport type { Language, Theme, HighlighterOptions } 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   * @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 for syntax highlighting\n   * Supports Shiki and custom textmate themes\n   * @see https://shiki.style/themes\n   */\n  theme: Theme;\n\n  /** \n   * The delay in milliseconds between streamed updates\n   * Use this when highlighting code being streamed on the client\n   * @default undefined (no delay)\n   */\n  delay?: number;\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   * 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} // Optional throttling for streamed updates\n * >\n *   {code}\n * </ShikiHighlighter>\n * ```\n */\nexport const ShikiHighlighter = ({\n  language,\n  theme,\n  delay,\n  addDefaultStyles = true,\n  style,\n  langStyle,\n  className,\n  showLanguage = true,\n  children: code,\n  as: Element = 'pre',\n}: ShikiHighlighterProps): React.ReactElement => {\n  const highlightedCode = useShikiHighlighter(code, language, theme, { delay });\n\n  return (\n    <Element\n      className={clsx(\n        'relative',\n        addDefaultStyles && 'container',\n        className\n      )}\n      style={style}\n    >\n      {showLanguage && language ? (\n        <span className=\"languageLabel\" style={langStyle}>\n          {language}\n        </span>\n      ) : null}\n      {highlightedCode}\n    </Element>\n  );\n};\n","import { useEffect, useRef, useState, type ReactNode } from 'react';\nimport parse from 'html-react-parser';\n\nimport {\n  createHighlighter,\n  ShikiError,\n  type BundledLanguage,\n  type Highlighter\n} from 'shiki';\n\nimport type {\n  Language,\n  Theme,\n  HighlighterOptions,\n  TimeoutState\n} from './types';\n\nimport { removeTabIndexFromPre } from '@/utils';\n\n\n/**\n* Singleton highlighter instance\n*/\nlet highlighterPromise: Promise<Highlighter> | null = null;\n\n\n/**\n* Creates or returns the singleton highlighter instance\n*/\nconst makeHighlighter = async (theme: Theme): Promise<Highlighter> => {\n  if (!highlighterPromise) {\n    highlighterPromise = createHighlighter({\n      themes: [],\n      langs: []\n    });\n  }\n\n  const highlighter = await highlighterPromise;\n  await loadTheme(highlighter, theme);\n  return highlighter;\n};\n\n\n/**\n* Loads a theme dynamically if it hasn't been loaded yet\n*/\nconst loadTheme = async (\n  highlighter: Highlighter,\n  theme: Theme\n): Promise<void> => {\n  try {\n    await highlighter.loadTheme(theme);\n  } catch (error) {\n    if (error instanceof ShikiError) {\n      console.warn('Error loading theme:', error.message);\n    }\n    throw error;\n  }\n};\n\n\n/**\n* Loads a language dynamically, falling back to plaintext if not available\n*/\nconst loadLanguage = async (\n  highlighter: Highlighter,\n  lang: Language\n): Promise<string> => {\n  const resolvedLanguage = lang ?? 'plaintext';\n\n  try {\n    await highlighter.loadLanguage(resolvedLanguage as BundledLanguage);\n    return resolvedLanguage;\n  } catch (error) {\n    if (error instanceof ShikiError && error.message.includes('not included in this bundle')) {\n      console.warn(`Language '${resolvedLanguage}' not supported, falling back to plaintext`);\n    }\n    return 'plaintext';\n  }\n};\n\n\n/**\n* Optionally throttles rapid sequential highlighting operations to conserve resources\n*/\nconst 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\n\n/**\n* A React hook that provides syntax highlighting using Shiki. Uses a\n* singleton highlighter instance and supports optional throttled highlights\n*/\nexport const useShikiHighlighter = (\n  code: string,\n  lang: Language,\n  theme: Theme,\n  options: HighlighterOptions = {}\n): ReactNode | null => {\n  const [highlightedCode, setHighlightedCode] = useState<ReactNode | null>(null);\n  const delayRef = useRef<TimeoutState>({\n    nextAllowedTime: 0,\n    timeoutId: undefined\n  });\n\n  useEffect(() => {\n    let isMounted = true;\n\n    const highlightCode = async () => {\n      const highlighter = await makeHighlighter(theme);\n      const language = await loadLanguage(highlighter, lang);\n\n      const html = highlighter.codeToHtml(code, {\n        lang: language,\n        theme,\n        transformers: [removeTabIndexFromPre],\n      });\n\n      if (isMounted) {\n        setHighlightedCode(parse(html));\n      }\n    };\n\n    if (options.delay) {\n      throttleHighlighting(highlightCode, delayRef, options.delay);\n    } else {\n      highlightCode().catch(console.error);\n    }\n\n    return () => {\n      isMounted = false;\n      clearTimeout(delayRef.current.timeoutId);\n    };\n  }, [code, lang]);\n\n  return highlightedCode;\n};\n","import type { Element } from 'hast';\n\nexport const isInlineCode = (node: Element): boolean => {\n  return node.position?.start.line === node.position?.end.line;\n};\n\n\nexport const removeTabIndexFromPre = {\n  pre(node: Element) {\n    node.properties.tabindex = '-1';\n  },\n};\n\nexport type { Element };\n"],"mappings":"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","names":["styleInject","css","insertAt","head","style","styleInject","React","clsx","useEffect","useRef","useState","parse","createHighlighter","ShikiError","isInlineCode","node","removeTabIndexFromPre","highlighterPromise","makeHighlighter","theme","createHighlighter","highlighter","loadTheme","error","ShikiError","loadLanguage","lang","resolvedLanguage","throttleHighlighting","performHighlight","timeoutControl","throttleMs","now","delay","useShikiHighlighter","code","options","highlightedCode","setHighlightedCode","useState","delayRef","useRef","useEffect","isMounted","highlightCode","language","html","removeTabIndexFromPre","parse","ShikiHighlighter","language","theme","delay","addDefaultStyles","style","langStyle","className","showLanguage","code","Element","highlightedCode","useShikiHighlighter","React","clsx"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-shiki",
   "description": "Syntax highlighter component for react using shiki",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "license": "MIT",
   "author": {
     "name": "Bassim Shahidy",