react-shiki 0.9.1 → 0.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -24,7 +24,7 @@ A performant client-side syntax highlighting component and hook for React, built
24
24
  - [Option 2: CSS Theme Switching](#option-2-css-theme-switching)
25
25
  - [Custom Themes](#custom-themes)
26
26
  - [Custom Languages](#custom-languages)
27
- - [Preloading Custom Languages](#preloading-custom-languages)
27
+ - [Preloading Languages](#preloading-languages)
28
28
  - [Language Aliases](#language-aliases)
29
29
  - [Custom Transformers](#custom-transformers)
30
30
  - [Line Numbers](#line-numbers)
@@ -211,7 +211,8 @@ See [Shiki - RegExp Engines](https://shiki.style/guide/regex-engines) for more i
211
211
  | `language` | `string \| object` | - | Language to highlight, built-in or custom textmate grammer object |
212
212
  | `theme` | `string \| object` | `'github-dark'` | Single or multi-theme configuration, built-in or custom textmate theme object |
213
213
  | `delay` | `number` | `0` | Delay between highlights (in milliseconds) |
214
- | `customLanguages` | `array` | `[]` | Array of custom languages to preload |
214
+ | `customLanguages` | `array` | `[]` | **Deprecated**: use `preloadLanguages` instead. |
215
+ | `preloadLanguages` | `array` | `[]` | Preload bundled language IDs and custom language grammars |
215
216
  | `langAlias` | `object` | `{}` | Map of language aliases |
216
217
  | `engine` | `RegexEngine` | Oniguruma | RegExp engine for syntax highlighting (Oniguruma, JavaScript RegExp, or JavaScript Raw) |
217
218
  | `showLineNumbers` | `boolean` | `false` | Display line numbers alongside code |
@@ -358,9 +359,10 @@ import mcfunction from "../langs/mcfunction.tmLanguage.json";
358
359
  const highlightedCode = useShikiHighlighter(code, mcfunction, "github-dark");
359
360
  ```
360
361
 
361
- #### Preloading Custom Languages
362
+ #### Preloading Languages
362
363
 
363
364
  For dynamic highlighting scenarios where language selection happens at runtime:
365
+ `preloadLanguages` can also preload bundled language IDs, not just custom grammars.
364
366
 
365
367
  ```tsx
366
368
  import mcfunction from "../langs/mcfunction.tmLanguage.json";
@@ -370,14 +372,14 @@ import bosque from "../langs/bosque.tmLanguage.json";
370
372
  <ShikiHighlighter
371
373
  language="typescript"
372
374
  theme="github-dark"
373
- customLanguages={[mcfunction, bosque]}
375
+ preloadLanguages={[mcfunction, bosque]}
374
376
  >
375
377
  {code.trim()}
376
378
  </ShikiHighlighter>
377
379
 
378
380
  // Hook
379
381
  const highlightedCode = useShikiHighlighter(code, "typescript", "github-dark", {
380
- customLanguages: [mcfunction, bosque],
382
+ preloadLanguages: [mcfunction, bosque],
381
383
  });
382
384
  ```
383
385
 
@@ -7,27 +7,17 @@ import {
7
7
  } from "react";
8
8
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
9
9
  import { toJsxRuntime } from "hast-util-to-jsx-runtime";
10
+ import { guessEmbeddedLanguages } from "shiki/core";
10
11
 
11
12
  // src/lib/utils.ts
12
13
  import { useRef } from "react";
13
14
  import { dequal } from "dequal";
14
- var useStableOptions = (value) => {
15
+ var useStableValue = (value) => {
15
16
  const ref = useRef(value);
16
- const revision = useRef(0);
17
- if (typeof value !== "object" || value === null) {
18
- if (value !== ref.current) {
19
- ref.current = value;
20
- revision.current += 1;
21
- }
22
- return [value, revision.current];
23
- }
24
- if (value !== ref.current) {
25
- if (!dequal(value, ref.current)) {
26
- ref.current = value;
27
- revision.current += 1;
28
- }
17
+ if (value !== ref.current && !dequal(value, ref.current)) {
18
+ ref.current = value;
29
19
  }
30
- return [ref.current, revision.current];
20
+ return ref.current;
31
21
  };
32
22
  var throttleHighlighting = (performHighlight, timeoutControl, throttleMs) => {
33
23
  const now = Date.now();
@@ -39,54 +29,81 @@ var throttleHighlighting = (performHighlight, timeoutControl, throttleMs) => {
39
29
  }, delay);
40
30
  };
41
31
 
42
- // src/lib/resolvers.ts
43
- var resolveLanguage = (lang, customLanguages, langAliases) => {
44
- const normalizedCustomLangs = customLanguages ? Array.isArray(customLanguages) ? customLanguages : [customLanguages] : [];
32
+ // src/lib/language.ts
33
+ import { isSpecialLang } from "shiki/core";
34
+ var FALLBACK_LANGUAGE = "plaintext";
35
+ var toArray = (value) => value == null ? [] : Array.isArray(value) ? value : [value];
36
+ var languageKey = (lang) => {
37
+ if (lang == null) return null;
38
+ if (typeof lang === "string") return `s:${lang}`;
39
+ return `o:${lang.name}::${lang.scopeName}`;
40
+ };
41
+ var dedupeLanguages = (langs) => {
42
+ const seen = /* @__PURE__ */ new Set();
43
+ const deduped = [];
44
+ for (const lang of langs) {
45
+ const key = languageKey(lang);
46
+ if (key == null || seen.has(key)) continue;
47
+ seen.add(key);
48
+ deduped.push(lang);
49
+ }
50
+ return deduped;
51
+ };
52
+ var isLoadableLanguage = (lang, bundledLanguages) => {
53
+ if (lang == null) return false;
54
+ if (typeof lang === "string") return lang in bundledLanguages;
55
+ return typeof lang.name === "string" && typeof lang.scopeName === "string";
56
+ };
57
+ var resolveLoadedLanguage = (languageId, loadedLanguages) => isSpecialLang(languageId) || loadedLanguages.includes(languageId) ? languageId : FALLBACK_LANGUAGE;
58
+ var resolveLanguage = (lang, customLanguages, langAliases, preloadLanguages) => {
59
+ const customLangs = toArray(customLanguages);
60
+ const preloadLangs = toArray(preloadLanguages);
61
+ const customMatchPool = [...customLangs, ...preloadLangs];
62
+ let languageId = FALLBACK_LANGUAGE;
63
+ let primaryLang;
45
64
  if (lang == null || typeof lang === "string" && !lang.trim()) {
46
65
  return {
47
- languageId: "plaintext",
48
- displayLanguageId: "plaintext",
49
- langsToLoad: void 0
66
+ languageId,
67
+ langsToLoad: dedupeLanguages([...preloadLangs, ...customLangs])
50
68
  };
51
69
  }
52
70
  if (typeof lang === "object") {
53
- return {
54
- languageId: lang.name,
55
- displayLanguageId: lang.name || null,
56
- langsToLoad: lang
57
- };
58
- }
59
- const lowerLang = lang.toLowerCase();
60
- const matches = (str) => str?.toLowerCase() === lowerLang;
61
- const customMatch = normalizedCustomLangs.find(
62
- (cl) => matches(cl.name) || matches(cl.scopeName) || matches(cl.scopeName?.split(".").pop()) || cl.aliases?.some(matches) || cl.fileTypes?.some(matches)
63
- );
64
- if (customMatch) {
65
- return {
66
- languageId: customMatch.name || lang,
67
- displayLanguageId: lang,
68
- langsToLoad: customMatch
69
- };
70
- }
71
- if (langAliases?.[lang]) {
72
- return {
73
- languageId: langAliases[lang],
74
- displayLanguageId: lang,
75
- langsToLoad: langAliases[lang]
76
- };
71
+ languageId = lang.name;
72
+ primaryLang = lang;
73
+ } else {
74
+ const lowerLang = lang.toLowerCase();
75
+ const matches = (str) => str?.toLowerCase() === lowerLang;
76
+ const customMatch = customMatchPool.find(
77
+ (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))
78
+ );
79
+ if (customMatch) {
80
+ languageId = customMatch.name || lang;
81
+ primaryLang = customMatch;
82
+ } else if (langAliases?.[lang]) {
83
+ languageId = langAliases[lang];
84
+ primaryLang = langAliases[lang];
85
+ } else {
86
+ languageId = lang;
87
+ primaryLang = lang;
88
+ }
77
89
  }
78
90
  return {
79
- languageId: lang,
80
- displayLanguageId: lang,
81
- langsToLoad: lang
91
+ languageId,
92
+ langsToLoad: dedupeLanguages([
93
+ primaryLang,
94
+ ...preloadLangs,
95
+ ...customLangs
96
+ ])
82
97
  };
83
98
  };
99
+
100
+ // src/lib/theme.ts
84
101
  var isTextmateTheme = (value) => typeof value === "object" && value !== null && "tokenColors" in value && Array.isArray(value.tokenColors);
85
102
  function resolveTheme(themeInput) {
86
103
  const inputIsTextmateTheme = isTextmateTheme(themeInput);
87
104
  const isMultiThemeConfig = typeof themeInput === "object" && themeInput !== null && !inputIsTextmateTheme;
88
105
  const validMultiThemeObj = typeof themeInput === "object" && themeInput !== null && !inputIsTextmateTheme && Object.entries(themeInput).some(
89
- ([key, value]) => key && value && key.trim() !== "" && value !== "" && (typeof value === "string" || isTextmateTheme(value))
106
+ ([key, value]) => key.trim() !== "" && (typeof value === "string" && value.trim() !== "" || isTextmateTheme(value))
90
107
  );
91
108
  if (isMultiThemeConfig) {
92
109
  const themeId = validMultiThemeObj ? `multi-${Object.values(themeInput).map(
@@ -129,56 +146,94 @@ function lineNumbersTransformer(startLine = 1) {
129
146
  };
130
147
  }
131
148
 
132
- // src/lib/hook.ts
149
+ // src/lib/options.ts
133
150
  var DEFAULT_THEMES = {
134
151
  light: "github-light",
135
152
  dark: "github-dark"
136
153
  };
154
+ var buildThemeOptions = (resolvedTheme, options) => {
155
+ if (resolvedTheme.isMultiTheme) {
156
+ return {
157
+ themes: resolvedTheme.multiTheme ?? DEFAULT_THEMES,
158
+ defaultColor: options.defaultColor,
159
+ cssVariablePrefix: options.cssVariablePrefix
160
+ };
161
+ }
162
+ return {
163
+ theme: resolvedTheme.singleTheme ?? DEFAULT_THEMES.dark
164
+ };
165
+ };
166
+ var buildTransformers = (options) => {
167
+ const transformers = [...options.transformers || []];
168
+ if (options.showLineNumbers) {
169
+ transformers.push(lineNumbersTransformer(options.startingLineNumber));
170
+ }
171
+ return transformers;
172
+ };
173
+ var buildShikiOptions = ({
174
+ languageId,
175
+ resolvedTheme,
176
+ options
177
+ }) => {
178
+ const {
179
+ defaultColor: _defaultColor,
180
+ cssVariablePrefix: _cssVariablePrefix,
181
+ showLineNumbers: _showLineNumbers,
182
+ startingLineNumber: _startingLineNumber,
183
+ transformers: _transformers,
184
+ ...restOptions
185
+ } = options;
186
+ return {
187
+ lang: languageId,
188
+ ...buildThemeOptions(resolvedTheme, options),
189
+ ...restOptions,
190
+ transformers: buildTransformers(options)
191
+ };
192
+ };
193
+
194
+ // src/lib/hook.ts
195
+ var getEmbeddedLanguages = (code, languageId, highlighter) => {
196
+ const bundled = highlighter.getBundledLanguages();
197
+ return guessEmbeddedLanguages(code, languageId).flatMap(
198
+ (language) => bundled[language] ?? []
199
+ );
200
+ };
137
201
  var useShikiHighlighter = (code, lang, themeInput, options = {}, highlighterFactory) => {
138
202
  const [highlightedCode, setHighlightedCode] = useState(null);
139
- const [stableLang, langRev] = useStableOptions(lang);
140
- const [stableTheme, themeRev] = useStableOptions(themeInput);
141
- const [stableOpts, optsRev] = useStableOptions(options);
203
+ const stableLang = useStableValue(lang);
204
+ const stableTheme = useStableValue(themeInput);
205
+ const stableOpts = useStableValue(options);
142
206
  const { languageId, langsToLoad } = useMemo(
143
207
  () => resolveLanguage(
144
208
  stableLang,
145
209
  stableOpts.customLanguages,
146
- stableOpts.langAlias
210
+ stableOpts.langAlias,
211
+ stableOpts.preloadLanguages
147
212
  ),
148
- [stableLang, stableOpts.customLanguages, stableOpts.langAlias]
213
+ [
214
+ stableLang,
215
+ stableOpts.customLanguages,
216
+ stableOpts.preloadLanguages,
217
+ stableOpts.langAlias
218
+ ]
219
+ );
220
+ const resolvedTheme = useMemo(
221
+ () => resolveTheme(stableTheme),
222
+ [stableTheme]
149
223
  );
150
- const { isMultiTheme, themeId, multiTheme, singleTheme, themesToLoad } = useMemo(() => resolveTheme(stableTheme), [stableTheme]);
224
+ const { themesToLoad } = resolvedTheme;
151
225
  const timeoutControl = useRef2({
152
226
  nextAllowedTime: 0,
153
227
  timeoutId: void 0
154
228
  });
155
- const shikiOptions = useMemo(() => {
156
- const languageOption = { lang: languageId };
157
- const {
158
- defaultColor,
159
- cssVariablePrefix,
160
- showLineNumbers,
161
- startingLineNumber,
162
- ...restOptions
163
- } = stableOpts;
164
- const themeOptions = isMultiTheme ? {
165
- themes: multiTheme || DEFAULT_THEMES,
166
- defaultColor,
167
- cssVariablePrefix
168
- } : {
169
- theme: singleTheme || DEFAULT_THEMES.dark
170
- };
171
- const transformers = restOptions.transformers || [];
172
- if (showLineNumbers) {
173
- transformers.push(lineNumbersTransformer(startingLineNumber));
174
- }
175
- return {
176
- ...languageOption,
177
- ...themeOptions,
178
- ...restOptions,
179
- transformers
180
- };
181
- }, [languageId, themeId, langRev, themeRev, optsRev]);
229
+ const shikiOptions = useMemo(
230
+ () => buildShikiOptions({
231
+ languageId,
232
+ resolvedTheme,
233
+ options: stableOpts
234
+ }),
235
+ [languageId, resolvedTheme, stableOpts]
236
+ );
182
237
  useEffect(() => {
183
238
  let isMounted = true;
184
239
  const highlightCode = async () => {
@@ -188,8 +243,20 @@ var useShikiHighlighter = (code, lang, themeInput, options = {}, highlighterFact
188
243
  themesToLoad,
189
244
  stableOpts.engine
190
245
  );
191
- const loadedLanguages = highlighter.getLoadedLanguages();
192
- const langToUse = loadedLanguages.includes(languageId) ? languageId : "plaintext";
246
+ if (!stableOpts.highlighter) {
247
+ const embedded = getEmbeddedLanguages(
248
+ code,
249
+ languageId,
250
+ highlighter
251
+ );
252
+ if (embedded.length > 0) {
253
+ await highlighter.loadLanguage(...embedded);
254
+ }
255
+ }
256
+ const langToUse = resolveLoadedLanguage(
257
+ languageId,
258
+ highlighter.getLoadedLanguages()
259
+ );
193
260
  const finalOptions = { ...shikiOptions, lang: langToUse };
194
261
  if (isMounted) {
195
262
  const output = stableOpts.outputFormat === "html" ? highlighter.codeToHtml(code, finalOptions) : toJsxRuntime(highlighter.codeToHast(code, finalOptions), {
@@ -286,22 +353,21 @@ var createShikiHighlighterComponent = (useShikiHighlighterImpl) => {
286
353
  children: code,
287
354
  as: Element = "pre",
288
355
  customLanguages,
356
+ preloadLanguages,
289
357
  ...shikiOptions
290
358
  }, ref) => {
291
359
  const options = {
292
360
  delay,
293
361
  transformers,
294
362
  customLanguages,
363
+ preloadLanguages,
295
364
  showLineNumbers,
296
365
  defaultColor,
297
366
  cssVariablePrefix,
298
367
  startingLineNumber,
299
368
  ...shikiOptions
300
369
  };
301
- const { displayLanguageId } = resolveLanguage(
302
- language,
303
- customLanguages
304
- );
370
+ const displayLanguageId = typeof language === "object" ? language.name || null : language?.trim() || null;
305
371
  const highlightedCode = useShikiHighlighterImpl(
306
372
  code,
307
373
  language,
@@ -341,9 +407,10 @@ var createShikiHighlighterComponent = (useShikiHighlighterImpl) => {
341
407
  };
342
408
 
343
409
  export {
410
+ isLoadableLanguage,
344
411
  useShikiHighlighter,
345
412
  rehypeInlineCodeProperty,
346
413
  isInlineCode,
347
414
  createShikiHighlighterComponent
348
415
  };
349
- //# sourceMappingURL=chunk-EXJNTVNR.js.map
416
+ //# sourceMappingURL=chunk-QPJZGYHO.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/lib/hook.ts","../src/lib/utils.ts","../src/lib/language.ts","../src/lib/theme.ts","../src/lib/transformers.ts","../src/lib/options.ts","../src/lib/plugins.ts","#style-inject:#style-inject","../src/lib/styles.css","../src/lib/component.tsx"],"sourcesContent":["import {\n useEffect,\n useMemo,\n useRef,\n useState,\n type ReactNode,\n} from 'react';\n\nimport { jsx, jsxs, Fragment } from 'react/jsx-runtime';\nimport { toJsxRuntime } from 'hast-util-to-jsx-runtime';\n\nimport type {\n Highlighter,\n HighlighterCore,\n Awaitable,\n LanguageInput,\n RegexEngine,\n} from 'shiki';\n\nimport { guessEmbeddedLanguages } from 'shiki/core';\n\nimport type {\n Language,\n Theme,\n HighlighterOptions,\n TimeoutState,\n Themes,\n} from './types';\n\nimport { throttleHighlighting, useStableValue } from './utils';\nimport { resolveLanguage, resolveLoadedLanguage } from './language';\nimport { resolveTheme } from './theme';\nimport { buildShikiOptions } from './options';\n\n/**\n * Returns detected embedded languages that are available in the current bundle.\n */\nconst 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 * Base hook for syntax highlighting using Shiki.\n * This is the core implementation used by all entry points.\n *\n * @param code - The code to highlight\n * @param lang - Language for highlighting\n * @param themeInput - Theme or themes to use\n * @param options - Highlighting options\n * @param highlighterFactory - Factory function to create highlighter (internal use)\n */\nexport const useShikiHighlighter = (\n code: string,\n lang: Language,\n themeInput: Theme | Themes,\n options: HighlighterOptions = {},\n highlighterFactory: (\n langsToLoad: Language[],\n themesToLoad: Theme[],\n engine?: Awaitable<RegexEngine>\n ) => Promise<Highlighter | HighlighterCore>\n) => {\n const [highlightedCode, setHighlightedCode] = useState<\n ReactNode | string | null\n >(null);\n\n // Stabilize options, language and theme inputs to prevent unnecessary\n // re-renders or recalculations when object references change\n const stableLang = useStableValue(lang);\n const stableTheme = useStableValue(themeInput);\n const stableOpts = useStableValue(options);\n\n const { languageId, langsToLoad } = useMemo(\n () =>\n resolveLanguage(\n stableLang,\n stableOpts.customLanguages,\n stableOpts.langAlias,\n stableOpts.preloadLanguages\n ),\n [\n stableLang,\n stableOpts.customLanguages,\n stableOpts.preloadLanguages,\n stableOpts.langAlias,\n ]\n );\n\n const resolvedTheme = useMemo(\n () => resolveTheme(stableTheme),\n [stableTheme]\n );\n const { themesToLoad } = resolvedTheme;\n\n const timeoutControl = useRef<TimeoutState>({\n nextAllowedTime: 0,\n timeoutId: undefined,\n });\n\n const shikiOptions = useMemo(\n () =>\n buildShikiOptions({\n languageId,\n resolvedTheme,\n options: stableOpts,\n }),\n [languageId, resolvedTheme, stableOpts]\n );\n\n useEffect(() => {\n let isMounted = true;\n\n const highlightCode = async () => {\n if (!languageId) return;\n\n const highlighter = stableOpts.highlighter\n ? stableOpts.highlighter\n : await highlighterFactory(\n langsToLoad,\n themesToLoad,\n stableOpts.engine\n );\n\n // Load embedded language grammars (e.g. ```python inside markdown)\n if (!stableOpts.highlighter) {\n const embedded = getEmbeddedLanguages(\n code,\n languageId,\n highlighter\n );\n if (embedded.length > 0) {\n await highlighter.loadLanguage(...embedded);\n }\n }\n\n const langToUse = resolveLoadedLanguage(\n languageId,\n highlighter.getLoadedLanguages()\n );\n const finalOptions = { ...shikiOptions, lang: langToUse };\n\n if (isMounted) {\n const output =\n stableOpts.outputFormat === 'html'\n ? highlighter.codeToHtml(code, finalOptions)\n : toJsxRuntime(highlighter.codeToHast(code, finalOptions), {\n jsx,\n jsxs,\n Fragment,\n });\n setHighlightedCode(output);\n }\n };\n\n const { delay } = stableOpts;\n\n if (delay) {\n throttleHighlighting(highlightCode, timeoutControl, delay);\n } else {\n highlightCode().catch(console.error);\n }\n\n return () => {\n isMounted = false;\n clearTimeout(timeoutControl.current.timeoutId);\n };\n }, [\n code,\n shikiOptions,\n stableOpts.delay,\n stableOpts.highlighter,\n langsToLoad,\n themesToLoad,\n ]);\n\n return highlightedCode;\n};\n","import { 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 const now = Date.now();\n clearTimeout(timeoutControl.current.timeoutId);\n\n const delay = Math.max(0, timeoutControl.current.nextAllowedTime - now);\n timeoutControl.current.timeoutId = setTimeout(() => {\n performHighlight().catch(console.error);\n timeoutControl.current.nextAllowedTime = now + throttleMs;\n }, delay);\n};\n","import type { Language } from './types';\nimport { isSpecialLang } from 'shiki/core';\nimport type {\n DynamicImportLanguageRegistration,\n LanguageRegistration,\n} from 'shiki';\n\nexport const FALLBACK_LANGUAGE = 'plaintext';\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\n/**\n * Resolved themes and metadata\n */\nexport interface ThemeResult {\n isMultiTheme: boolean;\n themeId: Theme;\n multiTheme?: Themes | null;\n singleTheme?: Theme;\n themesToLoad: Theme[];\n}\n\n/**\n * Determines theme configuration and returns the resolved theme with metadata\n * @param themeInput - The theme input, either as a string name or theme object\n * @returns Object containing:\n * - isMultiTheme: If theme input is a multi-theme configuration\n * - themeId: Theme reference identifier\n * - multiTheme: The multi-theme config if it exists\n * - singleTheme: The single theme if it exists\n * - themesToLoad: The themes to load when creating the highlighter\n */\nconst isTextmateTheme = (value: unknown): value is ThemeRegistrationAny =>\n typeof value === 'object' &&\n value !== null &&\n 'tokenColors' in value &&\n Array.isArray((value as ThemeRegistrationAny).tokenColors);\n\nexport function resolveTheme(themeInput: Theme | Themes): ThemeResult {\n const inputIsTextmateTheme = isTextmateTheme(themeInput);\n\n // Assume non textmate objects are multi theme configs\n const isMultiThemeConfig =\n typeof themeInput === 'object' &&\n themeInput !== null &&\n !inputIsTextmateTheme;\n\n const validMultiThemeObj =\n typeof themeInput === 'object' &&\n themeInput !== null &&\n !inputIsTextmateTheme &&\n Object.entries(themeInput).some(\n ([key, value]) =>\n key.trim() !== '' &&\n ((typeof value === 'string' && value.trim() !== '') ||\n isTextmateTheme(value))\n );\n\n if (isMultiThemeConfig) {\n const themeId = validMultiThemeObj\n ? `multi-${Object.values(themeInput)\n .map(\n (theme) =>\n (typeof theme === 'string'\n ? theme\n : (theme as { name?: string })?.name) || 'custom'\n )\n .sort()\n .join('-')}`\n : 'multi-default';\n\n // If config is invalid, return null to handle fallback in `buildShikiOptions()`\n return {\n isMultiTheme: true,\n themeId,\n multiTheme: validMultiThemeObj ? themeInput : null,\n themesToLoad: validMultiThemeObj ? Object.values(themeInput) : [],\n };\n }\n\n return {\n isMultiTheme: false,\n themeId:\n typeof themeInput === 'string'\n ? themeInput\n : themeInput?.name || 'custom',\n singleTheme: themeInput,\n themesToLoad: [themeInput],\n };\n}\n","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, '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, 'line-numbers');\n return node;\n },\n };\n}\n","import type {\n BundledTheme,\n CodeOptionsMultipleThemes,\n CodeOptionsSingleTheme,\n CodeToHastOptions,\n} from 'shiki';\n\nimport type { HighlighterOptions, Themes } from './types';\nimport type { ThemeResult } from './theme';\nimport { lineNumbersTransformer } from './transformers';\n\nconst DEFAULT_THEMES: Themes = {\n light: 'github-light',\n dark: 'github-dark',\n};\n\ninterface BuildShikiOptionsInput {\n languageId: string;\n resolvedTheme: ThemeResult;\n options: HighlighterOptions;\n}\n\nconst buildThemeOptions = (\n resolvedTheme: ThemeResult,\n options: HighlighterOptions\n):\n | CodeOptionsMultipleThemes<BundledTheme>\n | CodeOptionsSingleTheme<BundledTheme> => {\n if (resolvedTheme.isMultiTheme) {\n return {\n themes: resolvedTheme.multiTheme ?? DEFAULT_THEMES,\n defaultColor: options.defaultColor,\n cssVariablePrefix: options.cssVariablePrefix,\n } as CodeOptionsMultipleThemes<BundledTheme>;\n }\n\n return {\n theme: resolvedTheme.singleTheme ?? DEFAULT_THEMES.dark,\n } as CodeOptionsSingleTheme<BundledTheme>;\n};\n\nconst buildTransformers = (\n options: HighlighterOptions\n): CodeToHastOptions['transformers'] => {\n const transformers = [...(options.transformers || [])];\n\n if (options.showLineNumbers) {\n transformers.push(lineNumbersTransformer(options.startingLineNumber));\n }\n\n return transformers;\n};\n\nexport const buildShikiOptions = ({\n languageId,\n resolvedTheme,\n options,\n}: BuildShikiOptionsInput): CodeToHastOptions => {\n const {\n defaultColor: _defaultColor,\n cssVariablePrefix: _cssVariablePrefix,\n showLineNumbers: _showLineNumbers,\n startingLineNumber: _startingLineNumber,\n transformers: _transformers,\n ...restOptions\n } = options;\n\n return {\n lang: languageId,\n ...buildThemeOptions(resolvedTheme, options),\n ...restOptions,\n transformers: buildTransformers(options),\n };\n};\n","import { visit } from 'unist-util-visit';\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: any): undefined => {\n visit(tree, 'element', (node: Element, _index, parent: Element) => {\n if (node.tagName === 'code' && parent.tagName !== 'pre') {\n node.properties.inline = true;\n }\n });\n };\n}\n\n/**\n * Function to determine if code is inline based on the presence of line breaks\n *\n * @example\n * const isInline = node && isInlineCode(node: Element)\n */\nexport const isInlineCode = (node: Element): boolean => {\n const textContent = (node.children || [])\n .filter((child) => child.type === 'text')\n .map((child) => child.value)\n .join('');\n\n return !textContent.includes('\\n');\n};\n","\n export default function styleInject(css, { insertAt } = {}) {\n if (!css || typeof document === 'undefined') return\n \n const head = document.head || document.getElementsByTagName('head')[0]\n const style = document.createElement('style')\n style.type = 'text/css'\n \n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild)\n } else {\n head.appendChild(style)\n }\n } else {\n head.appendChild(style)\n }\n \n if (style.styleSheet) {\n style.styleSheet.cssText = css\n } else {\n style.appendChild(document.createTextNode(css))\n }\n }\n ","import styleInject from '#style-inject';styleInject(\".relative {\\n position: relative;\\n}\\n.defaultStyles pre {\\n overflow: auto;\\n border-radius: 0.5rem;\\n padding-left: 1.5rem;\\n padding-right: 1.5rem;\\n padding-top: 1.25rem;\\n padding-bottom: 1.25rem;\\n}\\n.languageLabel {\\n position: absolute;\\n right: 0.75rem;\\n top: 0.5rem;\\n font-family: monospace;\\n font-size: 0.75rem;\\n letter-spacing: -0.05em;\\n color: rgba(107, 114, 128, 0.85);\\n}\\n.line-numbers::before {\\n counter-increment: line-number;\\n content: counter(line-number);\\n display: inline-flex;\\n justify-content: flex-end;\\n align-items: flex-start;\\n box-sizing: content-box;\\n min-width: var(--line-numbers-width, 2ch);\\n padding-left: var(--line-numbers-padding-left, 2ch);\\n padding-right: var(--line-numbers-padding-right, 2ch);\\n color: var(--line-numbers-foreground, rgba(107, 114, 128, 0.6));\\n font-size: var(--line-numbers-font-size, inherit);\\n font-weight: var(--line-numbers-font-weight, inherit);\\n line-height: var(--line-numbers-line-height, inherit);\\n font-family: var(--line-numbers-font-family, inherit);\\n opacity: var(--line-numbers-opacity, 1);\\n user-select: none;\\n pointer-events: none;\\n}\\n.has-line-numbers {\\n counter-reset: line-number calc(var(--line-start, 1) - 1);\\n --line-numbers-foreground: rgba(107, 114, 128, 0.5);\\n --line-numbers-width: 2ch;\\n --line-numbers-padding-left: 0ch;\\n --line-numbers-padding-right: 2ch;\\n --line-numbers-font-size: inherit;\\n --line-numbers-font-weight: inherit;\\n --line-numbers-line-height: inherit;\\n --line-numbers-font-family: inherit;\\n --line-numbers-opacity: 1;\\n}\\n\")","import './styles.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 'pre'\n */\n as?: React.ElementType;\n}\n\n/**\n * Base ShikiHighlighter component factory.\n * This creates a component that uses the provided hook implementation.\n */\nexport const createShikiHighlighterComponent = (\n useShikiHighlighterImpl: 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 = 'pre',\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 const isHtmlOutput = typeof highlightedCode === 'string';\n\n return (\n <Element\n ref={ref}\n data-testid=\"shiki-container\"\n className={clsx(\n 'relative',\n 'not-prose',\n addDefaultStyles && 'defaultStyles',\n className\n )}\n style={style}\n id=\"shiki-container\"\n >\n {showLanguage && displayLanguageId ? (\n <span\n className={clsx('languageLabel', langClassName)}\n style={langStyle}\n id=\"language-label\"\n >\n {displayLanguageId}\n </span>\n ) : null}\n {isHtmlOutput ? (\n <div dangerouslySetInnerHTML={{ __html: highlightedCode }} />\n ) : (\n highlightedCode\n )}\n </Element>\n );\n }\n );\n};\n"],"mappings":"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","names":["useRef","useRef","jsx","jsxs"]}
@@ -1,44 +1,7 @@
1
- import { Highlighter, HighlighterCore, CodeOptionsMultipleThemes, BundledTheme, CodeToHastOptions, BundledHighlighterOptions, StringLiteralUnion, BundledLanguage, SpecialLanguage, ThemeRegistrationAny } from 'shiki';
1
+ import { LanguageRegistration, StringLiteralUnion, BundledLanguage, SpecialLanguage, Highlighter, HighlighterCore, CodeOptionsMultipleThemes, BundledTheme, CodeToHastOptions, BundledHighlighterOptions, ThemeRegistrationAny } from 'shiki';
2
2
  import { ReactNode } from 'react';
3
- import { LanguageRegistration as LanguageRegistration$1 } from 'shiki/core';
4
3
  import { Element as Element$1 } from 'hast';
5
4
 
6
- /**
7
- * Attribution:
8
- * This code was written by github:hippotastic in expressive-code/expressive-code
9
- * https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-shiki/src/languages.ts
10
- */
11
-
12
- type IShikiRawRepository = LanguageRegistration$1['repository'];
13
- type IShikiRawRule = IShikiRawRepository[keyof IShikiRawRepository];
14
- type ILocation = IShikiRawRepository['$vscodeTextmateLocation'];
15
- interface ILocatable {
16
- readonly $vscodeTextmateLocation?: ILocation;
17
- }
18
- interface IRawRepositoryMap {
19
- [name: string]: IRawRule;
20
- }
21
- type IRawRepository = IRawRepositoryMap & ILocatable;
22
- interface IRawCapturesMap {
23
- [captureId: string]: IRawRule;
24
- }
25
- type IRawCaptures = IRawCapturesMap & ILocatable;
26
- interface IRawRule extends Omit<IShikiRawRule, 'applyEndPatternLast' | 'captures' | 'patterns'> {
27
- readonly applyEndPatternLast?: boolean | number;
28
- readonly captures?: IRawCaptures;
29
- readonly comment?: string;
30
- readonly patterns?: IRawRule[];
31
- }
32
- /**
33
- * A less strict version of Shiki's `LanguageRegistration` interface that aligns better with
34
- * actual grammars found in the wild. This version attempts to reduce the amount
35
- * of type errors that would occur when importing and adding external grammars,
36
- * while still being supported by the language processing code.
37
- */
38
- interface LanguageRegistration extends Omit<LanguageRegistration$1, 'repository'> {
39
- repository?: IRawRepository;
40
- }
41
-
42
5
  /**
43
6
  * HTML Element, use to type `node` from react-markdown
44
7
  */
@@ -47,7 +10,7 @@ type Element = Element$1;
47
10
  * A Shiki BundledLanguage or a custom textmate grammar object
48
11
  * @see https://shiki.style/languages
49
12
  */
50
- type Language = LanguageRegistration | StringLiteralUnion<BundledLanguage | SpecialLanguage> | undefined;
13
+ type Language = LanguageRegistration | StringLiteralUnion<BundledLanguage> | SpecialLanguage | undefined;
51
14
  /**
52
15
  * A Shiki BundledTheme or a custom textmate theme object
53
16
  * @see https://shiki.style/themes
@@ -83,8 +46,14 @@ interface ReactShikiOptions {
83
46
  delay?: number;
84
47
  /**
85
48
  * Custom textmate grammars to be preloaded for highlighting.
49
+ * @deprecated Use preloadLanguages instead.
86
50
  */
87
51
  customLanguages?: LanguageRegistration | LanguageRegistration[];
52
+ /**
53
+ * Preload custom grammars or bundled languages.
54
+ * Supports custom textmate grammars, replaces deprecated `customLanguages`
55
+ */
56
+ preloadLanguages?: Language | Language[];
88
57
  /**
89
58
  * Output format for the highlighted code.
90
59
  * - 'react': Returns React nodes (default, safer)
package/dist/core.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as react from 'react';
2
- import { S as ShikiHighlighterProps, U as UseShikiHighlighter } from './component-mMdHg8JD.js';
3
- export { E as Element, H as HighlighterOptions, L as Language, T as Theme, a as Themes, i as isInlineCode, r as rehypeInlineCodeProperty } from './component-mMdHg8JD.js';
4
- export { createHighlighterCore } from 'shiki/core';
2
+ import { S as ShikiHighlighterProps, U as UseShikiHighlighter } from './component-CoSKNtmy.js';
3
+ export { E as Element, H as HighlighterOptions, L as Language, T as Theme, a as Themes, i as isInlineCode, r as rehypeInlineCodeProperty } from './component-CoSKNtmy.js';
4
+ export { LanguageRegistration, createHighlighterCore } from 'shiki/core';
5
5
  export { createOnigurumaEngine } from 'shiki/engine/oniguruma';
6
6
  export { createJavaScriptRawEngine, createJavaScriptRegexEngine } from 'shiki/engine/javascript';
7
7
  import 'shiki';
package/dist/core.js CHANGED
@@ -3,7 +3,7 @@ import {
3
3
  isInlineCode,
4
4
  rehypeInlineCodeProperty,
5
5
  useShikiHighlighter
6
- } from "./chunk-EXJNTVNR.js";
6
+ } from "./chunk-QPJZGYHO.js";
7
7
 
8
8
  // src/bundles/core.ts
9
9
  function validateCoreHighlighter(highlighter) {
package/dist/core.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/bundles/core.ts","../src/core.ts"],"sourcesContent":["import type { HighlighterCore } from 'shiki';\n\n/**\n * Validates that a highlighter is provided for the core bundle.\n * The core bundle requires users to provide their own highlighter instance.\n */\nexport function validateCoreHighlighter(\n highlighter: HighlighterCore | undefined\n): HighlighterCore {\n if (!highlighter) {\n throw new Error(\n 'react-shiki/core requires a custom highlighter. ' +\n 'Use createHighlighterCore() from react-shiki or switch to react-shiki for plug-and-play usage.'\n );\n }\n return highlighter;\n}\n","import { useShikiHighlighter as useBaseHook } from './lib/hook';\nimport { validateCoreHighlighter } from './bundles/core';\nimport type { UseShikiHighlighter } from './lib/types';\n\nexport { isInlineCode, rehypeInlineCodeProperty } from './lib/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\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 useBaseHook(\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":";;;;;;;;AAMO,SAAS,wBACd,aACiB;AACjB,MAAI,CAAC,aAAa;AAChB,UAAM,IAAI;AAAA,MACR;AAAA,IAEF;AAAA,EACF;AACA,SAAO;AACT;;;ACMA,SAAS,6BAA6B;AACtC,SAAS,6BAA6B;AACtC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAmCA,IAAMA,uBAA2C,CACtD,MACA,MACA,YACA,UAAU,CAAC,MACR;AAEH,QAAM,cAAc,wBAAwB,QAAQ,WAAW;AAE/D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,GAAG;AAAA,MACH;AAAA,IACF;AAAA,IACA,YAAY;AAAA,EACd;AACF;AAMO,IAAM,mBAAmB;AAAA,EAC9BA;AACF;AACA,IAAO,eAAQ;","names":["useShikiHighlighter"]}
1
+ {"version":3,"sources":["../src/bundles/core.ts","../src/core.ts"],"sourcesContent":["import type { HighlighterCore } from 'shiki';\n\n/**\n * Validates that a highlighter is provided for the core bundle.\n * The core bundle requires users to provide their own highlighter instance.\n */\nexport function validateCoreHighlighter(\n highlighter: HighlighterCore | undefined\n): HighlighterCore {\n if (!highlighter) {\n throw new Error(\n 'react-shiki/core requires a custom highlighter. ' +\n 'Use createHighlighterCore() from react-shiki or switch to react-shiki for plug-and-play usage.'\n );\n }\n return highlighter;\n}\n","import { useShikiHighlighter as useBaseHook } from './lib/hook';\nimport { validateCoreHighlighter } from './bundles/core';\nimport type { UseShikiHighlighter } from './lib/types';\n\nexport { isInlineCode, rehypeInlineCodeProperty } from './lib/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 useBaseHook(\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":";;;;;;;;AAMO,SAAS,wBACd,aACiB;AACjB,MAAI,CAAC,aAAa;AAChB,UAAM,IAAI;AAAA,MACR;AAAA,IAEF;AAAA,EACF;AACA,SAAO;AACT;;;ACMA,SAAS,6BAA6B;AACtC,SAAS,6BAA6B;AACtC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAqCA,IAAMA,uBAA2C,CACtD,MACA,MACA,YACA,UAAU,CAAC,MACR;AAEH,QAAM,cAAc,wBAAwB,QAAQ,WAAW;AAE/D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,GAAG;AAAA,MACH;AAAA,IACF;AAAA,IACA,YAAY;AAAA,EACd;AACF;AAMO,IAAM,mBAAmB;AAAA,EAC9BA;AACF;AACA,IAAO,eAAQ;","names":["useShikiHighlighter"]}
package/dist/index.d.ts CHANGED
@@ -1,9 +1,8 @@
1
1
  import * as react from 'react';
2
- import { S as ShikiHighlighterProps, U as UseShikiHighlighter } from './component-mMdHg8JD.js';
3
- export { E as Element, H as HighlighterOptions, L as Language, T as Theme, a as Themes, i as isInlineCode, r as rehypeInlineCodeProperty } from './component-mMdHg8JD.js';
2
+ import { S as ShikiHighlighterProps, U as UseShikiHighlighter } from './component-CoSKNtmy.js';
3
+ export { E as Element, H as HighlighterOptions, L as Language, T as Theme, a as Themes, i as isInlineCode, r as rehypeInlineCodeProperty } from './component-CoSKNtmy.js';
4
4
  export { createJavaScriptRawEngine, createJavaScriptRegexEngine } from 'shiki/engine/javascript';
5
- import 'shiki';
6
- import 'shiki/core';
5
+ export { LanguageRegistration } from 'shiki';
7
6
  import 'hast';
8
7
 
9
8
  /**
package/dist/index.js CHANGED
@@ -1,32 +1,26 @@
1
1
  import {
2
2
  createShikiHighlighterComponent,
3
3
  isInlineCode,
4
+ isLoadableLanguage,
4
5
  rehypeInlineCodeProperty,
5
6
  useShikiHighlighter
6
- } from "./chunk-EXJNTVNR.js";
7
+ } from "./chunk-QPJZGYHO.js";
7
8
 
8
9
  // src/bundles/full.ts
9
10
  import {
10
- getSingletonHighlighter
11
+ getSingletonHighlighter,
12
+ bundledLanguages
11
13
  } from "shiki";
12
14
  import { createOnigurumaEngine } from "shiki/engine/oniguruma";
13
15
  async function createFullHighlighter(langsToLoad, themesToLoad, engine) {
14
- try {
15
- return await getSingletonHighlighter({
16
- langs: [langsToLoad],
17
- themes: themesToLoad,
18
- engine: engine ?? createOnigurumaEngine(import("shiki/wasm"))
19
- });
20
- } catch (error) {
21
- if (error instanceof Error && error.message.includes("Language")) {
22
- return await getSingletonHighlighter({
23
- langs: ["plaintext"],
24
- themes: themesToLoad,
25
- engine: engine ?? createOnigurumaEngine(import("shiki/wasm"))
26
- });
27
- }
28
- throw error;
29
- }
16
+ const langs = langsToLoad.filter(
17
+ (lang) => isLoadableLanguage(lang, bundledLanguages)
18
+ );
19
+ return await getSingletonHighlighter({
20
+ langs,
21
+ themes: themesToLoad,
22
+ engine: engine ?? createOnigurumaEngine(import("shiki/wasm"))
23
+ });
30
24
  }
31
25
 
32
26
  // src/index.ts
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/bundles/full.ts","../src/index.ts"],"sourcesContent":["import {\n getSingletonHighlighter,\n type Highlighter,\n type Awaitable,\n type RegexEngine,\n} from 'shiki';\nimport { createOnigurumaEngine } from 'shiki/engine/oniguruma';\nimport type { ShikiLanguageRegistration } from '../lib/extended-types';\nimport type { Theme } from '../lib/types';\n\n/**\n * Creates a highlighter using the full Shiki bundle with all languages and themes.\n * This is the largest bundle but provides maximum compatibility.\n */\nexport async function createFullHighlighter(\n langsToLoad: ShikiLanguageRegistration,\n themesToLoad: Theme[],\n engine?: Awaitable<RegexEngine>\n): Promise<Highlighter> {\n try {\n return await getSingletonHighlighter({\n langs: [langsToLoad],\n themes: themesToLoad,\n engine: engine ?? createOnigurumaEngine(import('shiki/wasm')),\n });\n } catch (error) {\n if (error instanceof Error && error.message.includes('Language')) {\n return await getSingletonHighlighter({\n langs: ['plaintext'],\n themes: themesToLoad,\n engine: engine ?? createOnigurumaEngine(import('shiki/wasm')),\n });\n }\n throw error;\n }\n}\n","import { useShikiHighlighter as useBaseHook } from './lib/hook';\nimport { createFullHighlighter } from './bundles/full';\nimport type { UseShikiHighlighter } from './lib/types';\n\nexport { isInlineCode, rehypeInlineCodeProperty } from './lib/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\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 useBaseHook(\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":";;;;;;;;AAAA;AAAA,EACE;AAAA,OAIK;AACP,SAAS,6BAA6B;AAQtC,eAAsB,sBACpB,aACA,cACA,QACsB;AACtB,MAAI;AACF,WAAO,MAAM,wBAAwB;AAAA,MACnC,OAAO,CAAC,WAAW;AAAA,MACnB,QAAQ;AAAA,MACR,QAAQ,UAAU,sBAAsB,OAAO,YAAY,CAAC;AAAA,IAC9D,CAAC;AAAA,EACH,SAAS,OAAO;AACd,QAAI,iBAAiB,SAAS,MAAM,QAAQ,SAAS,UAAU,GAAG;AAChE,aAAO,MAAM,wBAAwB;AAAA,QACnC,OAAO,CAAC,WAAW;AAAA,QACnB,QAAQ;AAAA,QACR,QAAQ,UAAU,sBAAsB,OAAO,YAAY,CAAC;AAAA,MAC9D,CAAC;AAAA,IACH;AACA,UAAM;AAAA,EACR;AACF;;;ACbA;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAyBA,IAAMA,uBAA2C,CACtD,MACA,MACA,YACA,UAAU,CAAC,MACR;AACH,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAMO,IAAM,mBAAmB;AAAA,EAC9BA;AACF;AACA,IAAO,cAAQ;","names":["useShikiHighlighter"]}
1
+ {"version":3,"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 { useShikiHighlighter as useBaseHook } 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 useBaseHook(\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":";;;;;;;;;AAAA;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AACP,SAAS,6BAA6B;AAQtC,eAAsB,sBACpB,aACA,cACA,QACsB;AACtB,QAAM,QAAQ,YAAY;AAAA,IAAO,CAAC,SAChC,mBAAmB,MAAM,gBAAgB;AAAA,EAC3C;AAEA,SAAO,MAAM,wBAAwB;AAAA,IACnC;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ,UAAU,sBAAsB,OAAO,YAAY,CAAC;AAAA,EAC9D,CAAC;AACH;;;ACPA;AAAA,EACE;AAAA,EACA;AAAA,OACK;AA2BA,IAAMA,uBAA2C,CACtD,MACA,MACA,YACA,UAAU,CAAC,MACR;AACH,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAMO,IAAM,mBAAmB;AAAA,EAC9BA;AACF;AACA,IAAO,cAAQ;","names":["useShikiHighlighter"]}
package/dist/web.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import * as react from 'react';
2
- import { S as ShikiHighlighterProps, U as UseShikiHighlighter } from './component-mMdHg8JD.js';
3
- export { E as Element, H as HighlighterOptions, L as Language, T as Theme, a as Themes, i as isInlineCode, r as rehypeInlineCodeProperty } from './component-mMdHg8JD.js';
2
+ import { S as ShikiHighlighterProps, U as UseShikiHighlighter } from './component-CoSKNtmy.js';
3
+ export { E as Element, H as HighlighterOptions, L as Language, T as Theme, a as Themes, i as isInlineCode, r as rehypeInlineCodeProperty } from './component-CoSKNtmy.js';
4
4
  export { createJavaScriptRawEngine, createJavaScriptRegexEngine } from 'shiki/engine/javascript';
5
+ export { LanguageRegistration } from 'shiki/bundle/web';
5
6
  import 'shiki';
6
- import 'shiki/core';
7
7
  import 'hast';
8
8
 
9
9
  /**
package/dist/web.js CHANGED
@@ -1,32 +1,26 @@
1
1
  import {
2
2
  createShikiHighlighterComponent,
3
3
  isInlineCode,
4
+ isLoadableLanguage,
4
5
  rehypeInlineCodeProperty,
5
6
  useShikiHighlighter
6
- } from "./chunk-EXJNTVNR.js";
7
+ } from "./chunk-QPJZGYHO.js";
7
8
 
8
9
  // src/bundles/web.ts
9
10
  import {
10
- getSingletonHighlighter
11
+ getSingletonHighlighter,
12
+ bundledLanguages
11
13
  } from "shiki/bundle/web";
12
14
  import { createOnigurumaEngine } from "shiki/engine/oniguruma";
13
15
  async function createWebHighlighter(langsToLoad, themesToLoad, engine) {
14
- try {
15
- return await getSingletonHighlighter({
16
- langs: [langsToLoad],
17
- themes: themesToLoad,
18
- engine: engine ?? createOnigurumaEngine(import("shiki/wasm"))
19
- });
20
- } catch (error) {
21
- if (error instanceof Error && error.message.includes("Language")) {
22
- return await getSingletonHighlighter({
23
- langs: ["plaintext"],
24
- themes: themesToLoad,
25
- engine: engine ?? createOnigurumaEngine(import("shiki/wasm"))
26
- });
27
- }
28
- throw error;
29
- }
16
+ const langs = langsToLoad.filter(
17
+ (lang) => isLoadableLanguage(lang, bundledLanguages)
18
+ );
19
+ return await getSingletonHighlighter({
20
+ langs,
21
+ themes: themesToLoad,
22
+ engine: engine ?? createOnigurumaEngine(import("shiki/wasm"))
23
+ });
30
24
  }
31
25
 
32
26
  // src/web.ts
package/dist/web.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/bundles/web.ts","../src/web.ts"],"sourcesContent":["import {\n getSingletonHighlighter,\n type Highlighter,\n type Awaitable,\n type RegexEngine,\n} from 'shiki/bundle/web';\nimport { createOnigurumaEngine } from 'shiki/engine/oniguruma';\nimport type { ShikiLanguageRegistration } from '../lib/extended-types';\nimport type { Theme } from '../lib/types';\n\n/**\n * Creates a highlighter using the web Shiki bundle with web-focused languages.\n * Smaller than the full bundle while covering most web development needs.\n * Includes: HTML, CSS, JS, TS, JSON, Markdown, Vue, JSX, Svelte, etc.\n */\nexport async function createWebHighlighter(\n langsToLoad: ShikiLanguageRegistration,\n themesToLoad: Theme[],\n engine?: Awaitable<RegexEngine>\n): Promise<Highlighter> {\n try {\n return await getSingletonHighlighter({\n langs: [langsToLoad],\n themes: themesToLoad,\n engine: engine ?? createOnigurumaEngine(import('shiki/wasm')),\n });\n } catch (error) {\n if (error instanceof Error && error.message.includes('Language')) {\n return await getSingletonHighlighter({\n langs: ['plaintext'],\n themes: themesToLoad,\n engine: engine ?? createOnigurumaEngine(import('shiki/wasm')),\n });\n }\n throw error;\n }\n}\n","import { useShikiHighlighter as useBaseHook } from './lib/hook';\nimport { createWebHighlighter } from './bundles/web';\nimport type { UseShikiHighlighter } from './lib/types';\n\nexport { isInlineCode, rehypeInlineCodeProperty } from './lib/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\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 useBaseHook(\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":";;;;;;;;AAAA;AAAA,EACE;AAAA,OAIK;AACP,SAAS,6BAA6B;AAStC,eAAsB,qBACpB,aACA,cACA,QACsB;AACtB,MAAI;AACF,WAAO,MAAM,wBAAwB;AAAA,MACnC,OAAO,CAAC,WAAW;AAAA,MACnB,QAAQ;AAAA,MACR,QAAQ,UAAU,sBAAsB,OAAO,YAAY,CAAC;AAAA,IAC9D,CAAC;AAAA,EACH,SAAS,OAAO;AACd,QAAI,iBAAiB,SAAS,MAAM,QAAQ,SAAS,UAAU,GAAG;AAChE,aAAO,MAAM,wBAAwB;AAAA,QACnC,OAAO,CAAC,WAAW;AAAA,QACnB,QAAQ;AAAA,QACR,QAAQ,UAAU,sBAAsB,OAAO,YAAY,CAAC;AAAA,MAC9D,CAAC;AAAA,IACH;AACA,UAAM;AAAA,EACR;AACF;;;ACdA;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAyBA,IAAMA,uBAA2C,CACtD,MACA,MACA,YACA,UAAU,CAAC,MACR;AACH,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAMO,IAAM,mBAAmB;AAAA,EAC9BA;AACF;AACA,IAAO,cAAQ;","names":["useShikiHighlighter"]}
1
+ {"version":3,"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 { useShikiHighlighter as useBaseHook } 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 useBaseHook(\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":";;;;;;;;;AAAA;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AACP,SAAS,6BAA6B;AAStC,eAAsB,qBACpB,aACA,cACA,QACsB;AACtB,QAAM,QAAQ,YAAY;AAAA,IAAO,CAAC,SAChC,mBAAmB,MAAM,gBAAgB;AAAA,EAC3C;AAEA,SAAO,MAAM,wBAAwB;AAAA,IACnC;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ,UAAU,sBAAsB,OAAO,YAAY,CAAC;AAAA,EAC9D,CAAC;AACH;;;ACRA;AAAA,EACE;AAAA,EACA;AAAA,OACK;AA2BA,IAAMA,uBAA2C,CACtD,MACA,MACA,YACA,UAAU,CAAC,MACR;AACH,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAMO,IAAM,mBAAmB;AAAA,EAC9BA;AACF;AACA,IAAO,cAAQ;","names":["useShikiHighlighter"]}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "react-shiki",
3
3
  "description": "Syntax highlighter component for react using shiki",
4
- "version": "0.9.1",
4
+ "version": "0.9.2",
5
5
  "license": "MIT",
6
6
  "author": {
7
7
  "name": "Bassim Shahidy",
@@ -70,21 +70,21 @@
70
70
  "clsx": "^2.1.1",
71
71
  "dequal": "^2.0.3",
72
72
  "hast-util-to-jsx-runtime": "^2.3.6",
73
- "shiki": "^3.11.0",
74
- "unist-util-visit": "^5.0.0"
73
+ "shiki": "^4.0.0",
74
+ "unist-util-visit": "^5.1.0"
75
75
  },
76
76
  "devDependencies": {
77
- "@testing-library/jest-dom": "^6.8.0",
78
- "@testing-library/react": "^16.3.0",
77
+ "@testing-library/jest-dom": "^6.9.1",
78
+ "@testing-library/react": "^16.3.2",
79
79
  "@types/hast": "^3.0.4",
80
- "@types/jest": "^29.5.14",
81
- "@types/node": "22.17.2",
80
+ "@types/jest": "^30.0.0",
81
+ "@types/node": "25.3.3",
82
82
  "@types/react": "^19.1.10",
83
- "@vitejs/plugin-react": "^4.7.0",
84
- "html-react-parser": "^5.2.6",
85
- "jsdom": "^26.1.0",
86
- "tsup": "^8.5.0",
87
- "vitest": "^3.2.4"
83
+ "@vitejs/plugin-react": "^5.1.4",
84
+ "html-react-parser": "^5.2.17",
85
+ "jsdom": "^28.1.0",
86
+ "tsup": "^8.5.1",
87
+ "vitest": "^4.0.18"
88
88
  },
89
89
  "scripts": {
90
90
  "dev": "tsup --watch",
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/lib/hook.ts","../src/lib/utils.ts","../src/lib/resolvers.ts","../src/lib/transformers.ts","../src/lib/plugins.ts","#style-inject:#style-inject","../src/lib/styles.css","../src/lib/component.tsx"],"sourcesContent":["import {\n useEffect,\n useMemo,\n useRef,\n useState,\n type ReactNode,\n} from 'react';\n\nimport { jsx, jsxs, Fragment } from 'react/jsx-runtime';\nimport { toJsxRuntime } from 'hast-util-to-jsx-runtime';\n\nimport type {\n CodeToHastOptions,\n CodeOptionsSingleTheme,\n CodeOptionsMultipleThemes,\n Highlighter,\n HighlighterCore,\n Awaitable,\n RegexEngine,\n BundledTheme,\n} from 'shiki';\n\nimport type { ShikiLanguageRegistration } from './extended-types';\n\nimport type {\n Language,\n Theme,\n HighlighterOptions,\n TimeoutState,\n Themes,\n} from './types';\n\nimport { throttleHighlighting, useStableOptions } from './utils';\nimport { resolveLanguage, resolveTheme } from './resolvers';\nimport { lineNumbersTransformer } from './transformers';\n\nconst DEFAULT_THEMES: Themes = {\n light: 'github-light',\n dark: 'github-dark',\n};\n\n/**\n * Base hook for syntax highlighting using Shiki.\n * This is the core implementation used by all entry points.\n *\n * @param code - The code to highlight\n * @param lang - Language for highlighting\n * @param themeInput - Theme or themes to use\n * @param options - Highlighting options\n * @param highlighterFactory - Factory function to create highlighter (internal use)\n */\nexport const useShikiHighlighter = (\n code: string,\n lang: Language,\n themeInput: Theme | Themes,\n options: HighlighterOptions = {},\n highlighterFactory: (\n langsToLoad: ShikiLanguageRegistration,\n themesToLoad: Theme[],\n engine?: Awaitable<RegexEngine>\n ) => Promise<Highlighter | HighlighterCore>\n) => {\n const [highlightedCode, setHighlightedCode] = useState<\n ReactNode | string | null\n >(null);\n\n // Stabilize options, language and theme inputs to prevent unnecessary\n // re-renders or recalculations when object references change\n const [stableLang, langRev] = useStableOptions(lang);\n const [stableTheme, themeRev] = useStableOptions(themeInput);\n const [stableOpts, optsRev] = useStableOptions(options);\n\n const { languageId, langsToLoad } = useMemo(\n () =>\n resolveLanguage(\n stableLang,\n stableOpts.customLanguages,\n stableOpts.langAlias\n ),\n [stableLang, stableOpts.customLanguages, stableOpts.langAlias]\n );\n\n const { isMultiTheme, themeId, multiTheme, singleTheme, themesToLoad } =\n useMemo(() => resolveTheme(stableTheme), [stableTheme]);\n\n const timeoutControl = useRef<TimeoutState>({\n nextAllowedTime: 0,\n timeoutId: undefined,\n });\n\n const shikiOptions = useMemo<CodeToHastOptions>(() => {\n const languageOption = { lang: languageId };\n const {\n defaultColor,\n cssVariablePrefix,\n showLineNumbers,\n startingLineNumber,\n ...restOptions\n } = stableOpts;\n\n const themeOptions = isMultiTheme\n ? ({\n themes: multiTheme || DEFAULT_THEMES,\n defaultColor,\n cssVariablePrefix,\n } as CodeOptionsMultipleThemes<BundledTheme>)\n : ({\n theme: singleTheme || DEFAULT_THEMES.dark,\n } as CodeOptionsSingleTheme<BundledTheme>);\n\n const transformers = restOptions.transformers || [];\n if (showLineNumbers) {\n transformers.push(lineNumbersTransformer(startingLineNumber));\n }\n\n return {\n ...languageOption,\n ...themeOptions,\n ...restOptions,\n transformers,\n };\n }, [languageId, themeId, langRev, themeRev, optsRev]);\n\n useEffect(() => {\n let isMounted = true;\n\n const highlightCode = async () => {\n if (!languageId) return;\n\n const highlighter = stableOpts.highlighter\n ? stableOpts.highlighter\n : await highlighterFactory(\n langsToLoad as ShikiLanguageRegistration,\n themesToLoad,\n stableOpts.engine\n );\n\n const loadedLanguages = highlighter.getLoadedLanguages();\n const langToUse = loadedLanguages.includes(languageId)\n ? languageId\n : 'plaintext';\n const finalOptions = { ...shikiOptions, lang: langToUse };\n\n if (isMounted) {\n const output =\n stableOpts.outputFormat === 'html'\n ? highlighter.codeToHtml(code, finalOptions)\n : toJsxRuntime(highlighter.codeToHast(code, finalOptions), {\n jsx,\n jsxs,\n Fragment,\n });\n setHighlightedCode(output);\n }\n };\n\n const { delay } = stableOpts;\n\n if (delay) {\n throttleHighlighting(highlightCode, timeoutControl, delay);\n } else {\n highlightCode().catch(console.error);\n }\n\n return () => {\n isMounted = false;\n clearTimeout(timeoutControl.current.timeoutId);\n };\n }, [\n code,\n shikiOptions,\n stableOpts.delay,\n stableOpts.highlighter,\n langsToLoad,\n themesToLoad,\n ]);\n\n return highlightedCode;\n};\n","import { useRef } from 'react';\nimport { dequal } from 'dequal';\n\nimport type { TimeoutState } from './types';\n\n/**\n * Returns a deep-stable reference and a version counter that only changes when content changes.\n * Includes optimizations for primitive values and reference equality.\n */\nexport const useStableOptions = <T>(value: T) => {\n const ref = useRef(value);\n const revision = useRef(0);\n\n // Fast-path for primitive values\n if (typeof value !== 'object' || value === null) {\n if (value !== ref.current) {\n ref.current = value;\n revision.current += 1;\n }\n return [value, revision.current] as const;\n }\n\n // Reference equality check before expensive deep comparison\n if (value !== ref.current) {\n if (!dequal(value, ref.current)) {\n ref.current = value;\n revision.current += 1;\n }\n }\n\n return [ref.current, revision.current] as const;\n};\n\n/**\n * 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 const now = Date.now();\n clearTimeout(timeoutControl.current.timeoutId);\n\n const delay = Math.max(0, timeoutControl.current.nextAllowedTime - now);\n timeoutControl.current.timeoutId = setTimeout(() => {\n performHighlight().catch(console.error);\n timeoutControl.current.nextAllowedTime = now + throttleMs;\n }, delay);\n};\n","import type { Language, Theme, Themes } from './types';\nimport type { ThemeRegistrationAny } from 'shiki/core';\nimport type { LanguageRegistration } from './extended-types';\n\n/**\n * Resolved languages and metadata\n */\ntype LanguageResult = {\n languageId: string;\n displayLanguageId: string | null;\n langsToLoad: Language;\n};\n\n/**\n * Resolves the language input to standardized IDs and objects for Shiki and UI display\n * @param lang The language input from props\n * @param customLanguages An array of custom textmate grammar objects or a single grammar object\n * @returns A LanguageResult object containing:\n * - languageId: The resolved language ID\n * - displayLanguageId: The display language ID\n * - langToLoad: The language object or string id to load\n */\nexport const resolveLanguage = (\n lang: Language,\n customLanguages?: LanguageRegistration | LanguageRegistration[],\n langAliases?: Record<string, string>\n): LanguageResult => {\n const normalizedCustomLangs = customLanguages\n ? Array.isArray(customLanguages)\n ? customLanguages\n : [customLanguages]\n : [];\n\n // Language is null or empty string\n if (lang == null || (typeof lang === 'string' && !lang.trim())) {\n return {\n languageId: 'plaintext',\n displayLanguageId: 'plaintext',\n langsToLoad: undefined,\n };\n }\n\n // Language is custom\n if (typeof lang === 'object') {\n return {\n languageId: lang.name,\n displayLanguageId: lang.name || null,\n langsToLoad: lang,\n };\n }\n\n // Language is string\n const lowerLang = lang.toLowerCase();\n const matches = (str: string | undefined): boolean =>\n str?.toLowerCase() === lowerLang;\n\n // Check if the string identifies a provided custom language\n const customMatch = normalizedCustomLangs.find(\n (cl) =>\n matches(cl.name) ||\n matches(cl.scopeName) ||\n matches(cl.scopeName?.split('.').pop()) ||\n cl.aliases?.some(matches) ||\n cl.fileTypes?.some(matches)\n );\n\n if (customMatch) {\n return {\n languageId: customMatch.name || lang,\n displayLanguageId: lang,\n langsToLoad: customMatch,\n };\n }\n\n // Check if language is aliased\n if (langAliases?.[lang]) {\n return {\n languageId: langAliases[lang],\n displayLanguageId: lang,\n langsToLoad: langAliases[lang],\n };\n }\n\n // For any other string, pass it through,\n // fallback is handled in highlighter factories\n return {\n languageId: lang,\n displayLanguageId: lang,\n langsToLoad: lang,\n };\n};\n\n/**\n * Resolved themes and metadata\n */\ninterface ThemeResult {\n isMultiTheme: boolean;\n themeId: Theme;\n multiTheme?: Themes | ThemeRegistrationAny | null;\n singleTheme?: Theme | undefined;\n themesToLoad: Theme[];\n}\n\n/**\n * Determines theme configuration and returns the resolved theme with metadata\n * @param themeInput - The theme input, either as a string name or theme object\n * @returns Object containing:\n * - isMultiTheme: If theme input is a multi-theme configuration\n * - themeId: Theme reference identifier\n * - multiTheme: The multi-theme config if it exists\n * - singleTheme: The single theme if it exists\n * - themesToLoad: The themes to load when creating the highlighter\n */\nconst isTextmateTheme = (value: unknown): value is ThemeRegistrationAny =>\n typeof value === 'object' &&\n value !== null &&\n 'tokenColors' in value &&\n Array.isArray((value as ThemeRegistrationAny).tokenColors);\n\nexport function resolveTheme(themeInput: Theme | Themes): ThemeResult {\n const inputIsTextmateTheme = isTextmateTheme(themeInput);\n\n // Assume non textmate objects are multi theme configs\n const isMultiThemeConfig =\n typeof themeInput === 'object' &&\n themeInput !== null &&\n !inputIsTextmateTheme;\n\n const validMultiThemeObj =\n typeof themeInput === 'object' &&\n themeInput !== null &&\n !inputIsTextmateTheme &&\n Object.entries(themeInput).some(\n ([key, value]) =>\n key &&\n value &&\n key.trim() !== '' &&\n value !== '' &&\n (typeof value === 'string' || isTextmateTheme(value))\n );\n\n if (isMultiThemeConfig) {\n const themeId = validMultiThemeObj\n ? `multi-${Object.values(themeInput)\n .map(\n (theme) =>\n (typeof theme === 'string'\n ? theme\n : (theme as { name?: string })?.name) || 'custom'\n )\n .sort()\n .join('-')}`\n : 'multi-default';\n\n // If config is invalid, return null to handle fallback in `buildShikiOptions()`\n return {\n isMultiTheme: true,\n themeId,\n multiTheme: validMultiThemeObj ? themeInput : null,\n themesToLoad: validMultiThemeObj ? Object.values(themeInput) : [],\n };\n }\n\n return {\n isMultiTheme: false,\n themeId:\n typeof themeInput === 'string'\n ? themeInput\n : themeInput?.name || 'custom',\n singleTheme: themeInput,\n themesToLoad: [themeInput],\n };\n}\n","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, '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, 'line-numbers');\n return node;\n },\n };\n}\n","import { visit } from 'unist-util-visit';\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: any): undefined => {\n visit(tree, 'element', (node: Element, _index, parent: Element) => {\n if (node.tagName === 'code' && parent.tagName !== 'pre') {\n node.properties.inline = true;\n }\n });\n };\n}\n\n/**\n * Function to determine if code is inline based on the presence of line breaks\n *\n * @example\n * const isInline = node && isInlineCode(node: Element)\n */\nexport const isInlineCode = (node: Element): boolean => {\n const textContent = (node.children || [])\n .filter((child) => child.type === 'text')\n .map((child) => child.value)\n .join('');\n\n return !textContent.includes('\\n');\n};\n","\n export default function styleInject(css, { insertAt } = {}) {\n if (!css || typeof document === 'undefined') return\n \n const head = document.head || document.getElementsByTagName('head')[0]\n const style = document.createElement('style')\n style.type = 'text/css'\n \n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild)\n } else {\n head.appendChild(style)\n }\n } else {\n head.appendChild(style)\n }\n \n if (style.styleSheet) {\n style.styleSheet.cssText = css\n } else {\n style.appendChild(document.createTextNode(css))\n }\n }\n ","import styleInject from '#style-inject';styleInject(\".relative {\\n position: relative;\\n}\\n.defaultStyles pre {\\n overflow: auto;\\n border-radius: 0.5rem;\\n padding-left: 1.5rem;\\n padding-right: 1.5rem;\\n padding-top: 1.25rem;\\n padding-bottom: 1.25rem;\\n}\\n.languageLabel {\\n position: absolute;\\n right: 0.75rem;\\n top: 0.5rem;\\n font-family: monospace;\\n font-size: 0.75rem;\\n letter-spacing: -0.05em;\\n color: rgba(107, 114, 128, 0.85);\\n}\\n.line-numbers::before {\\n counter-increment: line-number;\\n content: counter(line-number);\\n display: inline-flex;\\n justify-content: flex-end;\\n align-items: flex-start;\\n box-sizing: content-box;\\n min-width: var(--line-numbers-width, 2ch);\\n padding-left: var(--line-numbers-padding-left, 2ch);\\n padding-right: var(--line-numbers-padding-right, 2ch);\\n color: var(--line-numbers-foreground, rgba(107, 114, 128, 0.6));\\n font-size: var(--line-numbers-font-size, inherit);\\n font-weight: var(--line-numbers-font-weight, inherit);\\n line-height: var(--line-numbers-line-height, inherit);\\n font-family: var(--line-numbers-font-family, inherit);\\n opacity: var(--line-numbers-opacity, 1);\\n user-select: none;\\n pointer-events: none;\\n}\\n.has-line-numbers {\\n counter-reset: line-number calc(var(--line-start, 1) - 1);\\n --line-numbers-foreground: rgba(107, 114, 128, 0.5);\\n --line-numbers-width: 2ch;\\n --line-numbers-padding-left: 0ch;\\n --line-numbers-padding-right: 2ch;\\n --line-numbers-font-size: inherit;\\n --line-numbers-font-weight: inherit;\\n --line-numbers-line-height: inherit;\\n --line-numbers-font-family: inherit;\\n --line-numbers-opacity: 1;\\n}\\n\")","import './styles.css';\nimport { clsx } from 'clsx';\nimport { resolveLanguage } from './resolvers';\n\nimport type {\n HighlighterOptions,\n Language,\n Theme,\n Themes,\n 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 'pre'\n */\n as?: React.ElementType;\n}\n\n/**\n * Base ShikiHighlighter component factory.\n * This creates a component that uses the provided hook implementation.\n */\nexport const createShikiHighlighterComponent = (\n useShikiHighlighterImpl: 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 = 'pre',\n customLanguages,\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 showLineNumbers,\n defaultColor,\n cssVariablePrefix,\n startingLineNumber,\n ...shikiOptions,\n };\n\n // Use resolveLanguage to get displayLanguageId directly\n const { displayLanguageId } = resolveLanguage(\n language,\n customLanguages\n );\n\n const highlightedCode = useShikiHighlighterImpl(\n code,\n language,\n theme,\n options\n );\n\n const isHtmlOutput = typeof highlightedCode === 'string';\n\n return (\n <Element\n ref={ref}\n data-testid=\"shiki-container\"\n className={clsx(\n 'relative',\n 'not-prose',\n addDefaultStyles && 'defaultStyles',\n className\n )}\n style={style}\n id=\"shiki-container\"\n >\n {showLanguage && displayLanguageId ? (\n <span\n className={clsx('languageLabel', langClassName)}\n style={langStyle}\n id=\"language-label\"\n >\n {displayLanguageId}\n </span>\n ) : null}\n {isHtmlOutput ? (\n <div dangerouslySetInnerHTML={{ __html: highlightedCode }} />\n ) : (\n highlightedCode\n )}\n </Element>\n );\n }\n );\n};\n"],"mappings":"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","names":["useRef","useRef","jsx","jsxs"]}