react-shiki 0.9.2 → 0.10.0
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 +33 -19
- package/dist/component-C5lsWZSq.mjs +345 -0
- package/dist/component-C5lsWZSq.mjs.map +1 -0
- package/dist/component-CjpuWrgO.d.mts +515 -0
- package/dist/{core.d.ts → core.d.mts} +10 -11
- package/dist/core.mjs +64 -0
- package/dist/core.mjs.map +1 -0
- package/dist/index.d.mts +38 -0
- package/dist/index.mjs +53 -0
- package/dist/index.mjs.map +1 -0
- package/dist/style.css +55 -0
- package/dist/web.d.mts +38 -0
- package/dist/web.mjs +54 -0
- package/dist/web.mjs.map +1 -0
- package/package.json +35 -27
- package/src/styles/css.d.ts +1 -0
- package/src/styles/features.css +51 -0
- package/dist/chunk-QPJZGYHO.js +0 -416
- package/dist/chunk-QPJZGYHO.js.map +0 -1
- package/dist/component-CoSKNtmy.d.ts +0 -204
- package/dist/core.js +0 -53
- package/dist/core.js.map +0 -1
- package/dist/index.d.ts +0 -38
- package/dist/index.js +0 -53
- package/dist/index.js.map +0 -1
- package/dist/web.d.ts +0 -39
- package/dist/web.js +0 -53
- package/dist/web.js.map +0 -1
- package/src/lib/styles.css +0 -55
package/dist/chunk-QPJZGYHO.js
DELETED
|
@@ -1,416 +0,0 @@
|
|
|
1
|
-
// src/lib/hook.ts
|
|
2
|
-
import {
|
|
3
|
-
useEffect,
|
|
4
|
-
useMemo,
|
|
5
|
-
useRef as useRef2,
|
|
6
|
-
useState
|
|
7
|
-
} from "react";
|
|
8
|
-
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
9
|
-
import { toJsxRuntime } from "hast-util-to-jsx-runtime";
|
|
10
|
-
import { guessEmbeddedLanguages } from "shiki/core";
|
|
11
|
-
|
|
12
|
-
// src/lib/utils.ts
|
|
13
|
-
import { useRef } from "react";
|
|
14
|
-
import { dequal } from "dequal";
|
|
15
|
-
var useStableValue = (value) => {
|
|
16
|
-
const ref = useRef(value);
|
|
17
|
-
if (value !== ref.current && !dequal(value, ref.current)) {
|
|
18
|
-
ref.current = value;
|
|
19
|
-
}
|
|
20
|
-
return ref.current;
|
|
21
|
-
};
|
|
22
|
-
var throttleHighlighting = (performHighlight, timeoutControl, throttleMs) => {
|
|
23
|
-
const now = Date.now();
|
|
24
|
-
clearTimeout(timeoutControl.current.timeoutId);
|
|
25
|
-
const delay = Math.max(0, timeoutControl.current.nextAllowedTime - now);
|
|
26
|
-
timeoutControl.current.timeoutId = setTimeout(() => {
|
|
27
|
-
performHighlight().catch(console.error);
|
|
28
|
-
timeoutControl.current.nextAllowedTime = now + throttleMs;
|
|
29
|
-
}, delay);
|
|
30
|
-
};
|
|
31
|
-
|
|
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;
|
|
64
|
-
if (lang == null || typeof lang === "string" && !lang.trim()) {
|
|
65
|
-
return {
|
|
66
|
-
languageId,
|
|
67
|
-
langsToLoad: dedupeLanguages([...preloadLangs, ...customLangs])
|
|
68
|
-
};
|
|
69
|
-
}
|
|
70
|
-
if (typeof lang === "object") {
|
|
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
|
-
}
|
|
89
|
-
}
|
|
90
|
-
return {
|
|
91
|
-
languageId,
|
|
92
|
-
langsToLoad: dedupeLanguages([
|
|
93
|
-
primaryLang,
|
|
94
|
-
...preloadLangs,
|
|
95
|
-
...customLangs
|
|
96
|
-
])
|
|
97
|
-
};
|
|
98
|
-
};
|
|
99
|
-
|
|
100
|
-
// src/lib/theme.ts
|
|
101
|
-
var isTextmateTheme = (value) => typeof value === "object" && value !== null && "tokenColors" in value && Array.isArray(value.tokenColors);
|
|
102
|
-
function resolveTheme(themeInput) {
|
|
103
|
-
const inputIsTextmateTheme = isTextmateTheme(themeInput);
|
|
104
|
-
const isMultiThemeConfig = typeof themeInput === "object" && themeInput !== null && !inputIsTextmateTheme;
|
|
105
|
-
const validMultiThemeObj = typeof themeInput === "object" && themeInput !== null && !inputIsTextmateTheme && Object.entries(themeInput).some(
|
|
106
|
-
([key, value]) => key.trim() !== "" && (typeof value === "string" && value.trim() !== "" || isTextmateTheme(value))
|
|
107
|
-
);
|
|
108
|
-
if (isMultiThemeConfig) {
|
|
109
|
-
const themeId = validMultiThemeObj ? `multi-${Object.values(themeInput).map(
|
|
110
|
-
(theme) => (typeof theme === "string" ? theme : theme?.name) || "custom"
|
|
111
|
-
).sort().join("-")}` : "multi-default";
|
|
112
|
-
return {
|
|
113
|
-
isMultiTheme: true,
|
|
114
|
-
themeId,
|
|
115
|
-
multiTheme: validMultiThemeObj ? themeInput : null,
|
|
116
|
-
themesToLoad: validMultiThemeObj ? Object.values(themeInput) : []
|
|
117
|
-
};
|
|
118
|
-
}
|
|
119
|
-
return {
|
|
120
|
-
isMultiTheme: false,
|
|
121
|
-
themeId: typeof themeInput === "string" ? themeInput : themeInput?.name || "custom",
|
|
122
|
-
singleTheme: themeInput,
|
|
123
|
-
themesToLoad: [themeInput]
|
|
124
|
-
};
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
// src/lib/transformers.ts
|
|
128
|
-
function lineNumbersTransformer(startLine = 1) {
|
|
129
|
-
return {
|
|
130
|
-
name: "react-shiki:line-numbers",
|
|
131
|
-
code(node) {
|
|
132
|
-
this.addClassToHast(node, "has-line-numbers");
|
|
133
|
-
if (startLine !== 1) {
|
|
134
|
-
const existingStyle = node.properties?.style || "";
|
|
135
|
-
const newStyle = existingStyle ? `${existingStyle}; --line-start: ${startLine}` : `--line-start: ${startLine}`;
|
|
136
|
-
node.properties = {
|
|
137
|
-
...node.properties,
|
|
138
|
-
style: newStyle
|
|
139
|
-
};
|
|
140
|
-
}
|
|
141
|
-
},
|
|
142
|
-
line(node) {
|
|
143
|
-
this.addClassToHast(node, "line-numbers");
|
|
144
|
-
return node;
|
|
145
|
-
}
|
|
146
|
-
};
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
// src/lib/options.ts
|
|
150
|
-
var DEFAULT_THEMES = {
|
|
151
|
-
light: "github-light",
|
|
152
|
-
dark: "github-dark"
|
|
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
|
-
};
|
|
201
|
-
var useShikiHighlighter = (code, lang, themeInput, options = {}, highlighterFactory) => {
|
|
202
|
-
const [highlightedCode, setHighlightedCode] = useState(null);
|
|
203
|
-
const stableLang = useStableValue(lang);
|
|
204
|
-
const stableTheme = useStableValue(themeInput);
|
|
205
|
-
const stableOpts = useStableValue(options);
|
|
206
|
-
const { languageId, langsToLoad } = useMemo(
|
|
207
|
-
() => resolveLanguage(
|
|
208
|
-
stableLang,
|
|
209
|
-
stableOpts.customLanguages,
|
|
210
|
-
stableOpts.langAlias,
|
|
211
|
-
stableOpts.preloadLanguages
|
|
212
|
-
),
|
|
213
|
-
[
|
|
214
|
-
stableLang,
|
|
215
|
-
stableOpts.customLanguages,
|
|
216
|
-
stableOpts.preloadLanguages,
|
|
217
|
-
stableOpts.langAlias
|
|
218
|
-
]
|
|
219
|
-
);
|
|
220
|
-
const resolvedTheme = useMemo(
|
|
221
|
-
() => resolveTheme(stableTheme),
|
|
222
|
-
[stableTheme]
|
|
223
|
-
);
|
|
224
|
-
const { themesToLoad } = resolvedTheme;
|
|
225
|
-
const timeoutControl = useRef2({
|
|
226
|
-
nextAllowedTime: 0,
|
|
227
|
-
timeoutId: void 0
|
|
228
|
-
});
|
|
229
|
-
const shikiOptions = useMemo(
|
|
230
|
-
() => buildShikiOptions({
|
|
231
|
-
languageId,
|
|
232
|
-
resolvedTheme,
|
|
233
|
-
options: stableOpts
|
|
234
|
-
}),
|
|
235
|
-
[languageId, resolvedTheme, stableOpts]
|
|
236
|
-
);
|
|
237
|
-
useEffect(() => {
|
|
238
|
-
let isMounted = true;
|
|
239
|
-
const highlightCode = async () => {
|
|
240
|
-
if (!languageId) return;
|
|
241
|
-
const highlighter = stableOpts.highlighter ? stableOpts.highlighter : await highlighterFactory(
|
|
242
|
-
langsToLoad,
|
|
243
|
-
themesToLoad,
|
|
244
|
-
stableOpts.engine
|
|
245
|
-
);
|
|
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
|
-
);
|
|
260
|
-
const finalOptions = { ...shikiOptions, lang: langToUse };
|
|
261
|
-
if (isMounted) {
|
|
262
|
-
const output = stableOpts.outputFormat === "html" ? highlighter.codeToHtml(code, finalOptions) : toJsxRuntime(highlighter.codeToHast(code, finalOptions), {
|
|
263
|
-
jsx,
|
|
264
|
-
jsxs,
|
|
265
|
-
Fragment
|
|
266
|
-
});
|
|
267
|
-
setHighlightedCode(output);
|
|
268
|
-
}
|
|
269
|
-
};
|
|
270
|
-
const { delay } = stableOpts;
|
|
271
|
-
if (delay) {
|
|
272
|
-
throttleHighlighting(highlightCode, timeoutControl, delay);
|
|
273
|
-
} else {
|
|
274
|
-
highlightCode().catch(console.error);
|
|
275
|
-
}
|
|
276
|
-
return () => {
|
|
277
|
-
isMounted = false;
|
|
278
|
-
clearTimeout(timeoutControl.current.timeoutId);
|
|
279
|
-
};
|
|
280
|
-
}, [
|
|
281
|
-
code,
|
|
282
|
-
shikiOptions,
|
|
283
|
-
stableOpts.delay,
|
|
284
|
-
stableOpts.highlighter,
|
|
285
|
-
langsToLoad,
|
|
286
|
-
themesToLoad
|
|
287
|
-
]);
|
|
288
|
-
return highlightedCode;
|
|
289
|
-
};
|
|
290
|
-
|
|
291
|
-
// src/lib/plugins.ts
|
|
292
|
-
import { visit } from "unist-util-visit";
|
|
293
|
-
function rehypeInlineCodeProperty() {
|
|
294
|
-
return (tree) => {
|
|
295
|
-
visit(tree, "element", (node, _index, parent) => {
|
|
296
|
-
if (node.tagName === "code" && parent.tagName !== "pre") {
|
|
297
|
-
node.properties.inline = true;
|
|
298
|
-
}
|
|
299
|
-
});
|
|
300
|
-
};
|
|
301
|
-
}
|
|
302
|
-
var isInlineCode = (node) => {
|
|
303
|
-
const textContent = (node.children || []).filter((child) => child.type === "text").map((child) => child.value).join("");
|
|
304
|
-
return !textContent.includes("\n");
|
|
305
|
-
};
|
|
306
|
-
|
|
307
|
-
// #style-inject:#style-inject
|
|
308
|
-
function styleInject(css, { insertAt } = {}) {
|
|
309
|
-
if (!css || typeof document === "undefined") return;
|
|
310
|
-
const head = document.head || document.getElementsByTagName("head")[0];
|
|
311
|
-
const style = document.createElement("style");
|
|
312
|
-
style.type = "text/css";
|
|
313
|
-
if (insertAt === "top") {
|
|
314
|
-
if (head.firstChild) {
|
|
315
|
-
head.insertBefore(style, head.firstChild);
|
|
316
|
-
} else {
|
|
317
|
-
head.appendChild(style);
|
|
318
|
-
}
|
|
319
|
-
} else {
|
|
320
|
-
head.appendChild(style);
|
|
321
|
-
}
|
|
322
|
-
if (style.styleSheet) {
|
|
323
|
-
style.styleSheet.cssText = css;
|
|
324
|
-
} else {
|
|
325
|
-
style.appendChild(document.createTextNode(css));
|
|
326
|
-
}
|
|
327
|
-
}
|
|
328
|
-
|
|
329
|
-
// src/lib/styles.css
|
|
330
|
-
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");
|
|
331
|
-
|
|
332
|
-
// src/lib/component.tsx
|
|
333
|
-
import { clsx } from "clsx";
|
|
334
|
-
import { forwardRef } from "react";
|
|
335
|
-
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
336
|
-
var createShikiHighlighterComponent = (useShikiHighlighterImpl) => {
|
|
337
|
-
return forwardRef(
|
|
338
|
-
({
|
|
339
|
-
language,
|
|
340
|
-
theme,
|
|
341
|
-
delay,
|
|
342
|
-
transformers,
|
|
343
|
-
defaultColor,
|
|
344
|
-
cssVariablePrefix,
|
|
345
|
-
addDefaultStyles = true,
|
|
346
|
-
style,
|
|
347
|
-
langStyle,
|
|
348
|
-
className,
|
|
349
|
-
langClassName,
|
|
350
|
-
showLanguage = true,
|
|
351
|
-
showLineNumbers = false,
|
|
352
|
-
startingLineNumber = 1,
|
|
353
|
-
children: code,
|
|
354
|
-
as: Element = "pre",
|
|
355
|
-
customLanguages,
|
|
356
|
-
preloadLanguages,
|
|
357
|
-
...shikiOptions
|
|
358
|
-
}, ref) => {
|
|
359
|
-
const options = {
|
|
360
|
-
delay,
|
|
361
|
-
transformers,
|
|
362
|
-
customLanguages,
|
|
363
|
-
preloadLanguages,
|
|
364
|
-
showLineNumbers,
|
|
365
|
-
defaultColor,
|
|
366
|
-
cssVariablePrefix,
|
|
367
|
-
startingLineNumber,
|
|
368
|
-
...shikiOptions
|
|
369
|
-
};
|
|
370
|
-
const displayLanguageId = typeof language === "object" ? language.name || null : language?.trim() || null;
|
|
371
|
-
const highlightedCode = useShikiHighlighterImpl(
|
|
372
|
-
code,
|
|
373
|
-
language,
|
|
374
|
-
theme,
|
|
375
|
-
options
|
|
376
|
-
);
|
|
377
|
-
const isHtmlOutput = typeof highlightedCode === "string";
|
|
378
|
-
return /* @__PURE__ */ jsxs2(
|
|
379
|
-
Element,
|
|
380
|
-
{
|
|
381
|
-
ref,
|
|
382
|
-
"data-testid": "shiki-container",
|
|
383
|
-
className: clsx(
|
|
384
|
-
"relative",
|
|
385
|
-
"not-prose",
|
|
386
|
-
addDefaultStyles && "defaultStyles",
|
|
387
|
-
className
|
|
388
|
-
),
|
|
389
|
-
style,
|
|
390
|
-
id: "shiki-container",
|
|
391
|
-
children: [
|
|
392
|
-
showLanguage && displayLanguageId ? /* @__PURE__ */ jsx2(
|
|
393
|
-
"span",
|
|
394
|
-
{
|
|
395
|
-
className: clsx("languageLabel", langClassName),
|
|
396
|
-
style: langStyle,
|
|
397
|
-
id: "language-label",
|
|
398
|
-
children: displayLanguageId
|
|
399
|
-
}
|
|
400
|
-
) : null,
|
|
401
|
-
isHtmlOutput ? /* @__PURE__ */ jsx2("div", { dangerouslySetInnerHTML: { __html: highlightedCode } }) : highlightedCode
|
|
402
|
-
]
|
|
403
|
-
}
|
|
404
|
-
);
|
|
405
|
-
}
|
|
406
|
-
);
|
|
407
|
-
};
|
|
408
|
-
|
|
409
|
-
export {
|
|
410
|
-
isLoadableLanguage,
|
|
411
|
-
useShikiHighlighter,
|
|
412
|
-
rehypeInlineCodeProperty,
|
|
413
|
-
isInlineCode,
|
|
414
|
-
createShikiHighlighterComponent
|
|
415
|
-
};
|
|
416
|
-
//# sourceMappingURL=chunk-QPJZGYHO.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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"]}
|