react-shiki 0.10.1 → 0.11.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 Bassim Shahidy
+Copyright (c) 2026 Bassim Shahidy
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,6 +1,5 @@
 # 🎨 react-shiki
 
-
 A performant client-side syntax highlighting component and hook for React, built with [Shiki](https://shiki.matsu.io/).
 
 [See the demo page with highlighted code blocks showcasing several Shiki themes!](https://react-shiki.vercel.app/)
@@ -37,14 +36,14 @@ A performant client-side syntax highlighting component and hook for React, built
     - [Handling Inline Code](#handling-inline-code)
   - [Performance](#performance)
     - [Throttling Real-time Highlighting](#throttling-real-time-highlighting)
-    - [Output Format Optimization](#output-format-optimization)
+    - [Output Formats](#output-formats)
 <!--toc:end-->
 
 ## Features
 
 - 🖼️ Provides both a `ShikiHighlighter` component and a `useShikiHighlighter` hook for more flexibility
-- 🔐 Flexible output: Choose between React elements (no `dangerouslySetInnerHTML`) or HTML strings for better performance
-- 📦 Multiple bundle options: Full bundle (~1.2MB gz), web bundle (~695KB gz), or minimal core bundle for fine-grained bundle control
+- 🔐 Flexible output: Choose between React elements (no `dangerouslySetInnerHTML`) or HTML strings
+- 📦 Multiple bundle options: Full bundle (~1.2MB gz), web bundle (~707KB gz), or minimal core bundle for fine-grained bundle control
 - 🖌️ Full support for custom TextMate themes and languages
 - 🧬 Automatic highlighting of embedded languages (e.g. TypeScript fenced inside Markdown) via Shiki's `guessEmbeddedLanguages`
 - 🔧 Supports passing custom Shiki transformers to the highlighter, in addition to all other options supported by `codeToHast`
@@ -203,17 +202,15 @@ createJavaScriptRegexEngine({ forgiving: true });
 
 See [Shiki - RegExp Engines](https://shiki.style/guide/regex-engines) for more info.
 
-
 ## Configuration
 
 ### Common Configuration Options
 
-
 | Option              | Type               | Default         | Description                                                                   |
 | ------------------- | ------------------ | --------------- | ----------------------------------------------------------------------------- |
 | `code`            | `string`           | -               | Code to highlight                                                               |
-| `language`          | `string \| object` | -               | Language to highlight, built-in or custom textmate grammer object             |
-| `theme`             | `string \| object` | `'github-dark'` | Single or multi-theme configuration, built-in or custom textmate theme object |
+| `language`          | `string \| object` | -               | Language to highlight, built-in or custom TextMate grammar object             |
+| `theme`             | `string \| object` | `'github-dark'` | Single or multi-theme configuration, built-in or custom TextMate theme object |
 | `delay`             | `number`           | `0`             | Delay between highlights (in milliseconds)                                    |
 | `customLanguages`   | `array`            | `[]`            | **Deprecated**: use `preloadLanguages` instead. |
 | `preloadLanguages`  | `array`            | `[]`            | Preload bundled language IDs and custom language grammars |
@@ -221,13 +218,14 @@ See [Shiki - RegExp Engines](https://shiki.style/guide/regex-engines) for more i
 | `engine`            | `RegexEngine`      | Oniguruma       | RegExp engine for syntax highlighting (Oniguruma, JavaScript RegExp, or JavaScript Raw) |
 | `showLineNumbers`   | `boolean`          | `false`         | Display line numbers alongside code                                           |
 | `startingLineNumber` | `number`           | `1`             | Starting line number when line numbers are enabled                           |
+| `highlightLineNumbers` | `number[]`     | -               | Displayed line numbers to highlight                                           |
 | `transformers`      | `array`            | `[]`            | Custom Shiki transformers for modifying the highlighting output               |
 | `cssVariablePrefix` | `string`           | `'--shiki'`     | Prefix for CSS variables storing theme colors                                 |
 | `defaultColor`      | `string \| false`  | `'light'`       | Default theme mode when using multiple themes, can also disable default theme |
-| `outputFormat`      | `string`           | `'react'`       | Output format: 'react' for React nodes, 'html' for HTML string                 |
+| `outputFormat`      | `string`           | `'react'`       | Output format: 'react' for React nodes, 'html' for HTML string, or 'tokens' for Shiki tokens (hook only, experimental) |
 | `tabindex`          | `number`           | `0`             | Tab index for the code block                                                  |
 | `decorations`       | `array`            | `[]`            | Custom decorations to wrap the highlighted tokens with                        |
-| `structure`        | `string`           | `classic`  | The structure of the generated HAST and HTML - `classic` or `inline`               |
+| `structure`        | `string`           | `'classic'`  | The structure of the generated HAST and HTML - `classic` or `inline`               |
 | [`codeToHastOptions`](https://github.com/shikijs/shiki/blob/main/packages/types/src/options.ts#L121) | -             | -              | All other options supported by Shiki's `codeToHast`      |
 
 ### Component-specific Props
@@ -246,7 +244,7 @@ The `ShikiHighlighter` component offers minimal built-in styling and customizati
 
 ### Embedded Language Highlighting
 
-react-shiki uses Shiki's [`guessEmbeddedLanguages`](https://shiki.style) to automatically detect, load, and highlight languages nested inside other languages — for example, a TypeScript fenced code block inside a Markdown document will be highlighted as TypeScript without any extra configuration. Embedded languages are dynamically loaded on demand, as long as they exist in your bundle.
+react-shiki uses Shiki's [`guessEmbeddedLanguages`](https://github.com/shikijs/shiki/blob/main/packages/core/src/utils/strings.ts) to automatically detect, load, and highlight languages nested inside other languages. For example, a TypeScript fenced code block inside a Markdown document will be highlighted as TypeScript without any extra configuration. Embedded languages are dynamically loaded on demand, as long as they exist in your bundle.
 
 ### Multi-theme Support
 
@@ -337,7 +335,7 @@ For broader browser support or more control, add CSS snippets to your site to en
 
 ### Custom Themes
 
-Custom themes can be passed as a TextMate theme in JavaScript object. For example, [it should look like this](https://github.com/antfu/textmate-grammars-themes/blob/main/packages/tm-themes/themes/dark-plus.json).
+Custom themes can be passed as a TextMate theme JavaScript object ([example](https://github.com/antfu/textmate-grammars-themes/blob/main/packages/tm-themes/themes/dark-plus.json)).
 
 ```tsx
 import tokyoNight from "../styles/tokyo-night.json";
@@ -353,7 +351,7 @@ const highlightedCode = useShikiHighlighter(code, "tsx", tokyoNight);
 
 ### Custom Languages
 
-Custom languages should be passed as a TextMate grammar in JavaScript object. For example, [it should look like this](https://github.com/shikijs/textmate-grammars-themes/blob/main/packages/tm-grammars/grammars/typescript.json)
+Custom languages should be passed as a TextMate grammar JavaScript object ([example](https://github.com/shikijs/textmate-grammars-themes/blob/main/packages/tm-grammars/grammars/typescript.json)).
 ```tsx
 import mcfunction from "../langs/mcfunction.tmLanguage.json";
 
@@ -390,7 +388,7 @@ const highlightedCode = useShikiHighlighter(code, "typescript", "github-dark", {
 ```
 
 > [!NOTE] 
-> Bundled language are dynamically loaded as needed, and do not need to be preloaded as long as they exist in your bundle.
+> Bundled languages are loaded on demand and do not need to be preloaded.
 
 ### Language Aliases
 
@@ -430,25 +428,16 @@ const highlightedCode = useShikiHighlighter(code, "tsx", "github-dark", {
 
 ### Line Numbers
 
-Display line numbers alongside your code, these are CSS-based
-and can be customized with CSS variables:
+Line numbers are CSS-based and can be customized with CSS variables:
 
 ```tsx
 // Component
 <ShikiHighlighter 
   language="javascript"
   theme="github-dark"
-  showLineNumbers,
+  showLineNumbers
   startingLineNumber={0} // default is 1
->
-  {code}
-</ShikiHighlighter>
-
-<ShikiHighlighter 
-  language="python" 
-  theme="github-dark" 
-  showLineNumbers 
-  startingLineNumber={0}
+  highlightLineNumbers={[2, 4]}
 >
   {code}
 </ShikiHighlighter>
@@ -456,21 +445,21 @@ and can be customized with CSS variables:
 // Hook (import 'react-shiki/css' for line numbers to work)
 const highlightedCode = useShikiHighlighter(code, "javascript", "github-dark", {
   showLineNumbers: true,
-  startingLineNumber: 0, 
+  startingLineNumber: 0,
+  highlightLineNumbers: [2, 4],
 });
 ```
 
 > [!NOTE]
-> When using the hook with line numbers, import the CSS file or provide your own CSS 
-> for `.rs-line-number` (line `span`) and `.rs-has-line-numbers` (container `code` element). <!-- TODO: The CSS vars/classes/selectors are poorly documented -->
+> When using the hook with line numbers or highlighted lines, import the CSS file or provide your own CSS
+> for `.rs-line-number` (line `span`), `.rs-highlighted-line` (line `span`), and `.rs-has-line-numbers` / `.rs-has-highlighted-lines` (container `code` element).
 > ```tsx
 > import 'react-shiki/css';
 > ```
 
-> [!WARNING]
-> Legacy `.line-numbers` / `.has-line-numbers` selectors and unprefixed line-number CSS variables are removed as of 0.10.1.
+`highlightLineNumbers` uses displayed line numbers, so it works with `startingLineNumber`.
 
-Component-internal default classes are namespaced under `rs-*` and shipped inside `@layer base` so app-level utilities can override them more predictably.
+Component-internal default classes are namespaced under `rs-*` and written with zero-specificity `:where()` selectors, so they can't be clobbered by CSS resets (e.g. Tailwind preflight) regardless of stylesheet load order, while any rule in your own CSS — even a bare element selector — overrides them.
 
 Available CSS variables for customization:
 ```css
@@ -481,8 +470,12 @@ Available CSS variables for customization:
 --rs-line-numbers-font-size: inherit;
 --rs-line-numbers-font-weight: inherit;
 --rs-line-numbers-opacity: 1;
+--rs-highlighted-line-background: color-mix(in srgb, currentColor 10%, transparent);
+--rs-highlighted-line-number-foreground: color-mix(in srgb, currentColor 65%, transparent);
 ```
 
+With default styles, highlighted-line backgrounds automatically extend into the `pre`'s horizontal padding, reaching the container edges. When styling the `pre` yourself, highlights cover the code content area.
+
 You can customize them in your own CSS or by using the style prop on the component:
 ```tsx
 <ShikiHighlighter 
@@ -573,9 +566,9 @@ const CodeHighlight = ({ className, children, node, ...props }) => {
 **Method 2: Using the `rehypeInlineCodeProperty` plugin:**
 
 `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`.
+adds an `inline` prop to `react-markdown` code components. It 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 `rehypePlugin` to `react-markdown`:
 
@@ -623,7 +616,7 @@ const CodeHighlight = ({
 
 ### Throttling Real-time Highlighting
 
-For improved performance when highlighting frequently changing code:
+To reduce highlighting work for frequently changing code:
 
 ```tsx
 // With the component
@@ -637,11 +630,11 @@ const highlightedCode = useShikiHighlighter(code, "tsx", "github-dark", {
 });
 ```
 
-### Output Format Optimization
+### Output Formats
 
-`react-shiki` provides two output formats to balance safety and performance:
+`react-shiki` can return highlighted code in three formats:
 
-**React Nodes (Default)** - Safer, no `dangerouslySetInnerHTML` required
+**React Nodes (Default)** - Rendered as React elements, no `dangerouslySetInnerHTML` required
 ```tsx
 // Hook
 const highlightedCode = useShikiHighlighter(code, "tsx", "github-dark");
@@ -652,7 +645,7 @@ const highlightedCode = useShikiHighlighter(code, "tsx", "github-dark");
 </ShikiHighlighter>
 ```
 
-**HTML String** - 15-45% faster performance
+**HTML String** - Rendered via `dangerouslySetInnerHTML`
 ```tsx
 // Hook (returns HTML string, use dangerouslySetInnerHTML to render)
 const highlightedCode = useShikiHighlighter(code, "tsx", "github-dark", {
@@ -665,7 +658,28 @@ const highlightedCode = useShikiHighlighter(code, "tsx", "github-dark", {
 </ShikiHighlighter>
 ```
 
-Choose HTML output when performance is critical and you trust the code source. Use the default React output when handling untrusted content or when security is the primary concern.
+**Shiki Tokens (Experimental)** - Hook-only output for custom renderers
+```tsx
+const highlighted = useShikiHighlighter(code, "tsx", "github-dark", {
+  outputFormat: "tokens",
+});
+
+const rendered = highlighted?.tokens.map((line, i) => (
+  <div key={i}>
+    {line.map((token, j) => (
+      <span key={j} style={{ color: token.color }}>
+        {token.content}
+      </span>
+    ))}
+  </div>
+));
+```
+
+The React and HTML formats spend their rendering work in different phases. HTML output skips per-token React element creation and reconciliation, reducing render-phase overhead for large, one-shot highlights, but each update replaces the code block's entire DOM subtree via `innerHTML`. React output pays for element creation and diffing on every update, but commits only incremental DOM mutations, minimizing DOM churn for frequently re-highlighted code such as streaming LLM output.
+
+HTML output hands the highlighted markup to the DOM via `dangerouslySetInnerHTML`, so only use it with trusted code sources. The default React output is the safe choice for untrusted content.
+
+Token output is for when you need to own rendering yourself; it is intentionally available on the hook, not the `ShikiHighlighter` component, since react-shiki's markup-based features no longer apply once you control the markup. Note that Shiki's `codeToTokens` does not run transformers or decorations, so markup-producing options, including transformers, decorations, line numbers, and `structure`, have no effect on token output.
 
 ---
 

package/dist/{component-CjpuWrgO.d.mts → component-B-gutZRK.d.mts}

@@ -1,5 +1,5 @@
 import { ReactElement } from "react";
-import { BundledHighlighterOptions, BundledLanguage, BundledTheme, CodeOptionsMultipleThemes, CodeToHastOptions, Highlighter, HighlighterCore, LanguageRegistration, SpecialLanguage, StringLiteralUnion, ThemeRegistrationAny } from "shiki";
+import { BundledHighlighterOptions, BundledLanguage, BundledTheme, CodeOptionsMultipleThemes, CodeToHastOptions, Highlighter, HighlighterCore, LanguageRegistration, SpecialLanguage, StringLiteralUnion, ThemeRegistrationAny, TokensResult } from "shiki";
 
 //#region ../node_modules/.pnpm/@types+unist@3.0.3/node_modules/@types/unist/index.d.ts
 // ## Interfaces
@@ -362,7 +362,12 @@ interface ReactShikiOptions {
   /**
    * Output format for the highlighted code.
    * - 'react': Returns React nodes (default, safer)
-   * - 'html': Returns HTML string (~15-45% faster, requires dangerouslySetInnerHTML)
+   * - 'html': Returns HTML string (rendered via dangerouslySetInnerHTML)
+   *
+   * The hook additionally accepts 'tokens' (experimental) to return raw
+   * Shiki tokens for custom rendering. It is deliberately excluded here
+   * and only enters through the hook's generic signature, so option
+   * objects typed with this interface keep the classic return type.
    * @default 'react'
    */
   outputFormat?: 'react' | 'html';
@@ -404,6 +409,10 @@ interface ReactShikiOptions {
    * @default 1
    */
   startingLineNumber?: number;
+  /**
+   * Displayed line numbers to highlight
+   */
+  highlightLineNumbers?: number[];
 }
 /**
  * Configuration options for the syntax highlighter
@@ -414,10 +423,28 @@ interface HighlighterOptions extends ReactShikiOptions, Pick<CodeOptionsMultiple
  * State for the throttling logic
  */
 /**
- * Public API signature for the useShikiHighlighter hook.
+ * Supported output formats and their corresponding result shapes.
  */
-type HighlightedCode = ReactElement | string | null;
-type UseShikiHighlighter = (code: string, lang: Language, themeInput: Theme | Themes, options?: HighlighterOptions) => HighlightedCode;
+type OutputFormat = 'react' | 'html' | 'tokens';
+interface HighlightResultMap {
+  react: ReactElement;
+  html: string;
+  tokens: TokensResult;
+}
+type HighlightResult<F extends OutputFormat = 'react'> = HighlightResultMap[F] | null;
+/**
+ * Per-call options shape: every highlighter option except `outputFormat`,
+ * plus a narrowed `outputFormat?: F` so the return type can be inferred
+ * from the format the caller actually passes.
+ *
+ * This is the only place 'tokens' is accepted. Keeping it out of
+ * `HighlighterOptions` means values typed with that interface infer
+ * `F = 'react' | 'html'` and keep their pre-tokens return type.
+ */
+type HighlighterOptionsFor<F extends OutputFormat> = Omit<HighlighterOptions, 'outputFormat'> & {
+  outputFormat?: F;
+};
+type UseShikiHighlighter = <F extends OutputFormat = 'react'>(code: string, lang: Language, themeInput: Theme | Themes, options?: HighlighterOptionsFor<F>) => HighlightResult<F>;
 //#endregion
 //#region src/lib/plugins.d.ts
 /**
@@ -504,6 +531,10 @@ interface ShikiHighlighterProps extends HighlighterOptions {
    * @default 1
    */
   startingLineNumber?: number;
+  /**
+   * Displayed line numbers to highlight
+   */
+  highlightLineNumbers?: number[];
   /**
    * The HTML element that wraps the generated code block.
    * @default 'div'
@@ -511,5 +542,5 @@ interface ShikiHighlighterProps extends HighlighterOptions {
   as?: React.ElementType;
 }
 //#endregion
-export { HighlighterOptions as a, Themes as c, Element as i, UseShikiHighlighter as l, isInlineCode as n, Language as o, rehypeInlineCodeProperty as r, Theme as s, ShikiHighlighterProps as t };
-//# sourceMappingURL=component-CjpuWrgO.d.mts.map
+export { HighlightResult as a, Language as c, Themes as d, UseShikiHighlighter as f, Element as i, OutputFormat as l, isInlineCode as n, HighlighterOptions as o, rehypeInlineCodeProperty as r, HighlighterOptionsFor as s, ShikiHighlighterProps as t, Theme as u };
+//# sourceMappingURL=component-B-gutZRK.d.mts.map

package/dist/{component-CYq7SnJ0.mjs → component-DdW14SOw.mjs}

@@ -95,18 +95,19 @@ const resolveLanguage = (lang, customLanguages, langAliases, preloadLanguages) =
 		languageId = lang.name;
 		primaryLang = lang;
 	} else {
-		const lowerLang = lang.toLowerCase();
+		const normalizedLang = lang.trim();
+		const lowerLang = normalizedLang.toLowerCase();
 		const matches = (str) => str?.toLowerCase() === lowerLang;
 		const customMatch = customMatchPool.find((candidate) => typeof candidate === "object" && candidate != null && !!(matches(candidate.name) || matches(candidate.scopeName) || matches(candidate.scopeName?.split(".").pop()) || candidate.aliases?.some(matches) || candidate.fileTypes?.some(matches)));
 		if (customMatch) {
-			languageId = customMatch.name || lang;
+			languageId = customMatch.name || normalizedLang;
 			primaryLang = customMatch;
-		} else if (langAliases?.[lang]) {
-			languageId = langAliases[lang];
-			primaryLang = langAliases[lang];
+		} else if (langAliases?.[normalizedLang]) {
+			languageId = langAliases[normalizedLang];
+			primaryLang = langAliases[normalizedLang];
 		} else {
-			languageId = lang;
-			primaryLang = lang;
+			languageId = normalizedLang;
+			primaryLang = normalizedLang;
 		}
 	}
 	return {
@@ -155,6 +156,7 @@ function resolveTheme(themeInput) {
 }
 //#endregion
 //#region src/lib/transformers.ts
+const toLineNumberSet = (lineNumbers) => new Set(lineNumbers.filter(Number.isInteger));
 /**
 * Creates a transformer that enables line numbers display
 * @param startLine - The starting line number (defaults to 1)
@@ -179,6 +181,25 @@ function lineNumbersTransformer(startLine = 1) {
 		}
 	};
 }
+/**
+* Creates a transformer that marks selected displayed line numbers.
+* @param lineNumbers - Displayed line numbers to highlight
+* @param startLine - The starting line number (defaults to 1)
+*/
+function highlightedLinesTransformer(lineNumbers, startLine = 1) {
+	const highlightedLines = toLineNumberSet(lineNumbers);
+	return {
+		name: "react-shiki:highlight-lines",
+		code(node) {
+			this.addClassToHast(node, "rs-has-highlighted-lines");
+		},
+		line(node, line) {
+			const displayedLine = startLine + line - 1;
+			if (highlightedLines.has(displayedLine)) this.addClassToHast(node, "rs-highlighted-line");
+			return node;
+		}
+	};
+}
 //#endregion
 //#region src/lib/options.ts
 const buildThemeOptions = (resolvedTheme, defaultColor, cssVariablePrefix) => {
@@ -190,9 +211,10 @@ const buildThemeOptions = (resolvedTheme, defaultColor, cssVariablePrefix) => {
 	return { theme: resolvedTheme.theme };
 };
 const buildShikiOptions = (languageId, resolvedTheme, options) => {
-	const { delay, customLanguages, preloadLanguages, outputFormat, highlighter, langAlias, engine, defaultColor, cssVariablePrefix, showLineNumbers, startingLineNumber, transformers: userTransformers, ...shikiPassthrough } = options;
+	const { delay, customLanguages, preloadLanguages, outputFormat, highlighter, langAlias, engine, defaultColor, cssVariablePrefix, showLineNumbers, startingLineNumber, highlightLineNumbers, transformers: userTransformers, ...shikiPassthrough } = options;
 	const transformers = [...userTransformers || []];
 	if (showLineNumbers) transformers.push(lineNumbersTransformer(startingLineNumber));
+	if (highlightLineNumbers?.length) transformers.push(highlightedLinesTransformer(highlightLineNumbers, startingLineNumber));
 	return {
 		lang: languageId,
 		...buildThemeOptions(resolvedTheme, defaultColor, cssVariablePrefix),
@@ -204,6 +226,7 @@ const buildShikiOptions = (languageId, resolvedTheme, options) => {
 //#region src/lib/hook.ts
 async function highlight(code, resolved, opts, factory) {
 	const { languageId, langsToLoad, themesToLoad, shikiOptions } = resolved;
+	const format = opts.outputFormat ?? "react";
 	const highlighter = opts.highlighter ?? await (async () => {
 		const hl = await factory(langsToLoad, themesToLoad, opts.engine);
 		await hl.loadLanguage(...getEmbeddedLanguages(code, languageId, hl));
@@ -214,11 +237,16 @@ async function highlight(code, resolved, opts, factory) {
 		...shikiOptions,
 		lang: language
 	};
-	return opts.outputFormat === "html" ? highlighter.codeToHtml(code, options) : toJsxRuntime(highlighter.codeToHast(code, options), {
-		jsx,
-		jsxs,
-		Fragment
-	});
+	const outputs = {
+		react: () => toJsxRuntime(highlighter.codeToHast(code, options), {
+			jsx,
+			jsxs,
+			Fragment
+		}),
+		html: () => highlighter.codeToHtml(code, options),
+		tokens: () => highlighter.codeToTokens(code, options)
+	};
+	return (outputs[format] ?? outputs.react)();
 }
 const useHighlight = (code, lang, themeInput, options = {}, highlighterFactory) => {
 	const [highlightedCode, setHighlightedCode] = useState(null);
@@ -300,12 +328,26 @@ const isInlineCode = (node) => {
 };
 //#endregion
 //#region src/lib/component.tsx
+let warnedTokensOutputFormat = false;
+/**
+* The component's props exclude `outputFormat: 'tokens'`, but plain-JS
+* callers can still pass it. Tokens are not renderable React children,
+* so fall back to 'react' instead of crashing the render.
+*/
+const resolveOutputFormat = (outputFormat) => {
+	if (outputFormat !== "tokens") return outputFormat;
+	if (!warnedTokensOutputFormat) {
+		warnedTokensOutputFormat = true;
+		console.warn("[react-shiki] outputFormat 'tokens' is only supported by the useShikiHighlighter hook, falling back to 'react'");
+	}
+	return "react";
+};
 /**
 * Base ShikiHighlighter component factory.
 * This creates a component that uses the provided hook implementation.
 */
 const createShikiHighlighterComponent = (useShikiHighlighterImpl) => {
-	return forwardRef(({ language, theme, delay, transformers, defaultColor, cssVariablePrefix, addDefaultStyles = true, style, langStyle, className, langClassName, showLanguage = true, showLineNumbers = false, startingLineNumber = 1, children: code, as: Element = "div", customLanguages, preloadLanguages, ...shikiOptions }, ref) => {
+	return forwardRef(({ language, theme, delay, transformers, defaultColor, cssVariablePrefix, addDefaultStyles = true, style, langStyle, className, langClassName, showLanguage = true, showLineNumbers = false, startingLineNumber = 1, highlightLineNumbers, children: code, as: Element = "div", customLanguages, preloadLanguages, outputFormat, ...shikiOptions }, ref) => {
 		const options = {
 			delay,
 			transformers,
@@ -315,6 +357,8 @@ const createShikiHighlighterComponent = (useShikiHighlighterImpl) => {
 			defaultColor,
 			cssVariablePrefix,
 			startingLineNumber,
+			highlightLineNumbers,
+			outputFormat: resolveOutputFormat(outputFormat),
 			...shikiOptions
 		};
 		const displayLanguageId = typeof language === "object" ? language.name || null : language?.trim() || null;
@@ -341,4 +385,4 @@ const createShikiHighlighterComponent = (useShikiHighlighterImpl) => {
 //#endregion
 export { isLoadableLanguage as a, useHighlight as i, isInlineCode as n, rehypeInlineCodeProperty as r, createShikiHighlighterComponent as t };
 
-//# sourceMappingURL=component-CYq7SnJ0.mjs.map
+//# sourceMappingURL=component-DdW14SOw.mjs.map

package/dist/component-DdW14SOw.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-DdW14SOw.mjs","names":[],"sources":["../src/lib/utils.ts","../src/lib/language.ts","../src/lib/theme.ts","../src/lib/transformers.ts","../src/lib/options.ts","../src/lib/hook.ts","../src/lib/plugins.ts","../src/lib/component.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { dequal } from 'dequal';\n\nimport type { TimeoutState } from './types';\n\n/**\n * Returns a referentially stable version of `value` that only updates when content changes.\n * Uses reference equality as a fast path and deep comparison to prevent unnecessary updates.\n */\nexport const useStableValue = <T>(value: T): T => {\n  const ref = useRef(value);\n\n  if (value !== ref.current && !dequal(value, ref.current)) {\n    ref.current = value;\n  }\n\n  return ref.current;\n};\n\n/**\n * Optionally throttles rapid sequential highlighting operations\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  clearTimeout(timeoutControl.current.timeoutId);\n\n  const delay = Math.max(\n    0,\n    timeoutControl.current.nextAllowedTime - Date.now()\n  );\n  timeoutControl.current.timeoutId = setTimeout(() => {\n    performHighlight();\n    timeoutControl.current.nextAllowedTime = Date.now() + throttleMs;\n  }, delay);\n};\n","import type { Language } from './types';\nimport { guessEmbeddedLanguages, isSpecialLang } from 'shiki/core';\nimport type {\n  DynamicImportLanguageRegistration,\n  Highlighter,\n  HighlighterCore,\n  LanguageInput,\n  LanguageRegistration,\n} from 'shiki';\n\nexport const FALLBACK_LANGUAGE = 'plaintext';\n\nexport const getEmbeddedLanguages = (\n  code: string,\n  languageId: string,\n  highlighter: Highlighter | HighlighterCore\n): LanguageInput[] => {\n  const bundled: Record<string, LanguageInput> =\n    highlighter.getBundledLanguages();\n  return guessEmbeddedLanguages(code, languageId).flatMap(\n    (language) => bundled[language] ?? []\n  );\n};\n\n/**\n * Resolved languages and metadata\n */\ntype LanguageResult = {\n  languageId: string;\n  langsToLoad: Language[];\n};\n\nconst toArray = <T>(value?: T | T[]): T[] =>\n  value == null ? [] : Array.isArray(value) ? value : [value];\n\nconst languageKey = (lang: Language): string | null => {\n  if (lang == null) return null;\n  if (typeof lang === 'string') return `s:${lang}`;\n  return `o:${lang.name}::${lang.scopeName}`;\n};\n\nconst dedupeLanguages = (langs: Language[]): Language[] => {\n  const seen = new Set<string>();\n  const deduped: Language[] = [];\n\n  for (const lang of langs) {\n    const key = languageKey(lang);\n    if (key == null || seen.has(key)) continue;\n    seen.add(key);\n    deduped.push(lang);\n  }\n\n  return deduped;\n};\n\n/**\n * Used in factories to check if language is supported.\n * Objects are validated as grammar registrations (name + scopeName).\n */\nexport const isLoadableLanguage = <T extends string>(\n  lang: Language,\n  bundledLanguages: Record<T, DynamicImportLanguageRegistration>\n): lang is NonNullable<Language> => {\n  if (lang == null) return false;\n  if (typeof lang === 'string') return lang in bundledLanguages;\n  return (\n    typeof lang.name === 'string' && typeof lang.scopeName === 'string'\n  );\n};\n\n/**\n * Used in hook to resolve loaded language for highlighting.\n * Falls back to \"plaintext\" if not supported.\n */\nexport const resolveLoadedLanguage = (\n  languageId: string,\n  loadedLanguages: string[]\n): string =>\n  isSpecialLang(languageId) || loadedLanguages.includes(languageId)\n    ? languageId\n    : FALLBACK_LANGUAGE;\n\n/**\n * Resolves the language input to standardized IDs and objects for Shiki\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 *   - langsToLoad: The language objects/string ids to load\n */\nexport const resolveLanguage = (\n  lang: Language,\n  customLanguages?: LanguageRegistration | LanguageRegistration[],\n  langAliases?: Record<string, string>,\n  preloadLanguages?: Language | Language[]\n): LanguageResult => {\n  const customLangs = toArray(customLanguages);\n  const preloadLangs = toArray(preloadLanguages);\n  const customMatchPool = [...customLangs, ...preloadLangs];\n  let languageId = FALLBACK_LANGUAGE;\n  let primaryLang: Language;\n\n  // Language is null or empty string\n  if (lang == null || (typeof lang === 'string' && !lang.trim())) {\n    return {\n      languageId,\n      langsToLoad: dedupeLanguages([...preloadLangs, ...customLangs]),\n    };\n  }\n\n  // Language is custom object\n  if (typeof lang === 'object') {\n    languageId = lang.name;\n    primaryLang = lang;\n  } else {\n    // Language is string\n    const normalizedLang = lang.trim();\n    const lowerLang = normalizedLang.toLowerCase();\n    const matches = (str: string | undefined): boolean =>\n      str?.toLowerCase() === lowerLang;\n\n    // Check custom registrations (from both customLanguages and preloadLanguages)\n    const customMatch = customMatchPool.find(\n      (candidate): candidate is LanguageRegistration =>\n        typeof candidate === 'object' &&\n        candidate != null &&\n        !!(\n          matches(candidate.name) ||\n          matches(candidate.scopeName) ||\n          matches(candidate.scopeName?.split('.').pop()) ||\n          candidate.aliases?.some(matches) ||\n          candidate.fileTypes?.some(matches)\n        )\n    );\n\n    if (customMatch) {\n      languageId = customMatch.name || normalizedLang;\n      primaryLang = customMatch;\n    } else if (langAliases?.[normalizedLang]) {\n      // Language is aliased\n      languageId = langAliases[normalizedLang];\n      primaryLang = langAliases[normalizedLang];\n    } else {\n      // For any other string, pass it through to the factory\n      languageId = normalizedLang;\n      primaryLang = normalizedLang;\n    }\n  }\n\n  return {\n    languageId,\n    langsToLoad: dedupeLanguages([\n      primaryLang,\n      ...preloadLangs,\n      ...customLangs,\n    ]),\n  };\n};\n","import type { Theme, Themes } from './types';\nimport type { ThemeRegistrationAny } from 'shiki/core';\n\nexport const DEFAULT_THEMES: Themes = {\n  light: 'github-light',\n  dark: 'github-dark',\n};\n\nexport type ResolvedTheme =\n  | { isMulti: true; themes: Themes; themesToLoad: Theme[] }\n  | { isMulti: false; theme: Theme; themesToLoad: Theme[] };\n\nconst isTextmateTheme = (\n  value: unknown\n): value is ThemeRegistrationAny => {\n  if (typeof value !== 'object' || value === null) return false;\n  const v = value as Partial<ThemeRegistrationAny> & {\n    settings?: unknown;\n  };\n  const hasTokens =\n    Array.isArray(v.tokenColors) || Array.isArray(v.settings);\n  const hasIdentity =\n    typeof v.name === 'string' || typeof v.type === 'string';\n  return hasTokens && hasIdentity;\n};\n\nexport function resolveTheme(themeInput: Theme | Themes): ResolvedTheme {\n  if (\n    typeof themeInput !== 'object' ||\n    themeInput === null ||\n    isTextmateTheme(themeInput)\n  ) {\n    return {\n      isMulti: false,\n      theme: themeInput,\n      themesToLoad: [themeInput],\n    };\n  }\n\n  const validEntries = Object.entries(themeInput).filter(\n    ([key, value]) =>\n      key.trim() !== '' &&\n      ((typeof value === 'string' && value.trim() !== '') ||\n        isTextmateTheme(value))\n  );\n\n  if (validEntries.length === 0) {\n    console.warn(\n      '[react-shiki] invalid multi-theme config, falling back to defaults'\n    );\n    return {\n      isMulti: true,\n      themes: DEFAULT_THEMES,\n      themesToLoad: Object.values(DEFAULT_THEMES),\n    };\n  }\n\n  if (validEntries.length !== Object.keys(themeInput).length) {\n    console.warn(\n      '[react-shiki] multi-theme config contained invalid entries; they were dropped'\n    );\n  }\n\n  const themes = Object.fromEntries(validEntries) as Themes;\n  return {\n    isMulti: true,\n    themes,\n    themesToLoad: validEntries.map(([, value]) => value as Theme),\n  };\n}\n","import type { ShikiTransformer } from 'shiki/core';\n\nconst toLineNumberSet = (lineNumbers: readonly number[]) =>\n  new Set(lineNumbers.filter(Number.isInteger));\n\n/**\n * Creates a transformer that enables line numbers display\n * @param startLine - The starting line number (defaults to 1)\n */\nexport function lineNumbersTransformer(startLine = 1): ShikiTransformer {\n  return {\n    name: 'react-shiki:line-numbers',\n    code(node) {\n      this.addClassToHast(node, 'rs-has-line-numbers');\n      if (startLine !== 1) {\n        const existingStyle = (node.properties?.style as string) || '';\n        const newStyle = existingStyle\n          ? `${existingStyle}; --line-start: ${startLine}`\n          : `--line-start: ${startLine}`;\n        node.properties = {\n          ...node.properties,\n          style: newStyle,\n        };\n      }\n    },\n    line(node) {\n      this.addClassToHast(node, 'rs-line-number');\n      return node;\n    },\n  };\n}\n\n/**\n * Creates a transformer that marks selected displayed line numbers.\n * @param lineNumbers - Displayed line numbers to highlight\n * @param startLine - The starting line number (defaults to 1)\n */\nexport function highlightedLinesTransformer(\n  lineNumbers: readonly number[],\n  startLine = 1\n): ShikiTransformer {\n  const highlightedLines = toLineNumberSet(lineNumbers);\n\n  return {\n    name: 'react-shiki:highlight-lines',\n    code(node) {\n      this.addClassToHast(node, 'rs-has-highlighted-lines');\n    },\n    line(node, line) {\n      const displayedLine = startLine + line - 1;\n\n      if (highlightedLines.has(displayedLine)) {\n        this.addClassToHast(node, 'rs-highlighted-line');\n      }\n\n      return node;\n    },\n  };\n}\n","import type {\n  BundledTheme,\n  CodeOptionsMultipleThemes,\n  CodeOptionsSingleTheme,\n  CodeToHastOptions,\n} from 'shiki';\n\nimport type {\n  HighlighterOptions,\n  HighlighterOptionsFor,\n  OutputFormat,\n} from './types';\nimport type { ResolvedTheme } from './theme';\nimport {\n  highlightedLinesTransformer,\n  lineNumbersTransformer,\n} from './transformers';\n\nconst buildThemeOptions = (\n  resolvedTheme: ResolvedTheme,\n  defaultColor: HighlighterOptions['defaultColor'],\n  cssVariablePrefix: HighlighterOptions['cssVariablePrefix']\n):\n  | CodeOptionsMultipleThemes<BundledTheme>\n  | CodeOptionsSingleTheme<BundledTheme> => {\n  if (resolvedTheme.isMulti) {\n    return {\n      themes: resolvedTheme.themes,\n      defaultColor,\n      cssVariablePrefix,\n    };\n  }\n\n  return {\n    theme: resolvedTheme.theme,\n  };\n};\n\nexport const buildShikiOptions = (\n  languageId: string,\n  resolvedTheme: ResolvedTheme,\n  options: HighlighterOptionsFor<OutputFormat>\n): CodeToHastOptions => {\n  const {\n    delay,\n    customLanguages,\n    preloadLanguages,\n    outputFormat,\n    highlighter,\n    langAlias,\n    engine,\n    defaultColor,\n    cssVariablePrefix,\n    showLineNumbers,\n    startingLineNumber,\n    highlightLineNumbers,\n    transformers: userTransformers,\n    ...shikiPassthrough\n  } = options;\n\n  const transformers = [...(userTransformers || [])];\n  if (showLineNumbers) {\n    transformers.push(lineNumbersTransformer(startingLineNumber));\n  }\n  if (highlightLineNumbers?.length) {\n    transformers.push(\n      highlightedLinesTransformer(\n        highlightLineNumbers,\n        startingLineNumber\n      )\n    );\n  }\n\n  return {\n    lang: languageId,\n    ...buildThemeOptions(resolvedTheme, defaultColor, cssVariablePrefix),\n    ...shikiPassthrough,\n    transformers,\n  };\n};\n","import { useEffect, useMemo, useRef, useState } from 'react';\nimport { jsx, jsxs, Fragment } from 'react/jsx-runtime';\nimport { toJsxRuntime } from 'hast-util-to-jsx-runtime';\nimport type { CodeToHastOptions } from 'shiki';\n\nimport type {\n  HighlighterFactory,\n  HighlighterOptions,\n  HighlighterOptionsFor,\n  HighlightResult,\n  HighlightResultMap,\n  Language,\n  OutputFormat,\n  Theme,\n  Themes,\n  TimeoutState,\n} from './types';\n\nimport { throttleHighlighting, useStableValue } from './utils';\nimport {\n  getEmbeddedLanguages,\n  resolveLanguage,\n  resolveLoadedLanguage,\n} from './language';\nimport { resolveTheme } from './theme';\nimport { buildShikiOptions } from './options';\n\nexport async function highlight<F extends OutputFormat = 'react'>(\n  code: string,\n  resolved: {\n    languageId: string;\n    langsToLoad: Language[];\n    themesToLoad: Theme[];\n    shikiOptions: CodeToHastOptions;\n  },\n  opts: Pick<HighlighterOptions, 'highlighter' | 'engine'> & {\n    outputFormat?: F;\n  },\n  factory: HighlighterFactory\n): Promise<HighlightResultMap[F]> {\n  const { languageId, langsToLoad, themesToLoad, shikiOptions } =\n    resolved;\n  const format: OutputFormat = opts.outputFormat ?? 'react';\n\n  const highlighter =\n    opts.highlighter ??\n    (await (async () => {\n      const hl = await factory(langsToLoad, themesToLoad, opts.engine);\n      await hl.loadLanguage(\n        ...getEmbeddedLanguages(code, languageId, hl)\n      );\n      return hl;\n    })());\n\n  const language = resolveLoadedLanguage(\n    languageId,\n    highlighter.getLoadedLanguages()\n  );\n  const options = { ...shikiOptions, lang: language };\n\n  const outputs: { [K in OutputFormat]: () => HighlightResultMap[K] } = {\n    react: () =>\n      toJsxRuntime(highlighter.codeToHast(code, options), {\n        jsx,\n        jsxs,\n        Fragment,\n      }),\n    html: () => highlighter.codeToHtml(code, options),\n    tokens: () => highlighter.codeToTokens(code, options),\n  };\n\n  // Untyped call sites can pass formats outside OutputFormat; degrade to\n  // react rendering like the pre-tokens ternary did instead of throwing.\n  return (outputs[format] ?? outputs.react)() as HighlightResultMap[F];\n}\n\nexport const useHighlight = <F extends OutputFormat = 'react'>(\n  code: string,\n  lang: Language,\n  themeInput: Theme | Themes,\n  options: HighlighterOptionsFor<F> = {},\n  highlighterFactory: HighlighterFactory\n): HighlightResult<F> => {\n  const [highlightedCode, setHighlightedCode] =\n    useState<HighlightResult<F>>(null);\n\n  const stableLang = useStableValue(lang);\n  const stableTheme = useStableValue(themeInput);\n  const stableOpts = useStableValue(options);\n\n  const resolved = useMemo(() => {\n    const { languageId, langsToLoad } = resolveLanguage(\n      stableLang,\n      stableOpts.customLanguages,\n      stableOpts.langAlias,\n      stableOpts.preloadLanguages\n    );\n\n    const theme = resolveTheme(stableTheme);\n\n    const shikiOptions = buildShikiOptions(languageId, theme, stableOpts);\n    return {\n      languageId,\n      langsToLoad,\n      themesToLoad: theme.themesToLoad,\n      shikiOptions,\n    };\n  }, [stableLang, stableTheme, stableOpts]);\n\n  const requestIdRef = useRef(0);\n\n  const timeoutControl = useRef<TimeoutState>({\n    nextAllowedTime: 0,\n    timeoutId: undefined,\n  });\n\n  // Factory is invoked imperatively; its identity is not semantic, so it must\n  // not invalidate the effect on every render. See issue #161.\n  const highlighterFactoryRef = useRef(highlighterFactory);\n  highlighterFactoryRef.current = highlighterFactory;\n\n  useEffect(() => {\n    const requestId = ++requestIdRef.current;\n\n    if (!resolved.languageId) return;\n\n    const run = async () => {\n      try {\n        const result = await highlight<F>(\n          code,\n          resolved,\n          stableOpts,\n          highlighterFactoryRef.current\n        );\n        if (requestId === requestIdRef.current) {\n          setHighlightedCode(result);\n        }\n      } catch (error) {\n        console.error('[react-shiki] highlight failed', error);\n      }\n    };\n\n    if (stableOpts.delay) {\n      throttleHighlighting(run, timeoutControl, stableOpts.delay);\n    } else {\n      run();\n    }\n\n    return () => {\n      clearTimeout(timeoutControl.current.timeoutId);\n    };\n  }, [code, resolved, stableOpts]);\n\n  return highlightedCode;\n};\n","import { visit } from 'unist-util-visit';\nimport type { Root } from 'hast';\nimport type { 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: Root): undefined => {\n    visit(tree, 'element', (node: Element, _index, parent) => {\n      if (\n        node.tagName === 'code' &&\n        parent?.type === 'element' &&\n        parent.tagName !== 'pre'\n      ) {\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","import '../styles/component.css';\nimport '../styles/features.css';\nimport { clsx } from 'clsx';\n\nimport type {\n  HighlighterOptions,\n  Language,\n  OutputFormat,\n  Theme,\n  Themes,\n  UseShikiHighlighter,\n} from './types';\nimport { forwardRef } from 'react';\n\nlet warnedTokensOutputFormat = false;\n\n/**\n * The component's props exclude `outputFormat: 'tokens'`, but plain-JS\n * callers can still pass it. Tokens are not renderable React children,\n * so fall back to 'react' instead of crashing the render.\n */\nconst resolveOutputFormat = (\n  outputFormat: HighlighterOptions['outputFormat']\n): HighlighterOptions['outputFormat'] => {\n  if ((outputFormat as OutputFormat) !== 'tokens') return outputFormat;\n\n  if (!warnedTokensOutputFormat) {\n    warnedTokensOutputFormat = true;\n    console.warn(\n      \"[react-shiki] outputFormat 'tokens' is only supported by the useShikiHighlighter hook, falling back to 'react'\"\n    );\n  }\n  return 'react';\n};\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   * Whether to show line numbers\n   * @default false\n   */\n  showLineNumbers?: boolean;\n\n  /**\n   * Starting line number (when showLineNumbers is true)\n   * @default 1\n   */\n  startingLineNumber?: number;\n\n  /**\n   * Displayed line numbers to highlight\n   */\n  highlightLineNumbers?: number[];\n\n  /**\n   * The HTML element that wraps the generated code block.\n   * @default 'div'\n   */\n  as?: React.ElementType;\n}\n\n/**\n * Base ShikiHighlighter component factory.\n * This creates a component that uses the provided hook implementation.\n */\nexport const createShikiHighlighterComponent = (\n  useShikiHighlighterImpl: UseShikiHighlighter\n) => {\n  return forwardRef<HTMLElement, ShikiHighlighterProps>(\n    (\n      {\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        showLineNumbers = false,\n        startingLineNumber = 1,\n        highlightLineNumbers,\n        children: code,\n        as: Element = 'div',\n        customLanguages,\n        preloadLanguages,\n        outputFormat,\n        ...shikiOptions\n      },\n      ref\n    ) => {\n      const options: HighlighterOptions = {\n        delay,\n        transformers,\n        customLanguages,\n        preloadLanguages,\n        showLineNumbers,\n        defaultColor,\n        cssVariablePrefix,\n        startingLineNumber,\n        highlightLineNumbers,\n        outputFormat: resolveOutputFormat(outputFormat),\n        ...shikiOptions,\n      };\n\n      const displayLanguageId =\n        typeof language === 'object'\n          ? language.name || null\n          : language?.trim() || null;\n\n      const highlightedCode = useShikiHighlighterImpl(\n        code,\n        language,\n        theme,\n        options\n      );\n\n      return (\n        <Element\n          ref={ref}\n          data-testid=\"shiki-container\"\n          data-slot=\"container\"\n          className={clsx(\n            'rs-root',\n            'not-prose',\n            addDefaultStyles && 'rs-default-styles',\n            className\n          )}\n          style={style}\n        >\n          {showLanguage && displayLanguageId ? (\n            <span\n              id=\"language-label\"\n              data-slot=\"language-label\"\n              className={clsx('rs-language-label', langClassName)}\n              style={langStyle}\n            >\n              {displayLanguageId}\n            </span>\n          ) : null}\n          {typeof highlightedCode === 'string' ? (\n            <div\n              data-slot=\"content\"\n              dangerouslySetInnerHTML={{ __html: highlightedCode }}\n            />\n          ) : (\n            highlightedCode\n          )}\n        </Element>\n      );\n    }\n  );\n};\n"],"mappings":"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"}

package/dist/core.d.mts

@@ -1,6 +1,5 @@
-import { a as HighlighterOptions, c as Themes, i as Element, l as UseShikiHighlighter, n as isInlineCode, o as Language, r as rehypeInlineCodeProperty, s as Theme, t as ShikiHighlighterProps } from "./component-CjpuWrgO.mjs";
-import * as _$react from "react";
-import { LanguageRegistration, createHighlighterCore } from "shiki/core";
+import { a as HighlightResult, c as Language, d as Themes, f as UseShikiHighlighter, i as Element, l as OutputFormat, n as isInlineCode, o as HighlighterOptions, r as rehypeInlineCodeProperty, s as HighlighterOptionsFor, t as ShikiHighlighterProps, u as Theme } from "./component-B-gutZRK.mjs";
+import { LanguageRegistration, TokensResult, createHighlighterCore } from "shiki/core";
 import { createOnigurumaEngine } from "shiki/engine/oniguruma";
 import { createJavaScriptRawEngine, createJavaScriptRegexEngine } from "shiki/engine/javascript";
 
@@ -12,7 +11,7 @@ import { createJavaScriptRawEngine, createJavaScriptRegexEngine } from "shiki/en
  * @param lang - Language (bundled or custom)
  * @param theme - Theme (bundled, multi-theme, or custom)
  * @param options - react-shiki options + shiki options
- * @returns Highlighted code as React elements or HTML string
+ * @returns Highlighted code as React elements (default), HTML string, or Shiki tokens, based on `outputFormat`
  *
  * @example
  * ```tsx
@@ -43,7 +42,7 @@ declare const useShikiHighlighter: UseShikiHighlighter;
  * ShikiHighlighter component using a custom highlighter.
  * Requires a highlighter to be provided.
  */
-declare const ShikiHighlighter: _$react.ForwardRefExoticComponent<ShikiHighlighterProps & _$react.RefAttributes<HTMLElement>>;
+declare const ShikiHighlighter: import("react").ForwardRefExoticComponent<ShikiHighlighterProps & import("react").RefAttributes<HTMLElement>>;
 //#endregion
-export { type Element, type HighlighterOptions, type Language, type LanguageRegistration, ShikiHighlighter, ShikiHighlighter as default, type ShikiHighlighterProps, type Theme, type Themes, type UseShikiHighlighter, createHighlighterCore, createJavaScriptRawEngine, createJavaScriptRegexEngine, createOnigurumaEngine, isInlineCode, rehypeInlineCodeProperty, useShikiHighlighter };
+export { type Element, type HighlightResult, type HighlighterOptions, type HighlighterOptionsFor, type Language, type LanguageRegistration, type OutputFormat, ShikiHighlighter, ShikiHighlighter as default, type ShikiHighlighterProps, type Theme, type Themes, type TokensResult, type UseShikiHighlighter, createHighlighterCore, createJavaScriptRawEngine, createJavaScriptRegexEngine, createOnigurumaEngine, isInlineCode, rehypeInlineCodeProperty, useShikiHighlighter };
 //# sourceMappingURL=core.d.mts.map

package/dist/core.mjs

@@ -1,4 +1,4 @@
-import { i as useHighlight, n as isInlineCode, r as rehypeInlineCodeProperty, t as createShikiHighlighterComponent } from "./component-CYq7SnJ0.mjs";
+import { i as useHighlight, n as isInlineCode, r as rehypeInlineCodeProperty, t as createShikiHighlighterComponent } from "./component-DdW14SOw.mjs";
 import { createHighlighterCore } from "shiki/core";
 import { createOnigurumaEngine } from "shiki/engine/oniguruma";
 import { createJavaScriptRawEngine, createJavaScriptRegexEngine } from "shiki/engine/javascript";
@@ -20,7 +20,7 @@ function validateCoreHighlighter(highlighter) {
 * @param lang - Language (bundled or custom)
 * @param theme - Theme (bundled, multi-theme, or custom)
 * @param options - react-shiki options + shiki options
-* @returns Highlighted code as React elements or HTML string
+* @returns Highlighted code as React elements (default), HTML string, or Shiki tokens, based on `outputFormat`
 *
 * @example
 * ```tsx

package/dist/core.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"core.mjs","names":[],"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 { useHighlight } from './lib/hook';\nimport { validateCoreHighlighter } from './bundles/core';\nimport type { UseShikiHighlighter } from './lib/types';\n\nexport { isInlineCode, rehypeInlineCodeProperty } from './lib/plugins';\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 {\n  createJavaScriptRegexEngine,\n  createJavaScriptRawEngine,\n} from 'shiki/engine/javascript';\n\nexport type { LanguageRegistration } from 'shiki/core';\n\n/**\n * Highlight code with shiki (core bundle)\n *\n * @param code - Code to highlight\n * @param lang - Language (bundled or custom)\n * @param theme - Theme (bundled, multi-theme, or custom)\n * @param options - react-shiki options + shiki options\n * @returns Highlighted code as React elements or HTML string\n *\n * @example\n * ```tsx\n * import { createHighlighterCore, createOnigurumaEngine } from 'react-shiki/core';\n *\n *\n * const highlighter = await createHighlighterCore({\n *   themes: [import('@shikijs/themes/github-light'), import('@shikijs/themes/github-dark')],\n *   langs: [import('@shikijs/langs/typescript')],\n *   engine: createOnigurumaEngine(import('shiki/wasm'))\n * });\n *\n * const highlighted = useShikiHighlighter(\n *   'const x = 1;',\n *   'typescript',\n *   {\n *     light: 'github-light',\n *     dark: 'github-dark'\n *   },\n *   { highlighter }\n * );\n * ```\n *\n * Core bundle (minimal). For plug-and-play: `react-shiki` or `react-shiki/web`\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 useHighlight(\n    code,\n    lang,\n    themeInput,\n    {\n      ...options,\n      highlighter,\n    },\n    async () => 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":";;;;;;;;;AAMA,SAAgB,wBACd,aACiB;AACjB,KAAI,CAAC,YACH,OAAM,IAAI,MACR,iJAED;AAEH,QAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACiDT,MAAa,uBACX,MACA,MACA,YACA,UAAU,EAAE,KACT;CAEH,MAAM,cAAc,wBAAwB,QAAQ,YAAY;AAEhE,QAAO,aACL,MACA,MACA,YACA;EACE,GAAG;EACH;EACD,EACD,YAAY,YACb;;;;;;AAOH,MAAa,mBAAmB,gCAC9B,oBACD"}
+{"version":3,"file":"core.mjs","names":[],"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 { useHighlight } from './lib/hook';\nimport { validateCoreHighlighter } from './bundles/core';\nimport type { UseShikiHighlighter } from './lib/types';\n\nexport { isInlineCode, rehypeInlineCodeProperty } from './lib/plugins';\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  HighlighterOptionsFor,\n  HighlightResult,\n  OutputFormat,\n} from './lib/types';\n\nexport { createHighlighterCore } from 'shiki/core';\nexport { createOnigurumaEngine } from 'shiki/engine/oniguruma';\nexport {\n  createJavaScriptRegexEngine,\n  createJavaScriptRawEngine,\n} from 'shiki/engine/javascript';\n\nexport type { LanguageRegistration, TokensResult } from 'shiki/core';\n\n/**\n * Highlight code with shiki (core bundle)\n *\n * @param code - Code to highlight\n * @param lang - Language (bundled or custom)\n * @param theme - Theme (bundled, multi-theme, or custom)\n * @param options - react-shiki options + shiki options\n * @returns Highlighted code as React elements (default), HTML string, or Shiki tokens, based on `outputFormat`\n *\n * @example\n * ```tsx\n * import { createHighlighterCore, createOnigurumaEngine } from 'react-shiki/core';\n *\n *\n * const highlighter = await createHighlighterCore({\n *   themes: [import('@shikijs/themes/github-light'), import('@shikijs/themes/github-dark')],\n *   langs: [import('@shikijs/langs/typescript')],\n *   engine: createOnigurumaEngine(import('shiki/wasm'))\n * });\n *\n * const highlighted = useShikiHighlighter(\n *   'const x = 1;',\n *   'typescript',\n *   {\n *     light: 'github-light',\n *     dark: 'github-dark'\n *   },\n *   { highlighter }\n * );\n * ```\n *\n * Core bundle (minimal). For plug-and-play: `react-shiki` or `react-shiki/web`\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 useHighlight(\n    code,\n    lang,\n    themeInput,\n    {\n      ...options,\n      highlighter,\n    },\n    async () => 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":";;;;;;;;;AAMA,SAAgB,wBACd,aACiB;CACjB,IAAI,CAAC,aACH,MAAM,IAAI,MACR,gJAEF;CAEF,OAAO;AACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACmDA,MAAa,uBACX,MACA,MACA,YACA,UAAU,CAAC,MACR;CAEH,MAAM,cAAc,wBAAwB,QAAQ,WAAW;CAE/D,OAAO,aACL,MACA,MACA,YACA;EACE,GAAG;EACH;CACF,GACA,YAAY,WACd;AACF;;;;;AAMA,MAAa,mBAAmB,gCAC9B,mBACF"}

package/dist/index.d.mts

@@ -1,6 +1,5 @@
-import { a as HighlighterOptions, c as Themes, i as Element, l as UseShikiHighlighter, n as isInlineCode, o as Language, r as rehypeInlineCodeProperty, s as Theme, t as ShikiHighlighterProps } from "./component-CjpuWrgO.mjs";
-import * as _$react from "react";
-import { LanguageRegistration } from "shiki";
+import { a as HighlightResult, c as Language, d as Themes, f as UseShikiHighlighter, i as Element, l as OutputFormat, n as isInlineCode, o as HighlighterOptions, r as rehypeInlineCodeProperty, s as HighlighterOptionsFor, t as ShikiHighlighterProps, u as Theme } from "./component-B-gutZRK.mjs";
+import { LanguageRegistration, TokensResult } from "shiki";
 import { createJavaScriptRawEngine, createJavaScriptRegexEngine } from "shiki/engine/javascript";
 
 //#region src/index.d.ts
@@ -11,7 +10,7 @@ import { createJavaScriptRawEngine, createJavaScriptRegexEngine } from "shiki/en
  * @param lang - Language (bundled or custom)
  * @param theme - Theme (bundled, multi-theme, or custom)
  * @param options - react-shiki options + shiki options
- * @returns Highlighted code as React elements or HTML string
+ * @returns Highlighted code as React elements (default), HTML string, or Shiki tokens, based on `outputFormat`
  *
  * @example
  * ```tsx
@@ -32,7 +31,7 @@ declare const useShikiHighlighter: UseShikiHighlighter;
  * ShikiHighlighter component using the full bundle.
  * Includes all languages and themes for maximum compatibility.
  */
-declare const ShikiHighlighter: _$react.ForwardRefExoticComponent<ShikiHighlighterProps & _$react.RefAttributes<HTMLElement>>;
+declare const ShikiHighlighter: import("react").ForwardRefExoticComponent<ShikiHighlighterProps & import("react").RefAttributes<HTMLElement>>;
 //#endregion
-export { type Element, type HighlighterOptions, type Language, type LanguageRegistration, ShikiHighlighter, ShikiHighlighter as default, type ShikiHighlighterProps, type Theme, type Themes, type UseShikiHighlighter, createJavaScriptRawEngine, createJavaScriptRegexEngine, isInlineCode, rehypeInlineCodeProperty, useShikiHighlighter };
+export { type Element, type HighlightResult, type HighlighterOptions, type HighlighterOptionsFor, type Language, type LanguageRegistration, type OutputFormat, ShikiHighlighter, ShikiHighlighter as default, type ShikiHighlighterProps, type Theme, type Themes, type TokensResult, type UseShikiHighlighter, createJavaScriptRawEngine, createJavaScriptRegexEngine, isInlineCode, rehypeInlineCodeProperty, useShikiHighlighter };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { a as isLoadableLanguage, i as useHighlight, n as isInlineCode, r as rehypeInlineCodeProperty, t as createShikiHighlighterComponent } from "./component-CYq7SnJ0.mjs";
+import { a as isLoadableLanguage, i as useHighlight, n as isInlineCode, r as rehypeInlineCodeProperty, t as createShikiHighlighterComponent } from "./component-DdW14SOw.mjs";
 import { bundledLanguages, getSingletonHighlighter } from "shiki";
 import { createOnigurumaEngine } from "shiki/engine/oniguruma";
 import { createJavaScriptRawEngine, createJavaScriptRegexEngine } from "shiki/engine/javascript";
@@ -23,7 +23,7 @@ async function createFullHighlighter(langsToLoad, themesToLoad, engine) {
 * @param lang - Language (bundled or custom)
 * @param theme - Theme (bundled, multi-theme, or custom)
 * @param options - react-shiki options + shiki options
-* @returns Highlighted code as React elements or HTML string
+* @returns Highlighted code as React elements (default), HTML string, or Shiki tokens, based on `outputFormat`
 *
 * @example
 * ```tsx
@@ -39,9 +39,7 @@ async function createFullHighlighter(langsToLoad, themesToLoad, engine) {
 *
 * Full bundle (~6.4MB minified, 1.2MB gzipped). For smaller bundles: `react-shiki/web` or `react-shiki/core`
 */
-const useShikiHighlighter = (code, lang, themeInput, options = {}) => {
-	return useHighlight(code, lang, themeInput, options, createFullHighlighter);
-};
+const useShikiHighlighter = (code, lang, themeInput, options = {}) => useHighlight(code, lang, themeInput, options, createFullHighlighter);
 /**
 * ShikiHighlighter component using the full bundle.
 * Includes all languages and themes for maximum compatibility.

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../src/bundles/full.ts","../src/index.ts"],"sourcesContent":["import {\n  getSingletonHighlighter,\n  bundledLanguages,\n  type Highlighter,\n  type Awaitable,\n  type RegexEngine,\n} from 'shiki';\nimport { createOnigurumaEngine } from 'shiki/engine/oniguruma';\nimport type { Language, Theme } from '../lib/types';\nimport { isLoadableLanguage } from '../lib/language';\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: Language[],\n  themesToLoad: Theme[],\n  engine?: Awaitable<RegexEngine>\n): Promise<Highlighter> {\n  const langs = langsToLoad.filter((lang) =>\n    isLoadableLanguage(lang, bundledLanguages)\n  );\n\n  return await getSingletonHighlighter({\n    langs,\n    themes: themesToLoad,\n    engine: engine ?? createOnigurumaEngine(import('shiki/wasm')),\n  });\n}\n","import { useHighlight } from './lib/hook';\nimport { createFullHighlighter } from './bundles/full';\nimport type { UseShikiHighlighter } from './lib/types';\n\nexport { isInlineCode, rehypeInlineCodeProperty } from './lib/plugins';\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 {\n  createJavaScriptRegexEngine,\n  createJavaScriptRawEngine,\n} from 'shiki/engine/javascript';\n\nexport type { LanguageRegistration } from 'shiki';\n\n/**\n * Highlight code with shiki (full bundle)\n *\n * @param code - Code to highlight\n * @param lang - Language (bundled or custom)\n * @param theme - Theme (bundled, multi-theme, or custom)\n * @param options - react-shiki options + shiki options\n * @returns Highlighted code as React elements or HTML string\n *\n * @example\n * ```tsx\n * const highlighted = useShikiHighlighter(\n *   'const x = 1;',\n *   'typescript',\n *   {\n *     light: 'github-light',\n *     dark: 'github-dark'\n *   }\n * );\n * ```\n *\n * Full bundle (~6.4MB minified, 1.2MB gzipped). For smaller bundles: `react-shiki/web` or `react-shiki/core`\n */\nexport const useShikiHighlighter: UseShikiHighlighter = (\n  code,\n  lang,\n  themeInput,\n  options = {}\n) => {\n  return useHighlight(\n    code,\n    lang,\n    themeInput,\n    options,\n    createFullHighlighter\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":";;;;;;;;;AAeA,eAAsB,sBACpB,aACA,cACA,QACsB;AAKtB,QAAO,MAAM,wBAAwB;EACnC,OALY,YAAY,QAAQ,SAChC,mBAAmB,MAAM,iBAAiB,CAIrC;EACL,QAAQ;EACR,QAAQ,UAAU,sBAAsB,OAAO,cAAc;EAC9D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;ACwBJ,MAAa,uBACX,MACA,MACA,YACA,UAAU,EAAE,KACT;AACH,QAAO,aACL,MACA,MACA,YACA,SACA,sBACD;;;;;;AAOH,MAAa,mBAAmB,gCAC9B,oBACD"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/bundles/full.ts","../src/index.ts"],"sourcesContent":["import {\n  getSingletonHighlighter,\n  bundledLanguages,\n  type Highlighter,\n  type Awaitable,\n  type RegexEngine,\n} from 'shiki';\nimport { createOnigurumaEngine } from 'shiki/engine/oniguruma';\nimport type { Language, Theme } from '../lib/types';\nimport { isLoadableLanguage } from '../lib/language';\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: Language[],\n  themesToLoad: Theme[],\n  engine?: Awaitable<RegexEngine>\n): Promise<Highlighter> {\n  const langs = langsToLoad.filter((lang) =>\n    isLoadableLanguage(lang, bundledLanguages)\n  );\n\n  return await getSingletonHighlighter({\n    langs,\n    themes: themesToLoad,\n    engine: engine ?? createOnigurumaEngine(import('shiki/wasm')),\n  });\n}\n","import { useHighlight } from './lib/hook';\nimport { createFullHighlighter } from './bundles/full';\nimport type { UseShikiHighlighter } from './lib/types';\n\nexport { isInlineCode, rehypeInlineCodeProperty } from './lib/plugins';\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  HighlighterOptionsFor,\n  HighlightResult,\n  OutputFormat,\n} from './lib/types';\n\nexport {\n  createJavaScriptRegexEngine,\n  createJavaScriptRawEngine,\n} from 'shiki/engine/javascript';\n\nexport type { LanguageRegistration, TokensResult } from 'shiki';\n\n/**\n * Highlight code with shiki (full bundle)\n *\n * @param code - Code to highlight\n * @param lang - Language (bundled or custom)\n * @param theme - Theme (bundled, multi-theme, or custom)\n * @param options - react-shiki options + shiki options\n * @returns Highlighted code as React elements (default), HTML string, or Shiki tokens, based on `outputFormat`\n *\n * @example\n * ```tsx\n * const highlighted = useShikiHighlighter(\n *   'const x = 1;',\n *   'typescript',\n *   {\n *     light: 'github-light',\n *     dark: 'github-dark'\n *   }\n * );\n * ```\n *\n * Full bundle (~6.4MB minified, 1.2MB gzipped). For smaller bundles: `react-shiki/web` or `react-shiki/core`\n */\nexport const useShikiHighlighter: UseShikiHighlighter = (\n  code,\n  lang,\n  themeInput,\n  options = {}\n) => useHighlight(code, lang, themeInput, options, createFullHighlighter);\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":";;;;;;;;;AAeA,eAAsB,sBACpB,aACA,cACA,QACsB;CAKtB,OAAO,MAAM,wBAAwB;EACnC,OALY,YAAY,QAAQ,SAChC,mBAAmB,MAAM,gBAAgB,CAIrC;EACJ,QAAQ;EACR,QAAQ,UAAU,sBAAsB,OAAO,aAAa;CAC9D,CAAC;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;AC0BA,MAAa,uBACX,MACA,MACA,YACA,UAAU,CAAC,MACR,aAAa,MAAM,MAAM,YAAY,SAAS,qBAAqB;;;;;AAMxE,MAAa,mBAAmB,gCAC9B,mBACF"}

package/dist/style.css

@@ -1,46 +1,68 @@
-@layer base {
-  .rs-root {
-    position: relative;
+:where(.rs-root) {
+  position: relative;
+}
+
+:where(.rs-root.rs-default-styles) pre {
+  border-radius: .5rem;
+  padding-block: 1.25rem;
+  padding-inline: 1.5rem;
+  overflow: auto;
+}
+
+:where(.rs-root) .rs-language-label {
+  z-index: 1;
+  letter-spacing: -.05em;
+  color: #6b7280d9;
+  font-family: monospace;
+  font-size: .75rem;
+  position: absolute;
+  top: .5rem;
+  right: .75rem;
+}
+:where(.rs-has-line-numbers) {
+  counter-reset: line-number calc(var(--line-start, 1) - 1);
+}
 
-    &.rs-default-styles pre {
-      border-radius: .5rem;
-      padding: 1.25rem 1.5rem;
-      overflow: auto;
-    }
+:where(.rs-has-line-numbers .rs-line-number):before {
+  counter-increment: line-number;
+  content: counter(line-number);
+  box-sizing: content-box;
+  min-width: var(--rs-line-numbers-width, 2ch);
+  padding-left: var(--rs-line-numbers-padding-left, 0ch);
+  padding-right: var(--rs-line-numbers-padding-right, 2ch);
+  color: var(--rs-line-numbers-foreground, #6b728080);
+  font-size: var(--rs-line-numbers-font-size, inherit);
+  font-weight: var(--rs-line-numbers-font-weight, inherit);
+  line-height: var(--rs-line-numbers-line-height, inherit);
+  font-family: var(--rs-line-numbers-font-family, inherit);
+  opacity: var(--rs-line-numbers-opacity, 1);
+  user-select: none;
+  pointer-events: none;
+  justify-content: flex-end;
+  align-items: flex-start;
+  display: inline-flex;
+}
+
+:where(.rs-has-highlighted-lines) {
+  width: fit-content;
+  min-width: 100%;
+  display: block;
+}
 
-    & .rs-language-label {
-      letter-spacing: -.05em;
-      color: #6b7280d9;
-      font-family: monospace;
-      font-size: .75rem;
-      position: absolute;
-      top: .5rem;
-      right: .75rem;
-    }
-  }
-}
-@layer base {
-  .rs-has-line-numbers {
-    counter-reset: line-number calc(var(--line-start, 1) - 1);
+:where(.rs-highlighted-line) {
+  --_rs-hl-background: var(--rs-highlighted-line-background, color-mix(in srgb, currentColor 10%, transparent));
+  background-color: var(--_rs-hl-background);
+  width: 100%;
+  min-height: 1lh;
+  display: inline-block;
+}
+
+:where(.rs-default-styles) .rs-highlighted-line {
+  border-image: linear-gradient(var(--_rs-hl-background) 0 0) fill 0 / 0 / 0
+    100vw;
+  background-color: #0000;
+}
 
-    & .rs-line-number:before {
-      counter-increment: line-number;
-      content: counter(line-number);
-      box-sizing: content-box;
-      min-width: var(--rs-line-numbers-width, 2ch);
-      padding-left: var(--rs-line-numbers-padding-left, 0ch);
-      padding-right: var(--rs-line-numbers-padding-right, 2ch);
-      color: var(--rs-line-numbers-foreground, #6b728080);
-      font-size: var(--rs-line-numbers-font-size, inherit);
-      font-weight: var(--rs-line-numbers-font-weight, inherit);
-      line-height: var(--rs-line-numbers-line-height, inherit);
-      font-family: var(--rs-line-numbers-font-family, inherit);
-      opacity: var(--rs-line-numbers-opacity, 1);
-      user-select: none;
-      pointer-events: none;
-      justify-content: flex-end;
-      align-items: flex-start;
-      display: inline-flex;
-    }
-  }
+:where(.rs-has-line-numbers .rs-highlighted-line):before {
+  color: var(--rs-highlighted-line-number-foreground, color-mix(in srgb, currentColor 65%, transparent));
 }

package/dist/web.d.mts

@@ -1,7 +1,6 @@
-import { a as HighlighterOptions, c as Themes, i as Element, l as UseShikiHighlighter, n as isInlineCode, o as Language, r as rehypeInlineCodeProperty, s as Theme, t as ShikiHighlighterProps } from "./component-CjpuWrgO.mjs";
-import * as _$react from "react";
+import { a as HighlightResult, c as Language, d as Themes, f as UseShikiHighlighter, i as Element, l as OutputFormat, n as isInlineCode, o as HighlighterOptions, r as rehypeInlineCodeProperty, s as HighlighterOptionsFor, t as ShikiHighlighterProps, u as Theme } from "./component-B-gutZRK.mjs";
 import { createJavaScriptRawEngine, createJavaScriptRegexEngine } from "shiki/engine/javascript";
-import { LanguageRegistration } from "shiki/bundle/web";
+import { LanguageRegistration, TokensResult } from "shiki/bundle/web";
 
 //#region src/web.d.ts
 /**
@@ -11,7 +10,7 @@ import { LanguageRegistration } from "shiki/bundle/web";
  * @param lang - Language (bundled or custom)
  * @param theme - Theme (bundled, multi-theme, or custom)
  * @param options - react-shiki options + shiki options
- * @returns Highlighted code as React elements or HTML string
+ * @returns Highlighted code as React elements (default), HTML string, or Shiki tokens, based on `outputFormat`
  *
  * @example
  * ```tsx
@@ -32,7 +31,7 @@ declare const useShikiHighlighter: UseShikiHighlighter;
  * ShikiHighlighter component using the web bundle.
  * Includes web-focused languages for balanced size and functionality.
  */
-declare const ShikiHighlighter: _$react.ForwardRefExoticComponent<ShikiHighlighterProps & _$react.RefAttributes<HTMLElement>>;
+declare const ShikiHighlighter: import("react").ForwardRefExoticComponent<ShikiHighlighterProps & import("react").RefAttributes<HTMLElement>>;
 //#endregion
-export { type Element, type HighlighterOptions, type Language, type LanguageRegistration, ShikiHighlighter, ShikiHighlighter as default, type ShikiHighlighterProps, type Theme, type Themes, type UseShikiHighlighter, createJavaScriptRawEngine, createJavaScriptRegexEngine, isInlineCode, rehypeInlineCodeProperty, useShikiHighlighter };
+export { type Element, type HighlightResult, type HighlighterOptions, type HighlighterOptionsFor, type Language, type LanguageRegistration, type OutputFormat, ShikiHighlighter, ShikiHighlighter as default, type ShikiHighlighterProps, type Theme, type Themes, type TokensResult, type UseShikiHighlighter, createJavaScriptRawEngine, createJavaScriptRegexEngine, isInlineCode, rehypeInlineCodeProperty, useShikiHighlighter };
 //# sourceMappingURL=web.d.mts.map

package/dist/web.mjs

@@ -1,4 +1,4 @@
-import { a as isLoadableLanguage, i as useHighlight, n as isInlineCode, r as rehypeInlineCodeProperty, t as createShikiHighlighterComponent } from "./component-CYq7SnJ0.mjs";
+import { a as isLoadableLanguage, i as useHighlight, n as isInlineCode, r as rehypeInlineCodeProperty, t as createShikiHighlighterComponent } from "./component-DdW14SOw.mjs";
 import { createOnigurumaEngine } from "shiki/engine/oniguruma";
 import { createJavaScriptRawEngine, createJavaScriptRegexEngine } from "shiki/engine/javascript";
 import { bundledLanguages, getSingletonHighlighter } from "shiki/bundle/web";
@@ -24,7 +24,7 @@ async function createWebHighlighter(langsToLoad, themesToLoad, engine) {
 * @param lang - Language (bundled or custom)
 * @param theme - Theme (bundled, multi-theme, or custom)
 * @param options - react-shiki options + shiki options
-* @returns Highlighted code as React elements or HTML string
+* @returns Highlighted code as React elements (default), HTML string, or Shiki tokens, based on `outputFormat`
 *
 * @example
 * ```tsx
@@ -40,9 +40,7 @@ async function createWebHighlighter(langsToLoad, themesToLoad, engine) {
 *
 * Web bundle (~3.8MB minified, 695KB gzipped). For other bundles: `react-shiki` or `react-shiki/core`
 */
-const useShikiHighlighter = (code, lang, themeInput, options = {}) => {
-	return useHighlight(code, lang, themeInput, options, createWebHighlighter);
-};
+const useShikiHighlighter = (code, lang, themeInput, options = {}) => useHighlight(code, lang, themeInput, options, createWebHighlighter);
 /**
 * ShikiHighlighter component using the web bundle.
 * Includes web-focused languages for balanced size and functionality.

package/dist/web.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"web.mjs","names":[],"sources":["../src/bundles/web.ts","../src/web.ts"],"sourcesContent":["import {\n  getSingletonHighlighter,\n  bundledLanguages,\n  type Highlighter,\n  type Awaitable,\n  type RegexEngine,\n} from 'shiki/bundle/web';\nimport { createOnigurumaEngine } from 'shiki/engine/oniguruma';\nimport type { Language, Theme } from '../lib/types';\nimport { isLoadableLanguage } from '../lib/language';\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: Language[],\n  themesToLoad: Theme[],\n  engine?: Awaitable<RegexEngine>\n): Promise<Highlighter> {\n  const langs = langsToLoad.filter((lang) =>\n    isLoadableLanguage(lang, bundledLanguages)\n  );\n\n  return await getSingletonHighlighter({\n    langs,\n    themes: themesToLoad,\n    engine: engine ?? createOnigurumaEngine(import('shiki/wasm')),\n  });\n}\n","import { useHighlight } from './lib/hook';\nimport { createWebHighlighter } from './bundles/web';\nimport type { UseShikiHighlighter } from './lib/types';\n\nexport { isInlineCode, rehypeInlineCodeProperty } from './lib/plugins';\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 {\n  createJavaScriptRegexEngine,\n  createJavaScriptRawEngine,\n} from 'shiki/engine/javascript';\n\nexport type { LanguageRegistration } from 'shiki/bundle/web';\n\n/**\n * Highlight code with shiki (web bundle)\n *\n * @param code - Code to highlight\n * @param lang - Language (bundled or custom)\n * @param theme - Theme (bundled, multi-theme, or custom)\n * @param options - react-shiki options + shiki options\n * @returns Highlighted code as React elements or HTML string\n *\n * @example\n * ```tsx\n * const highlighted = useShikiHighlighter(\n *   'const x = 1;',\n *   'typescript',\n *   {\n *     light: 'github-light',\n *     dark: 'github-dark'\n *   }\n * );\n * ```\n *\n * Web bundle (~3.8MB minified, 695KB gzipped). For other bundles: `react-shiki` or `react-shiki/core`\n */\nexport const useShikiHighlighter: UseShikiHighlighter = (\n  code,\n  lang,\n  themeInput,\n  options = {}\n) => {\n  return useHighlight(\n    code,\n    lang,\n    themeInput,\n    options,\n    createWebHighlighter\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":";;;;;;;;;;AAgBA,eAAsB,qBACpB,aACA,cACA,QACsB;AAKtB,QAAO,MAAM,wBAAwB;EACnC,OALY,YAAY,QAAQ,SAChC,mBAAmB,MAAM,iBAAiB,CAIrC;EACL,QAAQ;EACR,QAAQ,UAAU,sBAAsB,OAAO,cAAc;EAC9D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;ACuBJ,MAAa,uBACX,MACA,MACA,YACA,UAAU,EAAE,KACT;AACH,QAAO,aACL,MACA,MACA,YACA,SACA,qBACD;;;;;;AAOH,MAAa,mBAAmB,gCAC9B,oBACD"}
+{"version":3,"file":"web.mjs","names":[],"sources":["../src/bundles/web.ts","../src/web.ts"],"sourcesContent":["import {\n  getSingletonHighlighter,\n  bundledLanguages,\n  type Highlighter,\n  type Awaitable,\n  type RegexEngine,\n} from 'shiki/bundle/web';\nimport { createOnigurumaEngine } from 'shiki/engine/oniguruma';\nimport type { Language, Theme } from '../lib/types';\nimport { isLoadableLanguage } from '../lib/language';\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: Language[],\n  themesToLoad: Theme[],\n  engine?: Awaitable<RegexEngine>\n): Promise<Highlighter> {\n  const langs = langsToLoad.filter((lang) =>\n    isLoadableLanguage(lang, bundledLanguages)\n  );\n\n  return await getSingletonHighlighter({\n    langs,\n    themes: themesToLoad,\n    engine: engine ?? createOnigurumaEngine(import('shiki/wasm')),\n  });\n}\n","import { useHighlight } from './lib/hook';\nimport { createWebHighlighter } from './bundles/web';\nimport type { UseShikiHighlighter } from './lib/types';\n\nexport { isInlineCode, rehypeInlineCodeProperty } from './lib/plugins';\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  HighlighterOptionsFor,\n  HighlightResult,\n  OutputFormat,\n} from './lib/types';\n\nexport {\n  createJavaScriptRegexEngine,\n  createJavaScriptRawEngine,\n} from 'shiki/engine/javascript';\n\nexport type {\n  LanguageRegistration,\n  TokensResult,\n} from 'shiki/bundle/web';\n\n/**\n * Highlight code with shiki (web bundle)\n *\n * @param code - Code to highlight\n * @param lang - Language (bundled or custom)\n * @param theme - Theme (bundled, multi-theme, or custom)\n * @param options - react-shiki options + shiki options\n * @returns Highlighted code as React elements (default), HTML string, or Shiki tokens, based on `outputFormat`\n *\n * @example\n * ```tsx\n * const highlighted = useShikiHighlighter(\n *   'const x = 1;',\n *   'typescript',\n *   {\n *     light: 'github-light',\n *     dark: 'github-dark'\n *   }\n * );\n * ```\n *\n * Web bundle (~3.8MB minified, 695KB gzipped). For other bundles: `react-shiki` or `react-shiki/core`\n */\nexport const useShikiHighlighter: UseShikiHighlighter = (\n  code,\n  lang,\n  themeInput,\n  options = {}\n) => useHighlight(code, lang, themeInput, options, createWebHighlighter);\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":";;;;;;;;;;AAgBA,eAAsB,qBACpB,aACA,cACA,QACsB;CAKtB,OAAO,MAAM,wBAAwB;EACnC,OALY,YAAY,QAAQ,SAChC,mBAAmB,MAAM,gBAAgB,CAIrC;EACJ,QAAQ;EACR,QAAQ,UAAU,sBAAsB,OAAO,aAAa;CAC9D,CAAC;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;AC4BA,MAAa,uBACX,MACA,MACA,YACA,UAAU,CAAC,MACR,aAAa,MAAM,MAAM,YAAY,SAAS,oBAAoB;;;;;AAMvE,MAAa,mBAAmB,gCAC9B,mBACF"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-shiki",
   "description": "Syntax highlighter component for react using shiki",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "license": "MIT",
   "author": {
     "name": "Bassim Shahidy",
@@ -75,24 +75,24 @@
     "clsx": "^2.1.1",
     "dequal": "^2.0.3",
     "hast-util-to-jsx-runtime": "^2.3.6",
-    "shiki": "^4.0.2",
+    "shiki": "^4.3.0",
     "unist-util-visit": "^5.1.0"
   },
   "devDependencies": {
-    "@arethetypeswrong/core": "^0.18.2",
+    "@arethetypeswrong/core": "^0.18.4",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@tsdown/css": "0.21.10",
+    "@tsdown/css": "0.22.3",
     "@types/hast": "^3.0.4",
     "@types/jest": "^30.0.0",
-    "@types/node": "25.6.0",
-    "@types/react": "^19.2.14",
-    "@vitejs/plugin-react": "^6.0.1",
-    "html-react-parser": "^6.1.0",
+    "@types/node": "25.9.4",
+    "@types/react": "^19.2.17",
+    "@vitejs/plugin-react": "^6.0.3",
+    "html-react-parser": "^6.1.3",
     "jsdom": "^29.1.1",
-    "publint": "^0.3.19",
-    "tsdown": "^0.21.10",
-    "vitest": "^4.1.5"
+    "publint": "^0.3.21",
+    "tsdown": "^0.22.3",
+    "vitest": "^4.1.9"
   },
   "scripts": {
     "dev": "tsdown --watch",

package/src/styles/features.css

@@ -1,25 +1,54 @@
-@layer base {
-  .rs-has-line-numbers {
-    counter-reset: line-number calc(var(--line-start, 1) - 1);
+:where(.rs-has-line-numbers) {
+  counter-reset: line-number calc(var(--line-start, 1) - 1);
+}
+
+:where(.rs-has-line-numbers .rs-line-number)::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(--rs-line-numbers-width, 2ch);
+  padding-left: var(--rs-line-numbers-padding-left, 0ch);
+  padding-right: var(--rs-line-numbers-padding-right, 2ch);
+  color: var(--rs-line-numbers-foreground, rgba(107, 114, 128, 0.5));
+  font-size: var(--rs-line-numbers-font-size, inherit);
+  font-weight: var(--rs-line-numbers-font-weight, inherit);
+  line-height: var(--rs-line-numbers-line-height, inherit);
+  font-family: var(--rs-line-numbers-font-family, inherit);
+  opacity: var(--rs-line-numbers-opacity, 1);
+  user-select: none;
+  pointer-events: none;
+}
+
+:where(.rs-has-highlighted-lines) {
+  display: block;
+  width: fit-content;
+  min-width: 100%;
+}
+
+:where(.rs-highlighted-line) {
+  --_rs-hl-background: var(
+    --rs-highlighted-line-background,
+    color-mix(in srgb, currentColor 10%, transparent)
+  );
+  display: inline-block;
+  width: 100%;
+  min-height: 1lh;
+  background-color: var(--_rs-hl-background);
+}
+
+/* Full bleed: the 100vw outset paints into the pre's padding, clipped by its overflow. */
+:where(.rs-default-styles) .rs-highlighted-line {
+  background-color: transparent;
+  border-image: linear-gradient(var(--_rs-hl-background) 0 0) fill 0 / 0 / 0
+    100vw;
+}
 
-    & .rs-line-number::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(--rs-line-numbers-width, 2ch);
-      padding-left: var(--rs-line-numbers-padding-left, 0ch);
-      padding-right: var(--rs-line-numbers-padding-right, 2ch);
-      color: var(--rs-line-numbers-foreground, rgba(107, 114, 128, 0.5));
-      font-size: var(--rs-line-numbers-font-size, inherit);
-      font-weight: var(--rs-line-numbers-font-weight, inherit);
-      line-height: var(--rs-line-numbers-line-height, inherit);
-      font-family: var(--rs-line-numbers-font-family, inherit);
-      opacity: var(--rs-line-numbers-opacity, 1);
-      user-select: none;
-      pointer-events: none;
-    }
-  }
+:where(.rs-has-line-numbers .rs-highlighted-line)::before {
+  color: var(
+    --rs-highlighted-line-number-foreground,
+    color-mix(in srgb, currentColor 65%, transparent)
+  );
 }

package/dist/component-CYq7SnJ0.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"component-CYq7SnJ0.mjs","names":[],"sources":["../src/lib/utils.ts","../src/lib/language.ts","../src/lib/theme.ts","../src/lib/transformers.ts","../src/lib/options.ts","../src/lib/hook.ts","../src/lib/plugins.ts","../src/lib/component.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { dequal } from 'dequal';\n\nimport type { TimeoutState } from './types';\n\n/**\n * Returns a referentially stable version of `value` that only updates when content changes.\n * Uses reference equality as a fast path and deep comparison to prevent unnecessary updates.\n */\nexport const useStableValue = <T>(value: T): T => {\n  const ref = useRef(value);\n\n  if (value !== ref.current && !dequal(value, ref.current)) {\n    ref.current = value;\n  }\n\n  return ref.current;\n};\n\n/**\n * Optionally throttles rapid sequential highlighting operations\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  clearTimeout(timeoutControl.current.timeoutId);\n\n  const delay = Math.max(\n    0,\n    timeoutControl.current.nextAllowedTime - Date.now()\n  );\n  timeoutControl.current.timeoutId = setTimeout(() => {\n    performHighlight();\n    timeoutControl.current.nextAllowedTime = Date.now() + throttleMs;\n  }, delay);\n};\n","import type { Language } from './types';\nimport { guessEmbeddedLanguages, isSpecialLang } from 'shiki/core';\nimport type {\n  DynamicImportLanguageRegistration,\n  Highlighter,\n  HighlighterCore,\n  LanguageInput,\n  LanguageRegistration,\n} from 'shiki';\n\nexport const FALLBACK_LANGUAGE = 'plaintext';\n\nexport const getEmbeddedLanguages = (\n  code: string,\n  languageId: string,\n  highlighter: Highlighter | HighlighterCore\n): LanguageInput[] => {\n  const bundled: Record<string, LanguageInput> =\n    highlighter.getBundledLanguages();\n  return guessEmbeddedLanguages(code, languageId).flatMap(\n    (language) => bundled[language] ?? []\n  );\n};\n\n/**\n * Resolved languages and metadata\n */\ntype LanguageResult = {\n  languageId: string;\n  langsToLoad: Language[];\n};\n\nconst toArray = <T>(value?: T | T[]): T[] =>\n  value == null ? [] : Array.isArray(value) ? value : [value];\n\nconst languageKey = (lang: Language): string | null => {\n  if (lang == null) return null;\n  if (typeof lang === 'string') return `s:${lang}`;\n  return `o:${lang.name}::${lang.scopeName}`;\n};\n\nconst dedupeLanguages = (langs: Language[]): Language[] => {\n  const seen = new Set<string>();\n  const deduped: Language[] = [];\n\n  for (const lang of langs) {\n    const key = languageKey(lang);\n    if (key == null || seen.has(key)) continue;\n    seen.add(key);\n    deduped.push(lang);\n  }\n\n  return deduped;\n};\n\n/**\n * Used in factories to check if language is supported.\n * Objects are validated as grammar registrations (name + scopeName).\n */\nexport const isLoadableLanguage = <T extends string>(\n  lang: Language,\n  bundledLanguages: Record<T, DynamicImportLanguageRegistration>\n): lang is NonNullable<Language> => {\n  if (lang == null) return false;\n  if (typeof lang === 'string') return lang in bundledLanguages;\n  return (\n    typeof lang.name === 'string' && typeof lang.scopeName === 'string'\n  );\n};\n\n/**\n * Used in hook to resolve loaded language for highlighting.\n * Falls back to \"plaintext\" if not supported.\n */\nexport const resolveLoadedLanguage = (\n  languageId: string,\n  loadedLanguages: string[]\n): string =>\n  isSpecialLang(languageId) || loadedLanguages.includes(languageId)\n    ? languageId\n    : FALLBACK_LANGUAGE;\n\n/**\n * Resolves the language input to standardized IDs and objects for Shiki\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 *   - langsToLoad: The language objects/string ids to load\n */\nexport const resolveLanguage = (\n  lang: Language,\n  customLanguages?: LanguageRegistration | LanguageRegistration[],\n  langAliases?: Record<string, string>,\n  preloadLanguages?: Language | Language[]\n): LanguageResult => {\n  const customLangs = toArray(customLanguages);\n  const preloadLangs = toArray(preloadLanguages);\n  const customMatchPool = [...customLangs, ...preloadLangs];\n  let languageId = FALLBACK_LANGUAGE;\n  let primaryLang: Language;\n\n  // Language is null or empty string\n  if (lang == null || (typeof lang === 'string' && !lang.trim())) {\n    return {\n      languageId,\n      langsToLoad: dedupeLanguages([...preloadLangs, ...customLangs]),\n    };\n  }\n\n  // Language is custom object\n  if (typeof lang === 'object') {\n    languageId = lang.name;\n    primaryLang = lang;\n  } else {\n    // Language is string\n    const lowerLang = lang.toLowerCase();\n    const matches = (str: string | undefined): boolean =>\n      str?.toLowerCase() === lowerLang;\n\n    // Check custom registrations (from both customLanguages and preloadLanguages)\n    const customMatch = customMatchPool.find(\n      (candidate): candidate is LanguageRegistration =>\n        typeof candidate === 'object' &&\n        candidate != null &&\n        !!(\n          matches(candidate.name) ||\n          matches(candidate.scopeName) ||\n          matches(candidate.scopeName?.split('.').pop()) ||\n          candidate.aliases?.some(matches) ||\n          candidate.fileTypes?.some(matches)\n        )\n    );\n\n    if (customMatch) {\n      languageId = customMatch.name || lang;\n      primaryLang = customMatch;\n    } else if (langAliases?.[lang]) {\n      // Language is aliased\n      languageId = langAliases[lang];\n      primaryLang = langAliases[lang];\n    } else {\n      // For any other string, pass it through to the factory\n      languageId = lang;\n      primaryLang = lang;\n    }\n  }\n\n  return {\n    languageId,\n    langsToLoad: dedupeLanguages([\n      primaryLang,\n      ...preloadLangs,\n      ...customLangs,\n    ]),\n  };\n};\n","import type { Theme, Themes } from './types';\nimport type { ThemeRegistrationAny } from 'shiki/core';\n\nexport const DEFAULT_THEMES: Themes = {\n  light: 'github-light',\n  dark: 'github-dark',\n};\n\nexport type ResolvedTheme =\n  | { isMulti: true; themes: Themes; themesToLoad: Theme[] }\n  | { isMulti: false; theme: Theme; themesToLoad: Theme[] };\n\nconst isTextmateTheme = (\n  value: unknown\n): value is ThemeRegistrationAny => {\n  if (typeof value !== 'object' || value === null) return false;\n  const v = value as Partial<ThemeRegistrationAny> & {\n    settings?: unknown;\n  };\n  const hasTokens =\n    Array.isArray(v.tokenColors) || Array.isArray(v.settings);\n  const hasIdentity =\n    typeof v.name === 'string' || typeof v.type === 'string';\n  return hasTokens && hasIdentity;\n};\n\nexport function resolveTheme(themeInput: Theme | Themes): ResolvedTheme {\n  if (\n    typeof themeInput !== 'object' ||\n    themeInput === null ||\n    isTextmateTheme(themeInput)\n  ) {\n    return {\n      isMulti: false,\n      theme: themeInput,\n      themesToLoad: [themeInput],\n    };\n  }\n\n  const validEntries = Object.entries(themeInput).filter(\n    ([key, value]) =>\n      key.trim() !== '' &&\n      ((typeof value === 'string' && value.trim() !== '') ||\n        isTextmateTheme(value))\n  );\n\n  if (validEntries.length === 0) {\n    console.warn(\n      '[react-shiki] invalid multi-theme config, falling back to defaults'\n    );\n    return {\n      isMulti: true,\n      themes: DEFAULT_THEMES,\n      themesToLoad: Object.values(DEFAULT_THEMES),\n    };\n  }\n\n  if (validEntries.length !== Object.keys(themeInput).length) {\n    console.warn(\n      '[react-shiki] multi-theme config contained invalid entries; they were dropped'\n    );\n  }\n\n  const themes = Object.fromEntries(validEntries) as Themes;\n  return {\n    isMulti: true,\n    themes,\n    themesToLoad: validEntries.map(([, value]) => value as Theme),\n  };\n}\n","import type { ShikiTransformer } from 'shiki/core';\n\n/**\n * Creates a transformer that enables line numbers display\n * @param startLine - The starting line number (defaults to 1)\n */\nexport function lineNumbersTransformer(startLine = 1): ShikiTransformer {\n  return {\n    name: 'react-shiki:line-numbers',\n    code(node) {\n      this.addClassToHast(node, 'rs-has-line-numbers');\n      if (startLine !== 1) {\n        const existingStyle = (node.properties?.style as string) || '';\n        const newStyle = existingStyle\n          ? `${existingStyle}; --line-start: ${startLine}`\n          : `--line-start: ${startLine}`;\n        node.properties = {\n          ...node.properties,\n          style: newStyle,\n        };\n      }\n    },\n    line(node) {\n      this.addClassToHast(node, 'rs-line-number');\n      return node;\n    },\n  };\n}\n","import type {\n  BundledTheme,\n  CodeOptionsMultipleThemes,\n  CodeOptionsSingleTheme,\n  CodeToHastOptions,\n} from 'shiki';\n\nimport type { HighlighterOptions } from './types';\nimport type { ResolvedTheme } from './theme';\nimport { lineNumbersTransformer } from './transformers';\n\nconst buildThemeOptions = (\n  resolvedTheme: ResolvedTheme,\n  defaultColor: HighlighterOptions['defaultColor'],\n  cssVariablePrefix: HighlighterOptions['cssVariablePrefix']\n):\n  | CodeOptionsMultipleThemes<BundledTheme>\n  | CodeOptionsSingleTheme<BundledTheme> => {\n  if (resolvedTheme.isMulti) {\n    return {\n      themes: resolvedTheme.themes,\n      defaultColor,\n      cssVariablePrefix,\n    };\n  }\n\n  return {\n    theme: resolvedTheme.theme,\n  };\n};\n\nexport const buildShikiOptions = (\n  languageId: string,\n  resolvedTheme: ResolvedTheme,\n  options: HighlighterOptions\n): CodeToHastOptions => {\n  const {\n    delay,\n    customLanguages,\n    preloadLanguages,\n    outputFormat,\n    highlighter,\n    langAlias,\n    engine,\n    defaultColor,\n    cssVariablePrefix,\n    showLineNumbers,\n    startingLineNumber,\n    transformers: userTransformers,\n    ...shikiPassthrough\n  } = options;\n\n  const transformers = [...(userTransformers || [])];\n  if (showLineNumbers) {\n    transformers.push(lineNumbersTransformer(startingLineNumber));\n  }\n\n  return {\n    lang: languageId,\n    ...buildThemeOptions(resolvedTheme, defaultColor, cssVariablePrefix),\n    ...shikiPassthrough,\n    transformers,\n  };\n};\n","import { useEffect, useMemo, useRef, useState } from 'react';\nimport { jsx, jsxs, Fragment } from 'react/jsx-runtime';\nimport { toJsxRuntime } from 'hast-util-to-jsx-runtime';\nimport type { CodeToHastOptions } from 'shiki';\n\nimport type {\n  HighlightedCode,\n  HighlighterFactory,\n  HighlighterOptions,\n  Language,\n  Theme,\n  Themes,\n  TimeoutState,\n} from './types';\n\nimport { throttleHighlighting, useStableValue } from './utils';\nimport {\n  getEmbeddedLanguages,\n  resolveLanguage,\n  resolveLoadedLanguage,\n} from './language';\nimport { resolveTheme } from './theme';\nimport { buildShikiOptions } from './options';\n\nexport async function highlight(\n  code: string,\n  resolved: {\n    languageId: string;\n    langsToLoad: Language[];\n    themesToLoad: Theme[];\n    shikiOptions: CodeToHastOptions;\n  },\n  opts: Pick<\n    HighlighterOptions,\n    'highlighter' | 'outputFormat' | 'engine'\n  >,\n  factory: HighlighterFactory\n) {\n  const { languageId, langsToLoad, themesToLoad, shikiOptions } =\n    resolved;\n\n  const highlighter =\n    opts.highlighter ??\n    (await (async () => {\n      const hl = await factory(langsToLoad, themesToLoad, opts.engine);\n      await hl.loadLanguage(\n        ...getEmbeddedLanguages(code, languageId, hl)\n      );\n      return hl;\n    })());\n\n  const language = resolveLoadedLanguage(\n    languageId,\n    highlighter.getLoadedLanguages()\n  );\n  const options = { ...shikiOptions, lang: language };\n\n  return opts.outputFormat === 'html'\n    ? highlighter.codeToHtml(code, options)\n    : toJsxRuntime(highlighter.codeToHast(code, options), {\n        jsx,\n        jsxs,\n        Fragment,\n      });\n}\n\nexport const useHighlight = (\n  code: string,\n  lang: Language,\n  themeInput: Theme | Themes,\n  options: HighlighterOptions = {},\n  highlighterFactory: HighlighterFactory\n) => {\n  const [highlightedCode, setHighlightedCode] =\n    useState<HighlightedCode>(null);\n\n  const stableLang = useStableValue(lang);\n  const stableTheme = useStableValue(themeInput);\n  const stableOpts = useStableValue(options);\n\n  const resolved = useMemo(() => {\n    const { languageId, langsToLoad } = resolveLanguage(\n      stableLang,\n      stableOpts.customLanguages,\n      stableOpts.langAlias,\n      stableOpts.preloadLanguages\n    );\n\n    const theme = resolveTheme(stableTheme);\n\n    const shikiOptions = buildShikiOptions(languageId, theme, stableOpts);\n    return {\n      languageId,\n      langsToLoad,\n      themesToLoad: theme.themesToLoad,\n      shikiOptions,\n    };\n  }, [stableLang, stableTheme, stableOpts]);\n\n  const requestIdRef = useRef(0);\n\n  const timeoutControl = useRef<TimeoutState>({\n    nextAllowedTime: 0,\n    timeoutId: undefined,\n  });\n\n  // Factory is invoked imperatively; its identity is not semantic, so it must\n  // not invalidate the effect on every render. See issue #161.\n  const highlighterFactoryRef = useRef(highlighterFactory);\n  highlighterFactoryRef.current = highlighterFactory;\n\n  useEffect(() => {\n    const requestId = ++requestIdRef.current;\n\n    if (!resolved.languageId) return;\n\n    const run = async () => {\n      try {\n        const result = await highlight(\n          code,\n          resolved,\n          stableOpts,\n          highlighterFactoryRef.current\n        );\n        if (requestId === requestIdRef.current) {\n          setHighlightedCode(result);\n        }\n      } catch (error) {\n        console.error('[react-shiki] highlight failed', error);\n      }\n    };\n\n    if (stableOpts.delay) {\n      throttleHighlighting(run, timeoutControl, stableOpts.delay);\n    } else {\n      run();\n    }\n\n    return () => {\n      clearTimeout(timeoutControl.current.timeoutId);\n    };\n  }, [code, resolved, stableOpts]);\n\n  return highlightedCode;\n};\n","import { visit } from 'unist-util-visit';\nimport type { Root } from 'hast';\nimport type { 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: Root): undefined => {\n    visit(tree, 'element', (node: Element, _index, parent) => {\n      if (\n        node.tagName === 'code' &&\n        parent?.type === 'element' &&\n        parent.tagName !== 'pre'\n      ) {\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","import '../styles/component.css';\nimport '../styles/features.css';\nimport { clsx } from 'clsx';\n\nimport type {\n  HighlighterOptions,\n  Language,\n  Theme,\n  Themes,\n  UseShikiHighlighter,\n} from './types';\nimport { forwardRef } from 'react';\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   * Whether to show line numbers\n   * @default false\n   */\n  showLineNumbers?: boolean;\n\n  /**\n   * Starting line number (when showLineNumbers is true)\n   * @default 1\n   */\n  startingLineNumber?: number;\n\n  /**\n   * The HTML element that wraps the generated code block.\n   * @default 'div'\n   */\n  as?: React.ElementType;\n}\n\n/**\n * Base ShikiHighlighter component factory.\n * This creates a component that uses the provided hook implementation.\n */\nexport const createShikiHighlighterComponent = (\n  useShikiHighlighterImpl: UseShikiHighlighter\n) => {\n  return forwardRef<HTMLElement, ShikiHighlighterProps>(\n    (\n      {\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        showLineNumbers = false,\n        startingLineNumber = 1,\n        children: code,\n        as: Element = 'div',\n        customLanguages,\n        preloadLanguages,\n        ...shikiOptions\n      },\n      ref\n    ) => {\n      // Destructure some options for use in hook\n      const options: HighlighterOptions = {\n        delay,\n        transformers,\n        customLanguages,\n        preloadLanguages,\n        showLineNumbers,\n        defaultColor,\n        cssVariablePrefix,\n        startingLineNumber,\n        ...shikiOptions,\n      };\n\n      const displayLanguageId =\n        typeof language === 'object'\n          ? language.name || null\n          : language?.trim() || null;\n\n      const highlightedCode = useShikiHighlighterImpl(\n        code,\n        language,\n        theme,\n        options\n      );\n\n      return (\n        <Element\n          ref={ref}\n          data-testid=\"shiki-container\"\n          data-slot=\"container\"\n          className={clsx(\n            'rs-root',\n            'not-prose',\n            addDefaultStyles && 'rs-default-styles',\n            className\n          )}\n          style={style}\n        >\n          {showLanguage && displayLanguageId ? (\n            <span\n              id=\"language-label\"\n              data-slot=\"language-label\"\n              className={clsx('rs-language-label', langClassName)}\n              style={langStyle}\n            >\n              {displayLanguageId}\n            </span>\n          ) : null}\n          {typeof highlightedCode === 'string' ? (\n            <div\n              data-slot=\"content\"\n              dangerouslySetInnerHTML={{ __html: highlightedCode }}\n            />\n          ) : (\n            highlightedCode\n          )}\n        </Element>\n      );\n    }\n  );\n};\n"],"mappings":"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"}