react-shiki 0.6.0 → 0.7.1

package/dist/core.js

@@ -0,0 +1,43 @@
+import {
+  createShikiHighlighterComponent,
+  isInlineCode,
+  rehypeInlineCodeProperty,
+  useShikiHighlighter
+} from "./chunk-RZ35JRPP.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,237 +1,25 @@
-import { ReactNode } from 'react';
-import { LanguageRegistration as LanguageRegistration$1, StringLiteralUnion, BundledLanguage, SpecialLanguage, ThemeRegistrationAny, BundledTheme, CodeOptionsMultipleThemes, CodeToHastOptions } from 'shiki';
-import { Element as Element$1 } from 'hast';
+import { S as ShikiHighlighterProps, U as UseShikiHighlighter } from './component-DU2-v6BV.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-DU2-v6BV.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
- * Extends CodeToHastOptions to allow passing any Shiki options directly
- */
-interface HighlighterOptions extends ReactShikiOptions, Pick<CodeOptionsMultipleThemes<BundledTheme>, 'defaultColor' | 'cssVariablePrefix'>, Omit<CodeToHastOptions, 'lang' | 'theme' | 'themes'> {
-}
-
-/**
- * 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, ...shikiOptions }: ShikiHighlighterProps) => React.ReactElement;
+declare const ShikiHighlighter: ({ language, theme, delay, transformers, defaultColor, cssVariablePrefix, addDefaultStyles, style, langStyle, className, langClassName, showLanguage, showLineNumbers, startingLineNumber, 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 _,useMemo as R,useRef as H,useState as q}from"react";import{dequal as J}from"dequal/lite";import{jsx as U,jsxs as V,Fragment as $}from"react/jsx-runtime";import{toJsxRuntime as G}from"hast-util-to-jsx-runtime";import{getSingletonHighlighter as K}from"shiki";import{visit as P}from"unist-util-visit";function D(){return e=>{P(e,"element",(t,o,i)=>{t.tagName==="code"&&i.tagName!=="pre"&&(t.properties.inline=!0)})}}var z=e=>!(e.children||[]).filter(o=>o.type==="text").map(o=>o.value).join("").includes(`
-`),M=(e,t,o)=>{let i=Date.now();clearTimeout(t.current.timeoutId);let s=Math.max(0,t.current.nextAllowedTime-i);t.current.timeoutId=setTimeout(()=>{e().catch(console.error),t.current.nextAllowedTime=i+o},s)};import{bundledLanguages as B,isSpecialLang as F}from"shiki";var f=(e,t)=>{let o=t?Array.isArray(t)?t:[t]:[],i=new Set(Object.keys(B).map(r=>r.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 s=e.toLowerCase(),n=r=>r?.toLowerCase()===s,a=o.find(r=>n(r.name)||n(r.scopeName)||n(r.scopeName?.split(".").pop())||r.aliases?.some(n)||r.fileTypes?.some(n));return a?{languageId:a.name||e,displayLanguageId:e,langsToLoad:a}:(i.has(s)||F(s))&&!a?{languageId:e,displayLanguageId:e,langsToLoad:e}:{languageId:"plaintext",displayLanguageId:e,langsToLoad:void 0}};function N(e){let t=typeof e=="object"&&"tokenColors"in e&&Array.isArray(e.tokenColors),o=typeof e=="object"&&e!==null&&!t,i=typeof e=="object"&&e!==null&&!t&&Object.entries(e).some(([s,n])=>s&&n&&s.trim()!==""&&n!==""&&(typeof n=="string"||t));return o?{isMultiTheme:!0,themeId:i?`multi-${Object.values(e).map(n=>(typeof n=="string"?n:n?.name)||"custom").sort().join("-")}`:"multi-default",multiTheme:i?e:null,themesToLoad:i?Object.values(e):[]}:{isMultiTheme:!1,themeId:typeof e=="string"?e:e?.name||"custom",singleTheme:e,themesToLoad:[e]}}var A={light:"github-light",dark:"github-dark"},O=e=>{let t=H(e),o=H(0);return typeof e!="object"||e===null?(e!==t.current&&(t.current=e,o.current+=1),[e,o.current]):(e!==t.current&&(J(e,t.current)||(t.current=e,o.current+=1)),[t.current,o.current])},k=(e,t,o,i={})=>{let[s,n]=q(null),[a,r]=O(t),[m,T]=O(o),[l,y]=O(i),{languageId:g,langsToLoad:L}=R(()=>f(a,l.customLanguages),[a,l.customLanguages]),{isMultiTheme:d,themeId:x,multiTheme:S,singleTheme:h,themesToLoad:b}=R(()=>N(m),[m]),E=H({nextAllowedTime:0,timeoutId:void 0}),I=R(()=>{let{defaultColor:u,cssVariablePrefix:p,...c}=l,w={lang:g},C=d?{themes:S||A,defaultColor:u,cssVariablePrefix:p}:{theme:h||A.dark};return{...w,...C,...c}},[g,x,r,T,y]);return _(()=>{let u=!0,p=async()=>{if(!g)return;let C=(await K({langs:[L],themes:b})).codeToHast(e,I);u&&n(G(C,{jsx:U,jsxs:V,Fragment:$}))},{delay:c}=l;return c?M(p,E,c):p().catch(console.error),()=>{u=!1,clearTimeout(E.current.timeoutId)}},[e,I,l.delay]),s};function j(e,{insertAt:t}={}){if(!e||typeof document>"u")return;let o=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css",t==="top"&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}j(`.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 v}from"clsx";import{jsx as W,jsxs as X}from"react/jsx-runtime";var Q=({language:e,theme:t,delay:o,transformers:i,defaultColor:s,cssVariablePrefix:n,addDefaultStyles:a=!0,style:r,langStyle:m,className:T,langClassName:l,showLanguage:y=!0,children:g,as:L="pre",customLanguages:d,...x})=>{let S={delay:o,transformers:i,customLanguages:d,defaultColor:s,cssVariablePrefix:n,...x},{displayLanguageId:h}=f(e,d),b=k(g,e,t,S);return X(L,{"data-testid":"shiki-container",className:v("relative","not-prose",a&&"defaultStyles",T),style:r,id:"shiki-container",children:[y&&h?W("span",{className:v("languageLabel",l),style:m,id:"language-label",children:h}):null,b]})};export{Q as default,z as isInlineCode,D as rehypeInlineCodeProperty,k as useShikiHighlighter};
+import {
+  createShikiHighlighterComponent,
+  isInlineCode,
+  rehypeInlineCodeProperty,
+  useShikiHighlighter
+} from "./chunk-RZ35JRPP.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

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hook.ts","../src/utils.ts","../src/resolvers.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 { dequal } from 'dequal/lite';\n\nimport { jsx, jsxs, Fragment } from 'react/jsx-runtime';\nimport { toJsxRuntime } from 'hast-util-to-jsx-runtime';\n\nimport {\n  getSingletonHighlighter,\n  type CodeToHastOptions,\n  type CodeOptionsSingleTheme,\n  type CodeOptionsMultipleThemes,\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 * 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  // 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      const highlighter = await getSingletonHighlighter({\n        langs: [langsToLoad as ShikiLanguageRegistration],\n        themes: themesToLoad,\n      });\n\n      const hast = highlighter.codeToHast(code, shikiOptions);\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  }, [code, shikiOptions, stableOpts.delay]);\n\n  return highlightedCode;\n};\n","import { visit } from 'unist-util-visit';\n\nimport type { ShikiTransformer } from 'shiki';\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 type { Language, Theme, Themes } from '@/types';\nimport {\n  type ThemeRegistrationAny,\n  bundledLanguages,\n  isSpecialLang,\n} from 'shiki';\n\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  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 = 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  // 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 * 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{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 './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 * 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  ...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 = 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","dequal","jsx","jsxs","Fragment","toJsxRuntime","getSingletonHighlighter","visit","rehypeInlineCodeProperty","tree","node","_index","parent","isInlineCode","child","throttleHighlighting","performHighlight","timeoutControl","throttleMs","now","delay","bundledLanguages","isSpecialLang","resolveLanguage","lang","customLanguages","normalizedCustomLangs","bundledLangs","id","lowerLang","matches","str","customMatch","cl","resolveTheme","themeInput","isTextmateTheme","isMultiThemeConfig","validMultiThemeObj","key","value","theme","DEFAULT_THEMES","useStableOptions","value","ref","useRef","revision","dequal","useShikiHighlighter","code","lang","themeInput","options","highlightedCode","setHighlightedCode","useState","stableLang","langRev","stableTheme","themeRev","stableOpts","optsRev","languageId","langsToLoad","useMemo","resolveLanguage","isMultiTheme","themeId","multiTheme","singleTheme","themesToLoad","resolveTheme","timeoutControl","shikiOptions","defaultColor","cssVariablePrefix","restOptions","languageOption","themeOptions","useEffect","isMounted","highlightCode","hast","getSingletonHighlighter","toJsxRuntime","jsx","jsxs","Fragment","delay","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","shikiOptions","options","displayLanguageId","resolveLanguage","highlightedCode","useShikiHighlighter","clsx"]}
+{"version":3,"sources":["../src/bundles/full.ts","../src/index.ts"],"sourcesContent":["import { getSingletonHighlighter, type Highlighter } from 'shiki';\nimport type { ShikiLanguageRegistration } from '../lib/extended-types';\nimport type { Theme } from '../lib/types';\n\n/**\n * Creates a highlighter using the full Shiki bundle with all languages and themes.\n * This is the largest bundle but provides maximum compatibility.\n */\nexport async function createFullHighlighter(\n  langsToLoad: ShikiLanguageRegistration,\n  themesToLoad: Theme[]\n): Promise<Highlighter> {\n  try {\n    return await getSingletonHighlighter({\n      langs: [langsToLoad],\n      themes: themesToLoad,\n    });\n  } catch (error) {\n    if (error instanceof Error && error.message.includes('Language')) {\n      return await getSingletonHighlighter({\n        langs: ['plaintext'],\n        themes: themesToLoad,\n      });\n    }\n    throw error;\n  }\n}\n","import { useShikiHighlighter as useBaseHook } from './lib/hook';\nimport { createFullHighlighter } from './bundles/full';\nimport type { UseShikiHighlighter } from './lib/types';\n\nexport { isInlineCode, rehypeInlineCodeProperty } from './lib/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\n/**\n * A React hook that provides syntax highlighting using Shiki with the full bundle.\n * Includes all languages and themes for maximum compatibility.\n *\n * Bundle size: ~6.4MB minified (1.2MB gzipped)\n *\n * For smaller bundles, consider:\n * - `react-shiki/web` for smaller shiki web bundle (~3.8MB minified, 695KB gzipped)\n * - `react-shiki/core` for custom fine-grained bundle\n */\nexport const useShikiHighlighter: UseShikiHighlighter = (\n  code,\n  lang,\n  themeInput,\n  options = {}\n) => {\n  return useBaseHook(\n    code,\n    lang,\n    themeInput,\n    createFullHighlighter,\n    options\n  );\n};\n\n/**\n * ShikiHighlighter component using the full bundle.\n * Includes all languages and themes for maximum compatibility.\n */\nexport const ShikiHighlighter = createShikiHighlighterComponent(\n  useShikiHighlighter\n);\nexport default ShikiHighlighter;\n"],"mappings":";;;;;;;;AAAA,SAAS,+BAAiD;AAQ1D,eAAsB,sBACpB,aACA,cACsB;AACtB,MAAI;AACF,WAAO,MAAM,wBAAwB;AAAA,MACnC,OAAO,CAAC,WAAW;AAAA,MACnB,QAAQ;AAAA,IACV,CAAC;AAAA,EACH,SAAS,OAAO;AACd,QAAI,iBAAiB,SAAS,MAAM,QAAQ,SAAS,UAAU,GAAG;AAChE,aAAO,MAAM,wBAAwB;AAAA,QACnC,OAAO,CAAC,WAAW;AAAA,QACnB,QAAQ;AAAA,MACV,CAAC;AAAA,IACH;AACA,UAAM;AAAA,EACR;AACF;;;ACMO,IAAMA,uBAA2C,CACtD,MACA,MACA,YACA,UAAU,CAAC,MACR;AACH,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAMO,IAAM,mBAAmB;AAAA,EAC9BA;AACF;AACA,IAAO,cAAQ;","names":["useShikiHighlighter"]}

