react-shiki 0.11.1 → 0.11.3

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.
@@ -1,558 +0,0 @@
1
- import { ReactElement } from "react";
2
- import { Awaitable, BundledHighlighterOptions, BundledLanguage, BundledTheme, CodeOptionsMultipleThemes, CodeToHastOptions, Highlighter, HighlighterCore, LanguageInput, LanguageRegistration, RegexEngine, SpecialLanguage, StringLiteralUnion, ThemeRegistrationAny, TokensResult } from "shiki";
3
- //#region ../node_modules/.pnpm/@types+unist@3.0.3/node_modules/@types/unist/index.d.ts
4
- // ## Interfaces
5
- /**
6
- * Info associated with nodes by the ecosystem.
7
- *
8
- * This space is guaranteed to never be specified by unist or specifications
9
- * implementing unist.
10
- * But you can use it in utilities and plugins to store data.
11
- *
12
- * This type can be augmented to register custom data.
13
- * For example:
14
- *
15
- * ```ts
16
- * declare module 'unist' {
17
- * interface Data {
18
- * // `someNode.data.myId` is typed as `number | undefined`
19
- * myId?: number | undefined
20
- * }
21
- * }
22
- * ```
23
- */
24
- interface Data$1 {}
25
- /**
26
- * One place in a source file.
27
- */
28
- interface Point {
29
- /**
30
- * Line in a source file (1-indexed integer).
31
- */
32
- line: number;
33
- /**
34
- * Column in a source file (1-indexed integer).
35
- */
36
- column: number;
37
- /**
38
- * Character in a source file (0-indexed integer).
39
- */
40
- offset?: number | undefined;
41
- }
42
- /**
43
- * Position of a node in a source document.
44
- *
45
- * A position is a range between two points.
46
- */
47
- interface Position {
48
- /**
49
- * Place of the first character of the parsed source region.
50
- */
51
- start: Point;
52
- /**
53
- * Place of the first character after the parsed source region.
54
- */
55
- end: Point;
56
- }
57
- /**
58
- * Abstract unist node.
59
- *
60
- * The syntactic unit in unist syntax trees are called nodes.
61
- *
62
- * This interface is supposed to be extended.
63
- * If you can use {@link Literal} or {@link Parent}, you should.
64
- * But for example in markdown, a `thematicBreak` (`***`), is neither literal
65
- * nor parent, but still a node.
66
- */
67
- interface Node$1 {
68
- /**
69
- * Node type.
70
- */
71
- type: string;
72
- /**
73
- * Info from the ecosystem.
74
- */
75
- data?: Data$1 | undefined;
76
- /**
77
- * Position of a node in a source document.
78
- *
79
- * Nodes that are generated (not in the original source document) must not
80
- * have a position.
81
- */
82
- position?: Position | undefined;
83
- }
84
- //#endregion
85
- //#region ../node_modules/.pnpm/@types+hast@3.0.4/node_modules/@types/hast/index.d.ts
86
- // ## Interfaces
87
- /**
88
- * Info associated with hast nodes by the ecosystem.
89
- *
90
- * This space is guaranteed to never be specified by unist or hast.
91
- * But you can use it in utilities and plugins to store data.
92
- *
93
- * This type can be augmented to register custom data.
94
- * For example:
95
- *
96
- * ```ts
97
- * declare module 'hast' {
98
- * interface Data {
99
- * // `someNode.data.myId` is typed as `number | undefined`
100
- * myId?: number | undefined
101
- * }
102
- * }
103
- * ```
104
- */
105
- interface Data extends Data$1 {}
106
- /**
107
- * Info associated with an element.
108
- */
109
- interface Properties {
110
- [PropertyName: string]: boolean | number | string | null | undefined | Array<string | number>;
111
- }
112
- // ## Content maps
113
- /**
114
- * Union of registered hast nodes that can occur in {@link Element}.
115
- *
116
- * To register mote custom hast nodes, add them to {@link ElementContentMap}.
117
- * They will be automatically added here.
118
- */
119
- type ElementContent = ElementContentMap[keyof ElementContentMap];
120
- /**
121
- * Registry of all hast nodes that can occur as children of {@link Element}.
122
- *
123
- * For a union of all {@link Element} children, see {@link ElementContent}.
124
- */
125
- interface ElementContentMap {
126
- comment: Comment;
127
- element: Element$1;
128
- text: Text;
129
- }
130
- /**
131
- * Union of registered hast nodes that can occur in {@link Root}.
132
- *
133
- * To register custom hast nodes, add them to {@link RootContentMap}.
134
- * They will be automatically added here.
135
- */
136
- type RootContent = RootContentMap[keyof RootContentMap];
137
- /**
138
- * Registry of all hast nodes that can occur as children of {@link Root}.
139
- *
140
- * > 👉 **Note**: {@link Root} does not need to be an entire document.
141
- * > it can also be a fragment.
142
- *
143
- * For a union of all {@link Root} children, see {@link RootContent}.
144
- */
145
- interface RootContentMap {
146
- comment: Comment;
147
- doctype: Doctype;
148
- element: Element$1;
149
- text: Text;
150
- }
151
- // ## Abstract nodes
152
- /**
153
- * Abstract hast node.
154
- *
155
- * This interface is supposed to be extended.
156
- * If you can use {@link Literal} or {@link Parent}, you should.
157
- * But for example in HTML, a `Doctype` is neither literal nor parent, but
158
- * still a node.
159
- *
160
- * To register custom hast nodes, add them to {@link RootContentMap} and other
161
- * places where relevant (such as {@link ElementContentMap}).
162
- *
163
- * For a union of all registered hast nodes, see {@link Nodes}.
164
- */
165
- interface Node extends Node$1 {
166
- /**
167
- * Info from the ecosystem.
168
- */
169
- data?: Data | undefined;
170
- }
171
- /**
172
- * Abstract hast node that contains the smallest possible value.
173
- *
174
- * This interface is supposed to be extended if you make custom hast nodes.
175
- *
176
- * For a union of all registered hast literals, see {@link Literals}.
177
- */
178
- interface Literal extends Node {
179
- /**
180
- * Plain-text value.
181
- */
182
- value: string;
183
- }
184
- /**
185
- * Abstract hast node that contains other hast nodes (*children*).
186
- *
187
- * This interface is supposed to be extended if you make custom hast nodes.
188
- *
189
- * For a union of all registered hast parents, see {@link Parents}.
190
- */
191
- interface Parent extends Node {
192
- /**
193
- * List of children.
194
- */
195
- children: RootContent[];
196
- }
197
- // ## Concrete nodes
198
- /**
199
- * HTML comment.
200
- */
201
- interface Comment extends Literal {
202
- /**
203
- * Node type of HTML comments in hast.
204
- */
205
- type: "comment";
206
- /**
207
- * Data associated with the comment.
208
- */
209
- data?: CommentData | undefined;
210
- }
211
- /**
212
- * Info associated with hast comments by the ecosystem.
213
- */
214
- interface CommentData extends Data {}
215
- /**
216
- * HTML document type.
217
- */
218
- interface Doctype extends Node$1 {
219
- /**
220
- * Node type of HTML document types in hast.
221
- */
222
- type: "doctype";
223
- /**
224
- * Data associated with the doctype.
225
- */
226
- data?: DoctypeData | undefined;
227
- }
228
- /**
229
- * Info associated with hast doctypes by the ecosystem.
230
- */
231
- interface DoctypeData extends Data {}
232
- /**
233
- * HTML element.
234
- */
235
- interface Element$1 extends Parent {
236
- /**
237
- * Node type of elements.
238
- */
239
- type: "element";
240
- /**
241
- * Tag name (such as `'body'`) of the element.
242
- */
243
- tagName: string;
244
- /**
245
- * Info associated with the element.
246
- */
247
- properties: Properties;
248
- /**
249
- * Children of element.
250
- */
251
- children: ElementContent[];
252
- /**
253
- * When the `tagName` field is `'template'`, a `content` field can be
254
- * present.
255
- */
256
- content?: Root | undefined;
257
- /**
258
- * Data associated with the element.
259
- */
260
- data?: ElementData | undefined;
261
- }
262
- /**
263
- * Info associated with hast elements by the ecosystem.
264
- */
265
- interface ElementData extends Data {}
266
- /**
267
- * Document fragment or a whole document.
268
- *
269
- * Should be used as the root of a tree and must not be used as a child.
270
- *
271
- * Can also be used as the value for the content field on a `'template'` element.
272
- */
273
- interface Root extends Parent {
274
- /**
275
- * Node type of hast root.
276
- */
277
- type: "root";
278
- /**
279
- * Children of root.
280
- */
281
- children: RootContent[];
282
- /**
283
- * Data associated with the hast root.
284
- */
285
- data?: RootData | undefined;
286
- }
287
- /**
288
- * Info associated with hast root nodes by the ecosystem.
289
- */
290
- interface RootData extends Data {}
291
- /**
292
- * HTML character data (plain text).
293
- */
294
- interface Text extends Literal {
295
- /**
296
- * Node type of HTML character data (plain text) in hast.
297
- */
298
- type: "text";
299
- /**
300
- * Data associated with the text.
301
- */
302
- data?: TextData | undefined;
303
- }
304
- /**
305
- * Info associated with hast texts by the ecosystem.
306
- */
307
- interface TextData extends Data {}
308
- //#endregion
309
- //#region src/lib/types.d.ts
310
- /**
311
- * HTML Element, use to type `node` from react-markdown
312
- */
313
- type Element = Element$1;
314
- /**
315
- * A Shiki BundledLanguage or a custom textmate grammar object
316
- * @see https://shiki.style/languages
317
- */
318
- type Language = LanguageRegistration | StringLiteralUnion<BundledLanguage> | SpecialLanguage | undefined;
319
- /**
320
- * A `preloadLanguages` entry: a bundled language id, a custom grammar
321
- * object, or a dynamic grammar import (shiki's `LanguageInput`), e.g.
322
- * `() => import('../langs/mcfunction.json')`
323
- */
324
- type PreloadLanguage = Language | LanguageInput;
325
- type MultiThemeKey = 'dark' | 'light' | (string & {});
326
- /**
327
- * A Shiki BundledTheme or a custom textmate theme object
328
- * @see https://shiki.style/themes
329
- */
330
- type Theme = ThemeRegistrationAny | StringLiteralUnion<BundledTheme>;
331
- /**
332
- * A map of color names to themes.
333
- * This allows you to specify multiple themes for the generated code.
334
- * Supports custom textmate theme objects in addition to Shiki's bundled themes
335
- *
336
- * @example
337
- * ```ts
338
- * useShikiHighlighter(code, language, {
339
- * light: 'github-light',
340
- * dark: 'github-dark',
341
- * dim: 'github-dark-dimmed'
342
- * })
343
- * ```
344
- *
345
- * @see https://shiki.style/guide/dual-themes
346
- */
347
- type Themes = { [Key in MultiThemeKey]: Theme; };
348
- /**
349
- * Named RegExp engines that react-shiki creates and caches internally.
350
- */
351
- type EngineName = 'javascript' | 'oniguruma';
352
- /**
353
- * Configuration options specific to react-shiki
354
- */
355
- interface ReactShikiOptions {
356
- /**
357
- * Minimum time (in milliseconds) between highlight operations.
358
- * @default undefined (no throttling)
359
- */
360
- delay?: number;
361
- /**
362
- * RegExp engine for syntax highlighting.
363
- * - 'oniguruma': compiled WebAssembly engine, maximum grammar support
364
- * - 'javascript': pure-JS engine, no WASM fetch, faster startup
365
- *
366
- * Named engines are created lazily and cached by react-shiki, so they
367
- * are safe to pass inline. A custom engine instance is also accepted;
368
- * create it once at module scope, as a new instance on every render
369
- * re-triggers highlighting.
370
- * @default 'oniguruma'
371
- */
372
- engine?: EngineName | Awaitable<RegexEngine>;
373
- /**
374
- * Custom textmate grammars to be preloaded for highlighting.
375
- * @deprecated Use preloadLanguages instead.
376
- */
377
- customLanguages?: LanguageRegistration | LanguageRegistration[];
378
- /**
379
- * Preload custom grammars or bundled languages.
380
- * Supports custom textmate grammars, replaces deprecated `customLanguages`
381
- *
382
- * Full/web bundles also accept dynamic grammar imports, keeping custom
383
- * grammars out of the main bundle. Define them at module scope, preferring
384
- * getters: a fresh getter each render re-triggers highlighting, while
385
- * swapping a bare promise at runtime is not detected.
386
- *
387
- * @example
388
- * const preload = [() => import('../langs/mcfunction.json')];
389
- */
390
- preloadLanguages?: PreloadLanguage | PreloadLanguage[];
391
- /**
392
- * Output format for the highlighted code.
393
- * - 'react': Returns React nodes (default, safer)
394
- * - 'html': Returns HTML string (rendered via dangerouslySetInnerHTML)
395
- *
396
- * The hook additionally accepts 'tokens' (experimental) to return raw
397
- * Shiki tokens for custom rendering. It is deliberately excluded here
398
- * and only enters through the hook's generic signature, so option
399
- * objects typed with this interface keep the classic return type.
400
- * @default 'react'
401
- */
402
- outputFormat?: 'react' | 'html';
403
- /**
404
- * Custom Shiki highlighter instance to use instead of the default one.
405
- * Keeps bundle small by only importing specified languages/themes.
406
- * Can be either a Highlighter or HighlighterCore instance.
407
- *
408
- * @example
409
- * import {
410
- * createHighlighterCore,
411
- * createOnigurumaEngine,
412
- * useShikiHighlighter
413
- * } from "react-shiki";
414
- *
415
- * const customHighlighter = await createHighlighterCore({
416
- * themes: [
417
- * import('@shikijs/themes/nord')
418
- * ],
419
- * langs: [
420
- * import('@shikijs/langs/javascript'),
421
- * import('@shikijs/langs/typescript')
422
- * ],
423
- * engine: createOnigurumaEngine(import('shiki/wasm'))
424
- * });
425
- *
426
- * const highlightedCode = useShikiHighlighter(code, language, theme, {
427
- * highlighter: customHighlighter,
428
- * });
429
- */
430
- highlighter?: Highlighter | HighlighterCore;
431
- /**
432
- * Whether to show line numbers
433
- * @default false
434
- */
435
- showLineNumbers?: boolean;
436
- /**
437
- * Starting line number (when showLineNumbers is true)
438
- * @default 1
439
- */
440
- startingLineNumber?: number;
441
- /**
442
- * Displayed line numbers to highlight
443
- */
444
- highlightLineNumbers?: number[];
445
- }
446
- /**
447
- * Configuration options for the syntax highlighter
448
- * Extends CodeToHastOptions to allow passing any Shiki options directly
449
- */
450
- interface HighlighterOptions extends ReactShikiOptions, Pick<CodeOptionsMultipleThemes<BundledTheme>, 'defaultColor' | 'cssVariablePrefix'>, Omit<CodeToHastOptions, 'lang' | 'theme' | 'themes'>, Pick<BundledHighlighterOptions<string, string>, 'langAlias'> {}
451
- /**
452
- * Supported output formats and their corresponding result shapes.
453
- */
454
- type OutputFormat = 'react' | 'html' | 'tokens';
455
- interface HighlightResultMap {
456
- react: ReactElement;
457
- html: string;
458
- tokens: TokensResult;
459
- }
460
- type HighlightResult<F extends OutputFormat = 'react'> = HighlightResultMap[F] | null;
461
- /**
462
- * Per-call options shape: every highlighter option except `outputFormat`,
463
- * plus a narrowed `outputFormat?: F` so the return type can be inferred
464
- * from the format the caller actually passes.
465
- *
466
- * This is the only place 'tokens' is accepted. Keeping it out of
467
- * `HighlighterOptions` means values typed with that interface infer
468
- * `F = 'react' | 'html'` and keep their pre-tokens return type.
469
- */
470
- type HighlighterOptionsFor<F extends OutputFormat> = Omit<HighlighterOptions, 'outputFormat'> & {
471
- outputFormat?: F;
472
- };
473
- type UseShikiHighlighter = <F extends OutputFormat = 'react'>(code: string, lang: Language, themeInput: Theme | Themes, options?: HighlighterOptionsFor<F>) => HighlightResult<F>;
474
- //#endregion
475
- //#region src/lib/plugins.d.ts
476
- /**
477
- * Rehype plugin to add an 'inline' property to <code> elements
478
- * Sets 'inline' property to true if the <code> is not within a <pre> tag
479
- *
480
- * Pass this plugin to the `rehypePlugins` prop of react-markdown
481
- * You can then access `inline` as a prop in components passed to react-markdown
482
- *
483
- * @example
484
- * <ReactMarkdown rehypePlugins={[rehypeInlineCodeProperty]} />
485
- */
486
- declare function rehypeInlineCodeProperty(): (tree: Root) => undefined;
487
- /**
488
- * Function to determine if code is inline based on the presence of line breaks
489
- *
490
- * @example
491
- * const isInline = node && isInlineCode(node: Element)
492
- */
493
- declare const isInlineCode: (node: Element) => boolean;
494
- //#endregion
495
- //#region src/lib/component.d.ts
496
- /**
497
- * Props for the ShikiHighlighter component
498
- */
499
- interface ShikiHighlighterProps extends HighlighterOptions {
500
- /**
501
- * The programming language for syntax highlighting
502
- * Supports custom textmate grammar objects in addition to Shiki's bundled languages
503
- * @see https://shiki.style/languages
504
- */
505
- language: Language;
506
- /**
507
- * The code to be highlighted
508
- */
509
- children: string;
510
- /**
511
- * The color theme or themes for syntax highlighting
512
- * Supports single, dual, or multiple themes
513
- * Supports custom textmate theme objects in addition to Shiki's bundled themes
514
- *
515
- * @example
516
- * theme='github-dark' // single theme
517
- * theme={{ light: 'github-light', dark: 'github-dark' }} // multi-theme
518
- *
519
- * @see https://shiki.style/themes
520
- */
521
- theme: Theme | Themes;
522
- /**
523
- * Controls the application of default styles to the generated code blocks
524
- *
525
- * Default styles include padding, overflow handling, border radius, language label styling, and font settings
526
- * @default true
527
- */
528
- addDefaultStyles?: boolean;
529
- /**
530
- * Add custom inline styles to the generated code block
531
- */
532
- style?: React.CSSProperties;
533
- /**
534
- * Add custom inline styles to the language label
535
- */
536
- langStyle?: React.CSSProperties;
537
- /**
538
- * Add custom CSS class names to the generated code block
539
- */
540
- className?: string;
541
- /**
542
- * Add custom CSS class names to the language label
543
- */
544
- langClassName?: string;
545
- /**
546
- * Whether to show the language label
547
- * @default true
548
- */
549
- showLanguage?: boolean;
550
- /**
551
- * The HTML element that wraps the generated code block.
552
- * @default 'div'
553
- */
554
- as?: React.ElementType;
555
- }
556
- //#endregion
557
- export { EngineName as a, HighlighterOptionsFor as c, PreloadLanguage as d, Theme as f, Element as i, Language as l, UseShikiHighlighter as m, isInlineCode as n, HighlightResult as o, Themes as p, rehypeInlineCodeProperty as r, HighlighterOptions as s, ShikiHighlighterProps as t, OutputFormat as u };
558
- //# sourceMappingURL=component-DlK6KonE.d.mts.map