react-shiki 0.11.0 → 0.11.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 +228 -111
- package/dist/{component-DdW14SOw.mjs → component-Cf8Topxy.mjs} +118 -78
- package/dist/component-Cf8Topxy.mjs.map +1 -0
- package/dist/component-DRPT3D6t.d.mts +1200 -0
- package/dist/core.d.mts +4 -5
- package/dist/core.mjs +2 -2
- package/dist/core.mjs.map +1 -1
- package/dist/factory-DySLHBEo.mjs +17 -0
- package/dist/factory-DySLHBEo.mjs.map +1 -0
- package/dist/index.d.mts +4 -5
- package/dist/index.mjs +6 -12
- package/dist/index.mjs.map +1 -1
- package/dist/style.css +1 -68
- package/dist/web.d.mts +4 -5
- package/dist/web.mjs +7 -13
- package/dist/web.mjs.map +1 -1
- package/package.json +24 -20
- package/dist/component-B-gutZRK.d.mts +0 -546
- package/dist/component-DdW14SOw.mjs.map +0 -1
- package/src/styles/features.css +0 -54
|
@@ -1,546 +0,0 @@
|
|
|
1
|
-
import { ReactElement } from "react";
|
|
2
|
-
import { BundledHighlighterOptions, BundledLanguage, BundledTheme, CodeOptionsMultipleThemes, CodeToHastOptions, Highlighter, HighlighterCore, LanguageRegistration, SpecialLanguage, StringLiteralUnion, ThemeRegistrationAny, TokensResult } from "shiki";
|
|
3
|
-
|
|
4
|
-
//#region ../node_modules/.pnpm/@types+unist@3.0.3/node_modules/@types/unist/index.d.ts
|
|
5
|
-
// ## Interfaces
|
|
6
|
-
/**
|
|
7
|
-
* Info associated with nodes by the ecosystem.
|
|
8
|
-
*
|
|
9
|
-
* This space is guaranteed to never be specified by unist or specifications
|
|
10
|
-
* implementing unist.
|
|
11
|
-
* But you can use it in utilities and plugins to store data.
|
|
12
|
-
*
|
|
13
|
-
* This type can be augmented to register custom data.
|
|
14
|
-
* For example:
|
|
15
|
-
*
|
|
16
|
-
* ```ts
|
|
17
|
-
* declare module 'unist' {
|
|
18
|
-
* interface Data {
|
|
19
|
-
* // `someNode.data.myId` is typed as `number | undefined`
|
|
20
|
-
* myId?: number | undefined
|
|
21
|
-
* }
|
|
22
|
-
* }
|
|
23
|
-
* ```
|
|
24
|
-
*/
|
|
25
|
-
interface Data$1 {}
|
|
26
|
-
/**
|
|
27
|
-
* One place in a source file.
|
|
28
|
-
*/
|
|
29
|
-
interface Point {
|
|
30
|
-
/**
|
|
31
|
-
* Line in a source file (1-indexed integer).
|
|
32
|
-
*/
|
|
33
|
-
line: number;
|
|
34
|
-
/**
|
|
35
|
-
* Column in a source file (1-indexed integer).
|
|
36
|
-
*/
|
|
37
|
-
column: number;
|
|
38
|
-
/**
|
|
39
|
-
* Character in a source file (0-indexed integer).
|
|
40
|
-
*/
|
|
41
|
-
offset?: number | undefined;
|
|
42
|
-
}
|
|
43
|
-
/**
|
|
44
|
-
* Position of a node in a source document.
|
|
45
|
-
*
|
|
46
|
-
* A position is a range between two points.
|
|
47
|
-
*/
|
|
48
|
-
interface Position {
|
|
49
|
-
/**
|
|
50
|
-
* Place of the first character of the parsed source region.
|
|
51
|
-
*/
|
|
52
|
-
start: Point;
|
|
53
|
-
/**
|
|
54
|
-
* Place of the first character after the parsed source region.
|
|
55
|
-
*/
|
|
56
|
-
end: Point;
|
|
57
|
-
}
|
|
58
|
-
/**
|
|
59
|
-
* Abstract unist node.
|
|
60
|
-
*
|
|
61
|
-
* The syntactic unit in unist syntax trees are called nodes.
|
|
62
|
-
*
|
|
63
|
-
* This interface is supposed to be extended.
|
|
64
|
-
* If you can use {@link Literal} or {@link Parent}, you should.
|
|
65
|
-
* But for example in markdown, a `thematicBreak` (`***`), is neither literal
|
|
66
|
-
* nor parent, but still a node.
|
|
67
|
-
*/
|
|
68
|
-
interface Node$1 {
|
|
69
|
-
/**
|
|
70
|
-
* Node type.
|
|
71
|
-
*/
|
|
72
|
-
type: string;
|
|
73
|
-
/**
|
|
74
|
-
* Info from the ecosystem.
|
|
75
|
-
*/
|
|
76
|
-
data?: Data$1 | undefined;
|
|
77
|
-
/**
|
|
78
|
-
* Position of a node in a source document.
|
|
79
|
-
*
|
|
80
|
-
* Nodes that are generated (not in the original source document) must not
|
|
81
|
-
* have a position.
|
|
82
|
-
*/
|
|
83
|
-
position?: Position | undefined;
|
|
84
|
-
}
|
|
85
|
-
//#endregion
|
|
86
|
-
//#region ../node_modules/.pnpm/@types+hast@3.0.4/node_modules/@types/hast/index.d.ts
|
|
87
|
-
// ## Interfaces
|
|
88
|
-
/**
|
|
89
|
-
* Info associated with hast nodes by the ecosystem.
|
|
90
|
-
*
|
|
91
|
-
* This space is guaranteed to never be specified by unist or hast.
|
|
92
|
-
* But you can use it in utilities and plugins to store data.
|
|
93
|
-
*
|
|
94
|
-
* This type can be augmented to register custom data.
|
|
95
|
-
* For example:
|
|
96
|
-
*
|
|
97
|
-
* ```ts
|
|
98
|
-
* declare module 'hast' {
|
|
99
|
-
* interface Data {
|
|
100
|
-
* // `someNode.data.myId` is typed as `number | undefined`
|
|
101
|
-
* myId?: number | undefined
|
|
102
|
-
* }
|
|
103
|
-
* }
|
|
104
|
-
* ```
|
|
105
|
-
*/
|
|
106
|
-
interface Data extends Data$1 {}
|
|
107
|
-
/**
|
|
108
|
-
* Info associated with an element.
|
|
109
|
-
*/
|
|
110
|
-
interface Properties {
|
|
111
|
-
[PropertyName: string]: boolean | number | string | null | undefined | Array<string | number>;
|
|
112
|
-
}
|
|
113
|
-
// ## Content maps
|
|
114
|
-
/**
|
|
115
|
-
* Union of registered hast nodes that can occur in {@link Element}.
|
|
116
|
-
*
|
|
117
|
-
* To register mote custom hast nodes, add them to {@link ElementContentMap}.
|
|
118
|
-
* They will be automatically added here.
|
|
119
|
-
*/
|
|
120
|
-
type ElementContent = ElementContentMap[keyof ElementContentMap];
|
|
121
|
-
/**
|
|
122
|
-
* Registry of all hast nodes that can occur as children of {@link Element}.
|
|
123
|
-
*
|
|
124
|
-
* For a union of all {@link Element} children, see {@link ElementContent}.
|
|
125
|
-
*/
|
|
126
|
-
interface ElementContentMap {
|
|
127
|
-
comment: Comment;
|
|
128
|
-
element: Element$1;
|
|
129
|
-
text: Text;
|
|
130
|
-
}
|
|
131
|
-
/**
|
|
132
|
-
* Union of registered hast nodes that can occur in {@link Root}.
|
|
133
|
-
*
|
|
134
|
-
* To register custom hast nodes, add them to {@link RootContentMap}.
|
|
135
|
-
* They will be automatically added here.
|
|
136
|
-
*/
|
|
137
|
-
type RootContent = RootContentMap[keyof RootContentMap];
|
|
138
|
-
/**
|
|
139
|
-
* Registry of all hast nodes that can occur as children of {@link Root}.
|
|
140
|
-
*
|
|
141
|
-
* > 👉 **Note**: {@link Root} does not need to be an entire document.
|
|
142
|
-
* > it can also be a fragment.
|
|
143
|
-
*
|
|
144
|
-
* For a union of all {@link Root} children, see {@link RootContent}.
|
|
145
|
-
*/
|
|
146
|
-
interface RootContentMap {
|
|
147
|
-
comment: Comment;
|
|
148
|
-
doctype: Doctype;
|
|
149
|
-
element: Element$1;
|
|
150
|
-
text: Text;
|
|
151
|
-
}
|
|
152
|
-
// ## Abstract nodes
|
|
153
|
-
/**
|
|
154
|
-
* Abstract hast node.
|
|
155
|
-
*
|
|
156
|
-
* This interface is supposed to be extended.
|
|
157
|
-
* If you can use {@link Literal} or {@link Parent}, you should.
|
|
158
|
-
* But for example in HTML, a `Doctype` is neither literal nor parent, but
|
|
159
|
-
* still a node.
|
|
160
|
-
*
|
|
161
|
-
* To register custom hast nodes, add them to {@link RootContentMap} and other
|
|
162
|
-
* places where relevant (such as {@link ElementContentMap}).
|
|
163
|
-
*
|
|
164
|
-
* For a union of all registered hast nodes, see {@link Nodes}.
|
|
165
|
-
*/
|
|
166
|
-
interface Node extends Node$1 {
|
|
167
|
-
/**
|
|
168
|
-
* Info from the ecosystem.
|
|
169
|
-
*/
|
|
170
|
-
data?: Data | undefined;
|
|
171
|
-
}
|
|
172
|
-
/**
|
|
173
|
-
* Abstract hast node that contains the smallest possible value.
|
|
174
|
-
*
|
|
175
|
-
* This interface is supposed to be extended if you make custom hast nodes.
|
|
176
|
-
*
|
|
177
|
-
* For a union of all registered hast literals, see {@link Literals}.
|
|
178
|
-
*/
|
|
179
|
-
interface Literal extends Node {
|
|
180
|
-
/**
|
|
181
|
-
* Plain-text value.
|
|
182
|
-
*/
|
|
183
|
-
value: string;
|
|
184
|
-
}
|
|
185
|
-
/**
|
|
186
|
-
* Abstract hast node that contains other hast nodes (*children*).
|
|
187
|
-
*
|
|
188
|
-
* This interface is supposed to be extended if you make custom hast nodes.
|
|
189
|
-
*
|
|
190
|
-
* For a union of all registered hast parents, see {@link Parents}.
|
|
191
|
-
*/
|
|
192
|
-
interface Parent extends Node {
|
|
193
|
-
/**
|
|
194
|
-
* List of children.
|
|
195
|
-
*/
|
|
196
|
-
children: RootContent[];
|
|
197
|
-
}
|
|
198
|
-
// ## Concrete nodes
|
|
199
|
-
/**
|
|
200
|
-
* HTML comment.
|
|
201
|
-
*/
|
|
202
|
-
interface Comment extends Literal {
|
|
203
|
-
/**
|
|
204
|
-
* Node type of HTML comments in hast.
|
|
205
|
-
*/
|
|
206
|
-
type: "comment";
|
|
207
|
-
/**
|
|
208
|
-
* Data associated with the comment.
|
|
209
|
-
*/
|
|
210
|
-
data?: CommentData | undefined;
|
|
211
|
-
}
|
|
212
|
-
/**
|
|
213
|
-
* Info associated with hast comments by the ecosystem.
|
|
214
|
-
*/
|
|
215
|
-
interface CommentData extends Data {}
|
|
216
|
-
/**
|
|
217
|
-
* HTML document type.
|
|
218
|
-
*/
|
|
219
|
-
interface Doctype extends Node$1 {
|
|
220
|
-
/**
|
|
221
|
-
* Node type of HTML document types in hast.
|
|
222
|
-
*/
|
|
223
|
-
type: "doctype";
|
|
224
|
-
/**
|
|
225
|
-
* Data associated with the doctype.
|
|
226
|
-
*/
|
|
227
|
-
data?: DoctypeData | undefined;
|
|
228
|
-
}
|
|
229
|
-
/**
|
|
230
|
-
* Info associated with hast doctypes by the ecosystem.
|
|
231
|
-
*/
|
|
232
|
-
interface DoctypeData extends Data {}
|
|
233
|
-
/**
|
|
234
|
-
* HTML element.
|
|
235
|
-
*/
|
|
236
|
-
interface Element$1 extends Parent {
|
|
237
|
-
/**
|
|
238
|
-
* Node type of elements.
|
|
239
|
-
*/
|
|
240
|
-
type: "element";
|
|
241
|
-
/**
|
|
242
|
-
* Tag name (such as `'body'`) of the element.
|
|
243
|
-
*/
|
|
244
|
-
tagName: string;
|
|
245
|
-
/**
|
|
246
|
-
* Info associated with the element.
|
|
247
|
-
*/
|
|
248
|
-
properties: Properties;
|
|
249
|
-
/**
|
|
250
|
-
* Children of element.
|
|
251
|
-
*/
|
|
252
|
-
children: ElementContent[];
|
|
253
|
-
/**
|
|
254
|
-
* When the `tagName` field is `'template'`, a `content` field can be
|
|
255
|
-
* present.
|
|
256
|
-
*/
|
|
257
|
-
content?: Root | undefined;
|
|
258
|
-
/**
|
|
259
|
-
* Data associated with the element.
|
|
260
|
-
*/
|
|
261
|
-
data?: ElementData | undefined;
|
|
262
|
-
}
|
|
263
|
-
/**
|
|
264
|
-
* Info associated with hast elements by the ecosystem.
|
|
265
|
-
*/
|
|
266
|
-
interface ElementData extends Data {}
|
|
267
|
-
/**
|
|
268
|
-
* Document fragment or a whole document.
|
|
269
|
-
*
|
|
270
|
-
* Should be used as the root of a tree and must not be used as a child.
|
|
271
|
-
*
|
|
272
|
-
* Can also be used as the value for the content field on a `'template'` element.
|
|
273
|
-
*/
|
|
274
|
-
interface Root extends Parent {
|
|
275
|
-
/**
|
|
276
|
-
* Node type of hast root.
|
|
277
|
-
*/
|
|
278
|
-
type: "root";
|
|
279
|
-
/**
|
|
280
|
-
* Children of root.
|
|
281
|
-
*/
|
|
282
|
-
children: RootContent[];
|
|
283
|
-
/**
|
|
284
|
-
* Data associated with the hast root.
|
|
285
|
-
*/
|
|
286
|
-
data?: RootData | undefined;
|
|
287
|
-
}
|
|
288
|
-
/**
|
|
289
|
-
* Info associated with hast root nodes by the ecosystem.
|
|
290
|
-
*/
|
|
291
|
-
interface RootData extends Data {}
|
|
292
|
-
/**
|
|
293
|
-
* HTML character data (plain text).
|
|
294
|
-
*/
|
|
295
|
-
interface Text extends Literal {
|
|
296
|
-
/**
|
|
297
|
-
* Node type of HTML character data (plain text) in hast.
|
|
298
|
-
*/
|
|
299
|
-
type: "text";
|
|
300
|
-
/**
|
|
301
|
-
* Data associated with the text.
|
|
302
|
-
*/
|
|
303
|
-
data?: TextData | undefined;
|
|
304
|
-
}
|
|
305
|
-
/**
|
|
306
|
-
* Info associated with hast texts by the ecosystem.
|
|
307
|
-
*/
|
|
308
|
-
interface TextData extends Data {}
|
|
309
|
-
//#endregion
|
|
310
|
-
//#region src/lib/types.d.ts
|
|
311
|
-
/**
|
|
312
|
-
* HTML Element, use to type `node` from react-markdown
|
|
313
|
-
*/
|
|
314
|
-
type Element = Element$1;
|
|
315
|
-
/**
|
|
316
|
-
* A Shiki BundledLanguage or a custom textmate grammar object
|
|
317
|
-
* @see https://shiki.style/languages
|
|
318
|
-
*/
|
|
319
|
-
type Language = LanguageRegistration | StringLiteralUnion<BundledLanguage> | SpecialLanguage | undefined;
|
|
320
|
-
type MultiThemeKey = 'dark' | 'light' | (string & {});
|
|
321
|
-
/**
|
|
322
|
-
* A Shiki BundledTheme or a custom textmate theme object
|
|
323
|
-
* @see https://shiki.style/themes
|
|
324
|
-
*/
|
|
325
|
-
type Theme = ThemeRegistrationAny | StringLiteralUnion<BundledTheme>;
|
|
326
|
-
/**
|
|
327
|
-
* A map of color names to themes.
|
|
328
|
-
* This allows you to specify multiple themes for the generated code.
|
|
329
|
-
* Supports custom textmate theme objects in addition to Shiki's bundled themes
|
|
330
|
-
*
|
|
331
|
-
* @example
|
|
332
|
-
* ```ts
|
|
333
|
-
* useShikiHighlighter(code, language, {
|
|
334
|
-
* light: 'github-light',
|
|
335
|
-
* dark: 'github-dark',
|
|
336
|
-
* dim: 'github-dark-dimmed'
|
|
337
|
-
* })
|
|
338
|
-
* ```
|
|
339
|
-
*
|
|
340
|
-
* @see https://shiki.style/guide/dual-themes
|
|
341
|
-
*/
|
|
342
|
-
type Themes = { [Key in MultiThemeKey]: Theme };
|
|
343
|
-
/**
|
|
344
|
-
* Configuration options specific to react-shiki
|
|
345
|
-
*/
|
|
346
|
-
interface ReactShikiOptions {
|
|
347
|
-
/**
|
|
348
|
-
* Minimum time (in milliseconds) between highlight operations.
|
|
349
|
-
* @default undefined (no throttling)
|
|
350
|
-
*/
|
|
351
|
-
delay?: number;
|
|
352
|
-
/**
|
|
353
|
-
* Custom textmate grammars to be preloaded for highlighting.
|
|
354
|
-
* @deprecated Use preloadLanguages instead.
|
|
355
|
-
*/
|
|
356
|
-
customLanguages?: LanguageRegistration | LanguageRegistration[];
|
|
357
|
-
/**
|
|
358
|
-
* Preload custom grammars or bundled languages.
|
|
359
|
-
* Supports custom textmate grammars, replaces deprecated `customLanguages`
|
|
360
|
-
*/
|
|
361
|
-
preloadLanguages?: Language | Language[];
|
|
362
|
-
/**
|
|
363
|
-
* Output format for the highlighted code.
|
|
364
|
-
* - 'react': Returns React nodes (default, safer)
|
|
365
|
-
* - 'html': Returns HTML string (rendered via dangerouslySetInnerHTML)
|
|
366
|
-
*
|
|
367
|
-
* The hook additionally accepts 'tokens' (experimental) to return raw
|
|
368
|
-
* Shiki tokens for custom rendering. It is deliberately excluded here
|
|
369
|
-
* and only enters through the hook's generic signature, so option
|
|
370
|
-
* objects typed with this interface keep the classic return type.
|
|
371
|
-
* @default 'react'
|
|
372
|
-
*/
|
|
373
|
-
outputFormat?: 'react' | 'html';
|
|
374
|
-
/**
|
|
375
|
-
* Custom Shiki highlighter instance to use instead of the default one.
|
|
376
|
-
* Keeps bundle small by only importing specified languages/themes.
|
|
377
|
-
* Can be either a Highlighter or HighlighterCore instance.
|
|
378
|
-
*
|
|
379
|
-
* @example
|
|
380
|
-
* import {
|
|
381
|
-
* createHighlighterCore,
|
|
382
|
-
* createOnigurumaEngine,
|
|
383
|
-
* useShikiHighlighter
|
|
384
|
-
* } from "react-shiki";
|
|
385
|
-
*
|
|
386
|
-
* const customHighlighter = await createHighlighterCore({
|
|
387
|
-
* themes: [
|
|
388
|
-
* import('@shikijs/themes/nord')
|
|
389
|
-
* ],
|
|
390
|
-
* langs: [
|
|
391
|
-
* import('@shikijs/langs/javascript'),
|
|
392
|
-
* import('@shikijs/langs/typescript')
|
|
393
|
-
* ],
|
|
394
|
-
* engine: createOnigurumaEngine(import('shiki/wasm'))
|
|
395
|
-
* });
|
|
396
|
-
*
|
|
397
|
-
* const highlightedCode = useShikiHighlighter(code, language, theme, {
|
|
398
|
-
* highlighter: customHighlighter,
|
|
399
|
-
* });
|
|
400
|
-
*/
|
|
401
|
-
highlighter?: Highlighter | HighlighterCore;
|
|
402
|
-
/**
|
|
403
|
-
* Whether to show line numbers
|
|
404
|
-
* @default false
|
|
405
|
-
*/
|
|
406
|
-
showLineNumbers?: boolean;
|
|
407
|
-
/**
|
|
408
|
-
* Starting line number (when showLineNumbers is true)
|
|
409
|
-
* @default 1
|
|
410
|
-
*/
|
|
411
|
-
startingLineNumber?: number;
|
|
412
|
-
/**
|
|
413
|
-
* Displayed line numbers to highlight
|
|
414
|
-
*/
|
|
415
|
-
highlightLineNumbers?: number[];
|
|
416
|
-
}
|
|
417
|
-
/**
|
|
418
|
-
* Configuration options for the syntax highlighter
|
|
419
|
-
* Extends CodeToHastOptions to allow passing any Shiki options directly
|
|
420
|
-
*/
|
|
421
|
-
interface HighlighterOptions extends ReactShikiOptions, Pick<CodeOptionsMultipleThemes<BundledTheme>, 'defaultColor' | 'cssVariablePrefix'>, Omit<CodeToHastOptions, 'lang' | 'theme' | 'themes'>, Pick<BundledHighlighterOptions<string, string>, 'langAlias' | 'engine'> {}
|
|
422
|
-
/**
|
|
423
|
-
* State for the throttling logic
|
|
424
|
-
*/
|
|
425
|
-
/**
|
|
426
|
-
* Supported output formats and their corresponding result shapes.
|
|
427
|
-
*/
|
|
428
|
-
type OutputFormat = 'react' | 'html' | 'tokens';
|
|
429
|
-
interface HighlightResultMap {
|
|
430
|
-
react: ReactElement;
|
|
431
|
-
html: string;
|
|
432
|
-
tokens: TokensResult;
|
|
433
|
-
}
|
|
434
|
-
type HighlightResult<F extends OutputFormat = 'react'> = HighlightResultMap[F] | null;
|
|
435
|
-
/**
|
|
436
|
-
* Per-call options shape: every highlighter option except `outputFormat`,
|
|
437
|
-
* plus a narrowed `outputFormat?: F` so the return type can be inferred
|
|
438
|
-
* from the format the caller actually passes.
|
|
439
|
-
*
|
|
440
|
-
* This is the only place 'tokens' is accepted. Keeping it out of
|
|
441
|
-
* `HighlighterOptions` means values typed with that interface infer
|
|
442
|
-
* `F = 'react' | 'html'` and keep their pre-tokens return type.
|
|
443
|
-
*/
|
|
444
|
-
type HighlighterOptionsFor<F extends OutputFormat> = Omit<HighlighterOptions, 'outputFormat'> & {
|
|
445
|
-
outputFormat?: F;
|
|
446
|
-
};
|
|
447
|
-
type UseShikiHighlighter = <F extends OutputFormat = 'react'>(code: string, lang: Language, themeInput: Theme | Themes, options?: HighlighterOptionsFor<F>) => HighlightResult<F>;
|
|
448
|
-
//#endregion
|
|
449
|
-
//#region src/lib/plugins.d.ts
|
|
450
|
-
/**
|
|
451
|
-
* Rehype plugin to add an 'inline' property to <code> elements
|
|
452
|
-
* Sets 'inline' property to true if the <code> is not within a <pre> tag
|
|
453
|
-
*
|
|
454
|
-
* Pass this plugin to the `rehypePlugins` prop of react-markdown
|
|
455
|
-
* You can then access `inline` as a prop in components passed to react-markdown
|
|
456
|
-
*
|
|
457
|
-
* @example
|
|
458
|
-
* <ReactMarkdown rehypePlugins={[rehypeInlineCodeProperty]} />
|
|
459
|
-
*/
|
|
460
|
-
declare function rehypeInlineCodeProperty(): (tree: Root) => undefined;
|
|
461
|
-
/**
|
|
462
|
-
* Function to determine if code is inline based on the presence of line breaks
|
|
463
|
-
*
|
|
464
|
-
* @example
|
|
465
|
-
* const isInline = node && isInlineCode(node: Element)
|
|
466
|
-
*/
|
|
467
|
-
declare const isInlineCode: (node: Element) => boolean;
|
|
468
|
-
//#endregion
|
|
469
|
-
//#region src/lib/component.d.ts
|
|
470
|
-
/**
|
|
471
|
-
* Props for the ShikiHighlighter component
|
|
472
|
-
*/
|
|
473
|
-
interface ShikiHighlighterProps extends HighlighterOptions {
|
|
474
|
-
/**
|
|
475
|
-
* The programming language for syntax highlighting
|
|
476
|
-
* Supports custom textmate grammar objects in addition to Shiki's bundled languages
|
|
477
|
-
* @see https://shiki.style/languages
|
|
478
|
-
*/
|
|
479
|
-
language: Language;
|
|
480
|
-
/**
|
|
481
|
-
* The code to be highlighted
|
|
482
|
-
*/
|
|
483
|
-
children: string;
|
|
484
|
-
/**
|
|
485
|
-
* The color theme or themes for syntax highlighting
|
|
486
|
-
* Supports single, dual, or multiple themes
|
|
487
|
-
* Supports custom textmate theme objects in addition to Shiki's bundled themes
|
|
488
|
-
*
|
|
489
|
-
* @example
|
|
490
|
-
* theme='github-dark' // single theme
|
|
491
|
-
* theme={{ light: 'github-light', dark: 'github-dark' }} // multi-theme
|
|
492
|
-
*
|
|
493
|
-
* @see https://shiki.style/themes
|
|
494
|
-
*/
|
|
495
|
-
theme: Theme | Themes;
|
|
496
|
-
/**
|
|
497
|
-
* Controls the application of default styles to the generated code blocks
|
|
498
|
-
*
|
|
499
|
-
* Default styles include padding, overflow handling, border radius, language label styling, and font settings
|
|
500
|
-
* @default true
|
|
501
|
-
*/
|
|
502
|
-
addDefaultStyles?: boolean;
|
|
503
|
-
/**
|
|
504
|
-
* Add custom inline styles to the generated code block
|
|
505
|
-
*/
|
|
506
|
-
style?: React.CSSProperties;
|
|
507
|
-
/**
|
|
508
|
-
* Add custom inline styles to the language label
|
|
509
|
-
*/
|
|
510
|
-
langStyle?: React.CSSProperties;
|
|
511
|
-
/**
|
|
512
|
-
* Add custom CSS class names to the generated code block
|
|
513
|
-
*/
|
|
514
|
-
className?: string;
|
|
515
|
-
/**
|
|
516
|
-
* Add custom CSS class names to the language label
|
|
517
|
-
*/
|
|
518
|
-
langClassName?: string;
|
|
519
|
-
/**
|
|
520
|
-
* Whether to show the language label
|
|
521
|
-
* @default true
|
|
522
|
-
*/
|
|
523
|
-
showLanguage?: boolean;
|
|
524
|
-
/**
|
|
525
|
-
* Whether to show line numbers
|
|
526
|
-
* @default false
|
|
527
|
-
*/
|
|
528
|
-
showLineNumbers?: boolean;
|
|
529
|
-
/**
|
|
530
|
-
* Starting line number (when showLineNumbers is true)
|
|
531
|
-
* @default 1
|
|
532
|
-
*/
|
|
533
|
-
startingLineNumber?: number;
|
|
534
|
-
/**
|
|
535
|
-
* Displayed line numbers to highlight
|
|
536
|
-
*/
|
|
537
|
-
highlightLineNumbers?: number[];
|
|
538
|
-
/**
|
|
539
|
-
* The HTML element that wraps the generated code block.
|
|
540
|
-
* @default 'div'
|
|
541
|
-
*/
|
|
542
|
-
as?: React.ElementType;
|
|
543
|
-
}
|
|
544
|
-
//#endregion
|
|
545
|
-
export { HighlightResult as a, Language as c, Themes as d, UseShikiHighlighter as f, Element as i, OutputFormat as l, isInlineCode as n, HighlighterOptions as o, rehypeInlineCodeProperty as r, HighlighterOptionsFor as s, ShikiHighlighterProps as t, Theme as u };
|
|
546
|
-
//# sourceMappingURL=component-B-gutZRK.d.mts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"component-DdW14SOw.mjs","names":[],"sources":["../src/lib/utils.ts","../src/lib/language.ts","../src/lib/theme.ts","../src/lib/transformers.ts","../src/lib/options.ts","../src/lib/hook.ts","../src/lib/plugins.ts","../src/lib/component.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { dequal } from 'dequal';\n\nimport type { TimeoutState } from './types';\n\n/**\n * Returns a referentially stable version of `value` that only updates when content changes.\n * Uses reference equality as a fast path and deep comparison to prevent unnecessary updates.\n */\nexport const useStableValue = <T>(value: T): T => {\n const ref = useRef(value);\n\n if (value !== ref.current && !dequal(value, ref.current)) {\n ref.current = value;\n }\n\n return ref.current;\n};\n\n/**\n * Optionally throttles rapid sequential highlighting operations\n *\n * @example\n * const timeoutControl = useRef<TimeoutState>({\n * nextAllowedTime: 0,\n * timeoutId: undefined\n * });\n *\n * throttleHighlighting(highlightCode, timeoutControl, 1000);\n */\nexport const throttleHighlighting = (\n performHighlight: () => Promise<void>,\n timeoutControl: React.RefObject<TimeoutState>,\n throttleMs: number\n) => {\n clearTimeout(timeoutControl.current.timeoutId);\n\n const delay = Math.max(\n 0,\n timeoutControl.current.nextAllowedTime - Date.now()\n );\n timeoutControl.current.timeoutId = setTimeout(() => {\n performHighlight();\n timeoutControl.current.nextAllowedTime = Date.now() + throttleMs;\n }, delay);\n};\n","import type { Language } from './types';\nimport { guessEmbeddedLanguages, isSpecialLang } from 'shiki/core';\nimport type {\n DynamicImportLanguageRegistration,\n Highlighter,\n HighlighterCore,\n LanguageInput,\n LanguageRegistration,\n} from 'shiki';\n\nexport const FALLBACK_LANGUAGE = 'plaintext';\n\nexport const getEmbeddedLanguages = (\n code: string,\n languageId: string,\n highlighter: Highlighter | HighlighterCore\n): LanguageInput[] => {\n const bundled: Record<string, LanguageInput> =\n highlighter.getBundledLanguages();\n return guessEmbeddedLanguages(code, languageId).flatMap(\n (language) => bundled[language] ?? []\n );\n};\n\n/**\n * Resolved languages and metadata\n */\ntype LanguageResult = {\n languageId: string;\n langsToLoad: Language[];\n};\n\nconst toArray = <T>(value?: T | T[]): T[] =>\n value == null ? [] : Array.isArray(value) ? value : [value];\n\nconst languageKey = (lang: Language): string | null => {\n if (lang == null) return null;\n if (typeof lang === 'string') return `s:${lang}`;\n return `o:${lang.name}::${lang.scopeName}`;\n};\n\nconst dedupeLanguages = (langs: Language[]): Language[] => {\n const seen = new Set<string>();\n const deduped: Language[] = [];\n\n for (const lang of langs) {\n const key = languageKey(lang);\n if (key == null || seen.has(key)) continue;\n seen.add(key);\n deduped.push(lang);\n }\n\n return deduped;\n};\n\n/**\n * Used in factories to check if language is supported.\n * Objects are validated as grammar registrations (name + scopeName).\n */\nexport const isLoadableLanguage = <T extends string>(\n lang: Language,\n bundledLanguages: Record<T, DynamicImportLanguageRegistration>\n): lang is NonNullable<Language> => {\n if (lang == null) return false;\n if (typeof lang === 'string') return lang in bundledLanguages;\n return (\n typeof lang.name === 'string' && typeof lang.scopeName === 'string'\n );\n};\n\n/**\n * Used in hook to resolve loaded language for highlighting.\n * Falls back to \"plaintext\" if not supported.\n */\nexport const resolveLoadedLanguage = (\n languageId: string,\n loadedLanguages: string[]\n): string =>\n isSpecialLang(languageId) || loadedLanguages.includes(languageId)\n ? languageId\n : FALLBACK_LANGUAGE;\n\n/**\n * Resolves the language input to standardized IDs and objects for Shiki\n * @param lang The language input from props\n * @param customLanguages An array of custom textmate grammar objects or a single grammar object\n * @returns A LanguageResult object containing:\n * - languageId: The resolved language ID\n * - langsToLoad: The language objects/string ids to load\n */\nexport const resolveLanguage = (\n lang: Language,\n customLanguages?: LanguageRegistration | LanguageRegistration[],\n langAliases?: Record<string, string>,\n preloadLanguages?: Language | Language[]\n): LanguageResult => {\n const customLangs = toArray(customLanguages);\n const preloadLangs = toArray(preloadLanguages);\n const customMatchPool = [...customLangs, ...preloadLangs];\n let languageId = FALLBACK_LANGUAGE;\n let primaryLang: Language;\n\n // Language is null or empty string\n if (lang == null || (typeof lang === 'string' && !lang.trim())) {\n return {\n languageId,\n langsToLoad: dedupeLanguages([...preloadLangs, ...customLangs]),\n };\n }\n\n // Language is custom object\n if (typeof lang === 'object') {\n languageId = lang.name;\n primaryLang = lang;\n } else {\n // Language is string\n const normalizedLang = lang.trim();\n const lowerLang = normalizedLang.toLowerCase();\n const matches = (str: string | undefined): boolean =>\n str?.toLowerCase() === lowerLang;\n\n // Check custom registrations (from both customLanguages and preloadLanguages)\n const customMatch = customMatchPool.find(\n (candidate): candidate is LanguageRegistration =>\n typeof candidate === 'object' &&\n candidate != null &&\n !!(\n matches(candidate.name) ||\n matches(candidate.scopeName) ||\n matches(candidate.scopeName?.split('.').pop()) ||\n candidate.aliases?.some(matches) ||\n candidate.fileTypes?.some(matches)\n )\n );\n\n if (customMatch) {\n languageId = customMatch.name || normalizedLang;\n primaryLang = customMatch;\n } else if (langAliases?.[normalizedLang]) {\n // Language is aliased\n languageId = langAliases[normalizedLang];\n primaryLang = langAliases[normalizedLang];\n } else {\n // For any other string, pass it through to the factory\n languageId = normalizedLang;\n primaryLang = normalizedLang;\n }\n }\n\n return {\n languageId,\n langsToLoad: dedupeLanguages([\n primaryLang,\n ...preloadLangs,\n ...customLangs,\n ]),\n };\n};\n","import type { Theme, Themes } from './types';\nimport type { ThemeRegistrationAny } from 'shiki/core';\n\nexport const DEFAULT_THEMES: Themes = {\n light: 'github-light',\n dark: 'github-dark',\n};\n\nexport type ResolvedTheme =\n | { isMulti: true; themes: Themes; themesToLoad: Theme[] }\n | { isMulti: false; theme: Theme; themesToLoad: Theme[] };\n\nconst isTextmateTheme = (\n value: unknown\n): value is ThemeRegistrationAny => {\n if (typeof value !== 'object' || value === null) return false;\n const v = value as Partial<ThemeRegistrationAny> & {\n settings?: unknown;\n };\n const hasTokens =\n Array.isArray(v.tokenColors) || Array.isArray(v.settings);\n const hasIdentity =\n typeof v.name === 'string' || typeof v.type === 'string';\n return hasTokens && hasIdentity;\n};\n\nexport function resolveTheme(themeInput: Theme | Themes): ResolvedTheme {\n if (\n typeof themeInput !== 'object' ||\n themeInput === null ||\n isTextmateTheme(themeInput)\n ) {\n return {\n isMulti: false,\n theme: themeInput,\n themesToLoad: [themeInput],\n };\n }\n\n const validEntries = Object.entries(themeInput).filter(\n ([key, value]) =>\n key.trim() !== '' &&\n ((typeof value === 'string' && value.trim() !== '') ||\n isTextmateTheme(value))\n );\n\n if (validEntries.length === 0) {\n console.warn(\n '[react-shiki] invalid multi-theme config, falling back to defaults'\n );\n return {\n isMulti: true,\n themes: DEFAULT_THEMES,\n themesToLoad: Object.values(DEFAULT_THEMES),\n };\n }\n\n if (validEntries.length !== Object.keys(themeInput).length) {\n console.warn(\n '[react-shiki] multi-theme config contained invalid entries; they were dropped'\n );\n }\n\n const themes = Object.fromEntries(validEntries) as Themes;\n return {\n isMulti: true,\n themes,\n themesToLoad: validEntries.map(([, value]) => value as Theme),\n };\n}\n","import type { ShikiTransformer } from 'shiki/core';\n\nconst toLineNumberSet = (lineNumbers: readonly number[]) =>\n new Set(lineNumbers.filter(Number.isInteger));\n\n/**\n * Creates a transformer that enables line numbers display\n * @param startLine - The starting line number (defaults to 1)\n */\nexport function lineNumbersTransformer(startLine = 1): ShikiTransformer {\n return {\n name: 'react-shiki:line-numbers',\n code(node) {\n this.addClassToHast(node, 'rs-has-line-numbers');\n if (startLine !== 1) {\n const existingStyle = (node.properties?.style as string) || '';\n const newStyle = existingStyle\n ? `${existingStyle}; --line-start: ${startLine}`\n : `--line-start: ${startLine}`;\n node.properties = {\n ...node.properties,\n style: newStyle,\n };\n }\n },\n line(node) {\n this.addClassToHast(node, 'rs-line-number');\n return node;\n },\n };\n}\n\n/**\n * Creates a transformer that marks selected displayed line numbers.\n * @param lineNumbers - Displayed line numbers to highlight\n * @param startLine - The starting line number (defaults to 1)\n */\nexport function highlightedLinesTransformer(\n lineNumbers: readonly number[],\n startLine = 1\n): ShikiTransformer {\n const highlightedLines = toLineNumberSet(lineNumbers);\n\n return {\n name: 'react-shiki:highlight-lines',\n code(node) {\n this.addClassToHast(node, 'rs-has-highlighted-lines');\n },\n line(node, line) {\n const displayedLine = startLine + line - 1;\n\n if (highlightedLines.has(displayedLine)) {\n this.addClassToHast(node, 'rs-highlighted-line');\n }\n\n return node;\n },\n };\n}\n","import type {\n BundledTheme,\n CodeOptionsMultipleThemes,\n CodeOptionsSingleTheme,\n CodeToHastOptions,\n} from 'shiki';\n\nimport type {\n HighlighterOptions,\n HighlighterOptionsFor,\n OutputFormat,\n} from './types';\nimport type { ResolvedTheme } from './theme';\nimport {\n highlightedLinesTransformer,\n lineNumbersTransformer,\n} from './transformers';\n\nconst buildThemeOptions = (\n resolvedTheme: ResolvedTheme,\n defaultColor: HighlighterOptions['defaultColor'],\n cssVariablePrefix: HighlighterOptions['cssVariablePrefix']\n):\n | CodeOptionsMultipleThemes<BundledTheme>\n | CodeOptionsSingleTheme<BundledTheme> => {\n if (resolvedTheme.isMulti) {\n return {\n themes: resolvedTheme.themes,\n defaultColor,\n cssVariablePrefix,\n };\n }\n\n return {\n theme: resolvedTheme.theme,\n };\n};\n\nexport const buildShikiOptions = (\n languageId: string,\n resolvedTheme: ResolvedTheme,\n options: HighlighterOptionsFor<OutputFormat>\n): CodeToHastOptions => {\n const {\n delay,\n customLanguages,\n preloadLanguages,\n outputFormat,\n highlighter,\n langAlias,\n engine,\n defaultColor,\n cssVariablePrefix,\n showLineNumbers,\n startingLineNumber,\n highlightLineNumbers,\n transformers: userTransformers,\n ...shikiPassthrough\n } = options;\n\n const transformers = [...(userTransformers || [])];\n if (showLineNumbers) {\n transformers.push(lineNumbersTransformer(startingLineNumber));\n }\n if (highlightLineNumbers?.length) {\n transformers.push(\n highlightedLinesTransformer(\n highlightLineNumbers,\n startingLineNumber\n )\n );\n }\n\n return {\n lang: languageId,\n ...buildThemeOptions(resolvedTheme, defaultColor, cssVariablePrefix),\n ...shikiPassthrough,\n transformers,\n };\n};\n","import { useEffect, useMemo, useRef, useState } from 'react';\nimport { jsx, jsxs, Fragment } from 'react/jsx-runtime';\nimport { toJsxRuntime } from 'hast-util-to-jsx-runtime';\nimport type { CodeToHastOptions } from 'shiki';\n\nimport type {\n HighlighterFactory,\n HighlighterOptions,\n HighlighterOptionsFor,\n HighlightResult,\n HighlightResultMap,\n Language,\n OutputFormat,\n Theme,\n Themes,\n TimeoutState,\n} from './types';\n\nimport { throttleHighlighting, useStableValue } from './utils';\nimport {\n getEmbeddedLanguages,\n resolveLanguage,\n resolveLoadedLanguage,\n} from './language';\nimport { resolveTheme } from './theme';\nimport { buildShikiOptions } from './options';\n\nexport async function highlight<F extends OutputFormat = 'react'>(\n code: string,\n resolved: {\n languageId: string;\n langsToLoad: Language[];\n themesToLoad: Theme[];\n shikiOptions: CodeToHastOptions;\n },\n opts: Pick<HighlighterOptions, 'highlighter' | 'engine'> & {\n outputFormat?: F;\n },\n factory: HighlighterFactory\n): Promise<HighlightResultMap[F]> {\n const { languageId, langsToLoad, themesToLoad, shikiOptions } =\n resolved;\n const format: OutputFormat = opts.outputFormat ?? 'react';\n\n const highlighter =\n opts.highlighter ??\n (await (async () => {\n const hl = await factory(langsToLoad, themesToLoad, opts.engine);\n await hl.loadLanguage(\n ...getEmbeddedLanguages(code, languageId, hl)\n );\n return hl;\n })());\n\n const language = resolveLoadedLanguage(\n languageId,\n highlighter.getLoadedLanguages()\n );\n const options = { ...shikiOptions, lang: language };\n\n const outputs: { [K in OutputFormat]: () => HighlightResultMap[K] } = {\n react: () =>\n toJsxRuntime(highlighter.codeToHast(code, options), {\n jsx,\n jsxs,\n Fragment,\n }),\n html: () => highlighter.codeToHtml(code, options),\n tokens: () => highlighter.codeToTokens(code, options),\n };\n\n // Untyped call sites can pass formats outside OutputFormat; degrade to\n // react rendering like the pre-tokens ternary did instead of throwing.\n return (outputs[format] ?? outputs.react)() as HighlightResultMap[F];\n}\n\nexport const useHighlight = <F extends OutputFormat = 'react'>(\n code: string,\n lang: Language,\n themeInput: Theme | Themes,\n options: HighlighterOptionsFor<F> = {},\n highlighterFactory: HighlighterFactory\n): HighlightResult<F> => {\n const [highlightedCode, setHighlightedCode] =\n useState<HighlightResult<F>>(null);\n\n const stableLang = useStableValue(lang);\n const stableTheme = useStableValue(themeInput);\n const stableOpts = useStableValue(options);\n\n const resolved = useMemo(() => {\n const { languageId, langsToLoad } = resolveLanguage(\n stableLang,\n stableOpts.customLanguages,\n stableOpts.langAlias,\n stableOpts.preloadLanguages\n );\n\n const theme = resolveTheme(stableTheme);\n\n const shikiOptions = buildShikiOptions(languageId, theme, stableOpts);\n return {\n languageId,\n langsToLoad,\n themesToLoad: theme.themesToLoad,\n shikiOptions,\n };\n }, [stableLang, stableTheme, stableOpts]);\n\n const requestIdRef = useRef(0);\n\n const timeoutControl = useRef<TimeoutState>({\n nextAllowedTime: 0,\n timeoutId: undefined,\n });\n\n // Factory is invoked imperatively; its identity is not semantic, so it must\n // not invalidate the effect on every render. See issue #161.\n const highlighterFactoryRef = useRef(highlighterFactory);\n highlighterFactoryRef.current = highlighterFactory;\n\n useEffect(() => {\n const requestId = ++requestIdRef.current;\n\n if (!resolved.languageId) return;\n\n const run = async () => {\n try {\n const result = await highlight<F>(\n code,\n resolved,\n stableOpts,\n highlighterFactoryRef.current\n );\n if (requestId === requestIdRef.current) {\n setHighlightedCode(result);\n }\n } catch (error) {\n console.error('[react-shiki] highlight failed', error);\n }\n };\n\n if (stableOpts.delay) {\n throttleHighlighting(run, timeoutControl, stableOpts.delay);\n } else {\n run();\n }\n\n return () => {\n clearTimeout(timeoutControl.current.timeoutId);\n };\n }, [code, resolved, stableOpts]);\n\n return highlightedCode;\n};\n","import { visit } from 'unist-util-visit';\nimport type { Root } from 'hast';\nimport type { Element } from './types';\n\n/**\n * Rehype plugin to add an 'inline' property to <code> elements\n * Sets 'inline' property to true if the <code> is not within a <pre> tag\n *\n * Pass this plugin to the `rehypePlugins` prop of react-markdown\n * You can then access `inline` as a prop in components passed to react-markdown\n *\n * @example\n * <ReactMarkdown rehypePlugins={[rehypeInlineCodeProperty]} />\n */\nexport function rehypeInlineCodeProperty() {\n return (tree: Root): undefined => {\n visit(tree, 'element', (node: Element, _index, parent) => {\n if (\n node.tagName === 'code' &&\n parent?.type === 'element' &&\n parent.tagName !== 'pre'\n ) {\n node.properties.inline = true;\n }\n });\n };\n}\n\n/**\n * Function to determine if code is inline based on the presence of line breaks\n *\n * @example\n * const isInline = node && isInlineCode(node: Element)\n */\nexport const isInlineCode = (node: Element): boolean => {\n const textContent = (node.children || [])\n .filter((child) => child.type === 'text')\n .map((child) => child.value)\n .join('');\n\n return !textContent.includes('\\n');\n};\n","import '../styles/component.css';\nimport '../styles/features.css';\nimport { clsx } from 'clsx';\n\nimport type {\n HighlighterOptions,\n Language,\n OutputFormat,\n Theme,\n Themes,\n UseShikiHighlighter,\n} from './types';\nimport { forwardRef } from 'react';\n\nlet warnedTokensOutputFormat = false;\n\n/**\n * The component's props exclude `outputFormat: 'tokens'`, but plain-JS\n * callers can still pass it. Tokens are not renderable React children,\n * so fall back to 'react' instead of crashing the render.\n */\nconst resolveOutputFormat = (\n outputFormat: HighlighterOptions['outputFormat']\n): HighlighterOptions['outputFormat'] => {\n if ((outputFormat as OutputFormat) !== 'tokens') return outputFormat;\n\n if (!warnedTokensOutputFormat) {\n warnedTokensOutputFormat = true;\n console.warn(\n \"[react-shiki] outputFormat 'tokens' is only supported by the useShikiHighlighter hook, falling back to 'react'\"\n );\n }\n return 'react';\n};\n\n/**\n * Props for the ShikiHighlighter component\n */\nexport interface ShikiHighlighterProps extends HighlighterOptions {\n /**\n * The programming language for syntax highlighting\n * Supports custom textmate grammar objects in addition to Shiki's bundled languages\n * @see https://shiki.style/languages\n */\n language: Language;\n\n /**\n * The code to be highlighted\n */\n children: string;\n\n /**\n * The color theme or themes for syntax highlighting\n * Supports single, dual, or multiple themes\n * Supports custom textmate theme objects in addition to Shiki's bundled themes\n *\n * @example\n * theme='github-dark' // single theme\n * theme={{ light: 'github-light', dark: 'github-dark' }} // multi-theme\n *\n * @see https://shiki.style/themes\n */\n theme: Theme | Themes;\n\n /**\n * Controls the application of default styles to the generated code blocks\n *\n * Default styles include padding, overflow handling, border radius, language label styling, and font settings\n * @default true\n */\n addDefaultStyles?: boolean;\n\n /**\n * Add custom inline styles to the generated code block\n */\n style?: React.CSSProperties;\n\n /**\n * Add custom inline styles to the language label\n */\n langStyle?: React.CSSProperties;\n\n /**\n * Add custom CSS class names to the generated code block\n */\n className?: string;\n\n /**\n * Add custom CSS class names to the language label\n */\n langClassName?: string;\n\n /**\n * Whether to show the language label\n * @default true\n */\n showLanguage?: boolean;\n\n /**\n * Whether to show line numbers\n * @default false\n */\n showLineNumbers?: boolean;\n\n /**\n * Starting line number (when showLineNumbers is true)\n * @default 1\n */\n startingLineNumber?: number;\n\n /**\n * Displayed line numbers to highlight\n */\n highlightLineNumbers?: number[];\n\n /**\n * The HTML element that wraps the generated code block.\n * @default 'div'\n */\n as?: React.ElementType;\n}\n\n/**\n * Base ShikiHighlighter component factory.\n * This creates a component that uses the provided hook implementation.\n */\nexport const createShikiHighlighterComponent = (\n useShikiHighlighterImpl: UseShikiHighlighter\n) => {\n return forwardRef<HTMLElement, ShikiHighlighterProps>(\n (\n {\n language,\n theme,\n delay,\n transformers,\n defaultColor,\n cssVariablePrefix,\n addDefaultStyles = true,\n style,\n langStyle,\n className,\n langClassName,\n showLanguage = true,\n showLineNumbers = false,\n startingLineNumber = 1,\n highlightLineNumbers,\n children: code,\n as: Element = 'div',\n customLanguages,\n preloadLanguages,\n outputFormat,\n ...shikiOptions\n },\n ref\n ) => {\n const options: HighlighterOptions = {\n delay,\n transformers,\n customLanguages,\n preloadLanguages,\n showLineNumbers,\n defaultColor,\n cssVariablePrefix,\n startingLineNumber,\n highlightLineNumbers,\n outputFormat: resolveOutputFormat(outputFormat),\n ...shikiOptions,\n };\n\n const displayLanguageId =\n typeof language === 'object'\n ? language.name || null\n : language?.trim() || null;\n\n const highlightedCode = useShikiHighlighterImpl(\n code,\n language,\n theme,\n options\n );\n\n return (\n <Element\n ref={ref}\n data-testid=\"shiki-container\"\n data-slot=\"container\"\n className={clsx(\n 'rs-root',\n 'not-prose',\n addDefaultStyles && 'rs-default-styles',\n className\n )}\n style={style}\n >\n {showLanguage && displayLanguageId ? (\n <span\n id=\"language-label\"\n data-slot=\"language-label\"\n className={clsx('rs-language-label', langClassName)}\n style={langStyle}\n >\n {displayLanguageId}\n </span>\n ) : null}\n {typeof highlightedCode === 'string' ? (\n <div\n data-slot=\"content\"\n dangerouslySetInnerHTML={{ __html: highlightedCode }}\n />\n ) : (\n highlightedCode\n )}\n </Element>\n );\n }\n );\n};\n"],"mappings":"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"}
|
package/src/styles/features.css
DELETED
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
:where(.rs-has-line-numbers) {
|
|
2
|
-
counter-reset: line-number calc(var(--line-start, 1) - 1);
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
:where(.rs-has-line-numbers .rs-line-number)::before {
|
|
6
|
-
counter-increment: line-number;
|
|
7
|
-
content: counter(line-number);
|
|
8
|
-
display: inline-flex;
|
|
9
|
-
justify-content: flex-end;
|
|
10
|
-
align-items: flex-start;
|
|
11
|
-
box-sizing: content-box;
|
|
12
|
-
min-width: var(--rs-line-numbers-width, 2ch);
|
|
13
|
-
padding-left: var(--rs-line-numbers-padding-left, 0ch);
|
|
14
|
-
padding-right: var(--rs-line-numbers-padding-right, 2ch);
|
|
15
|
-
color: var(--rs-line-numbers-foreground, rgba(107, 114, 128, 0.5));
|
|
16
|
-
font-size: var(--rs-line-numbers-font-size, inherit);
|
|
17
|
-
font-weight: var(--rs-line-numbers-font-weight, inherit);
|
|
18
|
-
line-height: var(--rs-line-numbers-line-height, inherit);
|
|
19
|
-
font-family: var(--rs-line-numbers-font-family, inherit);
|
|
20
|
-
opacity: var(--rs-line-numbers-opacity, 1);
|
|
21
|
-
user-select: none;
|
|
22
|
-
pointer-events: none;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
:where(.rs-has-highlighted-lines) {
|
|
26
|
-
display: block;
|
|
27
|
-
width: fit-content;
|
|
28
|
-
min-width: 100%;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
:where(.rs-highlighted-line) {
|
|
32
|
-
--_rs-hl-background: var(
|
|
33
|
-
--rs-highlighted-line-background,
|
|
34
|
-
color-mix(in srgb, currentColor 10%, transparent)
|
|
35
|
-
);
|
|
36
|
-
display: inline-block;
|
|
37
|
-
width: 100%;
|
|
38
|
-
min-height: 1lh;
|
|
39
|
-
background-color: var(--_rs-hl-background);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
/* Full bleed: the 100vw outset paints into the pre's padding, clipped by its overflow. */
|
|
43
|
-
:where(.rs-default-styles) .rs-highlighted-line {
|
|
44
|
-
background-color: transparent;
|
|
45
|
-
border-image: linear-gradient(var(--_rs-hl-background) 0 0) fill 0 / 0 / 0
|
|
46
|
-
100vw;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
:where(.rs-has-line-numbers .rs-highlighted-line)::before {
|
|
50
|
-
color: var(
|
|
51
|
-
--rs-highlighted-line-number-foreground,
|
|
52
|
-
color-mix(in srgb, currentColor 65%, transparent)
|
|
53
|
-
);
|
|
54
|
-
}
|