package/dist/web.d.ts

@@ -0,0 +1,25 @@
+import { S as ShikiHighlighterProps, U as UseShikiHighlighter } from './component-DU2-v6BV.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-DU2-v6BV.js';
+import 'shiki';
+import 'react';
+import 'shiki/core';
+import 'hast';
+
+/**
+ * A React hook that provides syntax highlighting using Shiki with the web bundle.
+ * Includes web-focused languages (HTML, CSS, JS, TS, JSON, Markdown, Astro, JSX, Svelte, Vue etc.)
+ *
+ * Bundle size: ~3.8MB minified (695KB gzipped)
+ *
+ * For other options, consider:
+ * - `react-shiki` for full shiki bundle (~6.4MB minified, 1.2MB gzipped)
+ * - `react-shiki/core` for custom fine-grained bundle
+ */
+declare const useShikiHighlighter: UseShikiHighlighter;
+/**
+ * ShikiHighlighter component using the web bundle.
+ * Includes web-focused languages for balanced size and functionality.
+ */
+declare const ShikiHighlighter: ({ language, theme, delay, transformers, defaultColor, cssVariablePrefix, addDefaultStyles, style, langStyle, className, langClassName, showLanguage, showLineNumbers, startingLineNumber, children: code, as: Element, customLanguages, ...shikiOptions }: ShikiHighlighterProps) => React.ReactElement;
+
+export { ShikiHighlighter, ShikiHighlighterProps, UseShikiHighlighter, ShikiHighlighter as default, useShikiHighlighter };

package/dist/web.js

@@ -0,0 +1,50 @@
+import {
+  createShikiHighlighterComponent,
+  isInlineCode,
+  rehypeInlineCodeProperty,
+  useShikiHighlighter
+} from "./chunk-RZ35JRPP.js";
+
+// src/bundles/web.ts
+import {
+  getSingletonHighlighter
+} from "shiki/bundle/web";
+async function createWebHighlighter(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/web.ts
+var useShikiHighlighter2 = (code, lang, themeInput, options = {}) => {
+  return useShikiHighlighter(
+    code,
+    lang,
+    themeInput,
+    createWebHighlighter,
+    options
+  );
+};
+var ShikiHighlighter = createShikiHighlighterComponent(
+  useShikiHighlighter2
+);
+var web_default = ShikiHighlighter;
+export {
+  ShikiHighlighter,
+  web_default as default,
+  isInlineCode,
+  rehypeInlineCodeProperty,
+  useShikiHighlighter2 as useShikiHighlighter
+};
+//# sourceMappingURL=web.js.map

package/dist/web.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/bundles/web.ts","../src/web.ts"],"sourcesContent":["import {\n  getSingletonHighlighter,\n  type Highlighter,\n} from 'shiki/bundle/web';\nimport type { ShikiLanguageRegistration } from '../lib/extended-types';\nimport type { Theme } from '../lib/types';\n\n/**\n * Creates a highlighter using the web Shiki bundle with web-focused languages.\n * Smaller than the full bundle while covering most web development needs.\n * Includes: HTML, CSS, JS, TS, JSON, Markdown, Vue, JSX, Svelte, etc.\n */\nexport async function createWebHighlighter(\n  langsToLoad: ShikiLanguageRegistration,\n  themesToLoad: Theme[]\n): Promise<Highlighter> {\n  try {\n    return await getSingletonHighlighter({\n      langs: [langsToLoad],\n      themes: themesToLoad,\n    });\n  } catch (error) {\n    if (error instanceof Error && error.message.includes('Language')) {\n      return await getSingletonHighlighter({\n        langs: ['plaintext'],\n        themes: themesToLoad,\n      });\n    }\n    throw error;\n  }\n}\n","import { useShikiHighlighter as useBaseHook } from './lib/hook';\nimport { createWebHighlighter } from './bundles/web';\nimport type { UseShikiHighlighter } from './lib/types';\n\nexport { isInlineCode, rehypeInlineCodeProperty } from './lib/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\n/**\n * A React hook that provides syntax highlighting using Shiki with the web bundle.\n * Includes web-focused languages (HTML, CSS, JS, TS, JSON, Markdown, Astro, JSX, Svelte, Vue etc.)\n *\n * Bundle size: ~3.8MB minified (695KB gzipped)\n *\n * For other options, consider:\n * - `react-shiki` for full shiki bundle (~6.4MB minified, 1.2MB gzipped)\n * - `react-shiki/core` for custom fine-grained bundle\n */\nexport const useShikiHighlighter: UseShikiHighlighter = (\n  code,\n  lang,\n  themeInput,\n  options = {}\n) => {\n  return useBaseHook(\n    code,\n    lang,\n    themeInput,\n    createWebHighlighter,\n    options\n  );\n};\n\n/**\n * ShikiHighlighter component using the web bundle.\n * Includes web-focused languages for balanced size and functionality.\n */\nexport const ShikiHighlighter = createShikiHighlighterComponent(\n  useShikiHighlighter\n);\nexport default ShikiHighlighter;\n"],"mappings":";;;;;;;;AAAA;AAAA,EACE;AAAA,OAEK;AASP,eAAsB,qBACpB,aACA,cACsB;AACtB,MAAI;AACF,WAAO,MAAM,wBAAwB;AAAA,MACnC,OAAO,CAAC,WAAW;AAAA,MACnB,QAAQ;AAAA,IACV,CAAC;AAAA,EACH,SAAS,OAAO;AACd,QAAI,iBAAiB,SAAS,MAAM,QAAQ,SAAS,UAAU,GAAG;AAChE,aAAO,MAAM,wBAAwB;AAAA,QACnC,OAAO,CAAC,WAAW;AAAA,QACnB,QAAQ;AAAA,MACV,CAAC;AAAA,IACH;AACA,UAAM;AAAA,EACR;AACF;;;ACEO,IAAMA,uBAA2C,CACtD,MACA,MACA,YACA,UAAU,CAAC,MACR;AACH,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAMO,IAAM,mBAAmB;AAAA,EAC9BA;AACF;AACA,IAAO,cAAQ;","names":["useShikiHighlighter"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-shiki",
   "description": "Syntax highlighter component for react using shiki",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "license": "MIT",
   "author": {
     "name": "Bassim Shahidy",
@@ -27,13 +27,23 @@
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src/lib/styles.css"
   ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
-    }
+    },
+    "./web": {
+      "types": "./dist/web.d.ts",
+      "default": "./dist/web.js"
+    },
+    "./core": {
+      "types": "./dist/core.d.ts",
+      "default": "./dist/core.js"
+    },
+    "./css": "./src/lib/styles.css"
   },
   "peerDependencies": {
     "react": ">= 16.8.0",

package/src/lib/styles.css

@@ -0,0 +1,55 @@
+.relative {
+  position: relative;
+}
+
+.defaultStyles pre {
+  overflow: auto;
+  border-radius: 0.5rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+
+.languageLabel {
+  position: absolute;
+  right: 0.75rem;
+  top: 0.5rem;
+  font-family: monospace;
+  font-size: 0.75rem;
+  letter-spacing: -0.05em;
+  color: rgba(107, 114, 128, 0.85);
+}
+
+.line-numbers::before {
+  counter-increment: line-number;
+  content: counter(line-number);
+  display: inline-flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+  box-sizing: content-box;
+  min-width: var(--line-numbers-width, 2ch);
+  padding-left: var(--line-numbers-padding-left, 2ch);
+  padding-right: var(--line-numbers-padding-right, 2ch);
+  color: var(--line-numbers-foreground, rgba(107, 114, 128, 0.6));
+  font-size: var(--line-numbers-font-size, inherit);
+  font-weight: var(--line-numbers-font-weight, inherit);
+  line-height: var(--line-numbers-line-height, inherit);
+  font-family: var(--line-numbers-font-family, inherit);
+  opacity: var(--line-numbers-opacity, 1);
+  user-select: none;
+  pointer-events: none;
+}
+
+.has-line-numbers {
+  counter-reset: line-number calc(var(--line-start, 1) - 1);
+  --line-numbers-foreground: rgba(107, 114, 128, 0.5);
+  --line-numbers-width: 2ch;
+  --line-numbers-padding-left: 0ch;
+  --line-numbers-padding-right: 2ch;
+  --line-numbers-font-size: inherit;
+  --line-numbers-font-weight: inherit;
+  --line-numbers-line-height: inherit;
+  --line-numbers-font-family: inherit;
+  --line-numbers-opacity: 1;
+}