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.
@@ -1,204 +0,0 @@
1
- import { LanguageRegistration, StringLiteralUnion, BundledLanguage, SpecialLanguage, Highlighter, HighlighterCore, CodeOptionsMultipleThemes, BundledTheme, CodeToHastOptions, BundledHighlighterOptions, ThemeRegistrationAny } from 'shiki';
2
- import { ReactNode } from 'react';
3
- import { Element as Element$1 } from 'hast';
4
-
5
- /**
6
- * HTML Element, use to type `node` from react-markdown
7
- */
8
- type Element = Element$1;
9
- /**
10
- * A Shiki BundledLanguage or a custom textmate grammar object
11
- * @see https://shiki.style/languages
12
- */
13
- type Language = LanguageRegistration | StringLiteralUnion<BundledLanguage> | SpecialLanguage | undefined;
14
- /**
15
- * A Shiki BundledTheme or a custom textmate theme object
16
- * @see https://shiki.style/themes
17
- */
18
- type Theme = ThemeRegistrationAny | StringLiteralUnion<BundledTheme>;
19
- /**
20
- * A map of color names to themes.
21
- * This allows you to specify multiple themes for the generated code.
22
- * Supports custom textmate theme objects in addition to Shiki's bundled themes
23
- *
24
- * @example
25
- * ```ts
26
- * useShikiHighlighter(code, language, {
27
- * light: 'github-light',
28
- * dark: 'github-dark',
29
- * dim: 'github-dark-dimmed'
30
- * })
31
- * ```
32
- *
33
- * @see https://shiki.style/guide/dual-themes
34
- */
35
- type Themes = {
36
- [key: string]: ThemeRegistrationAny | StringLiteralUnion<BundledTheme>;
37
- };
38
- /**
39
- * Configuration options specific to react-shiki
40
- */
41
- interface ReactShikiOptions {
42
- /**
43
- * Minimum time (in milliseconds) between highlight operations.
44
- * @default undefined (no throttling)
45
- */
46
- delay?: number;
47
- /**
48
- * Custom textmate grammars to be preloaded for highlighting.
49
- * @deprecated Use preloadLanguages instead.
50
- */
51
- customLanguages?: LanguageRegistration | LanguageRegistration[];
52
- /**
53
- * Preload custom grammars or bundled languages.
54
- * Supports custom textmate grammars, replaces deprecated `customLanguages`
55
- */
56
- preloadLanguages?: Language | Language[];
57
- /**
58
- * Output format for the highlighted code.
59
- * - 'react': Returns React nodes (default, safer)
60
- * - 'html': Returns HTML string (~15-45% faster, requires dangerouslySetInnerHTML)
61
- * @default 'react'
62
- */
63
- outputFormat?: 'react' | 'html';
64
- /**
65
- * Custom Shiki highlighter instance to use instead of the default one.
66
- * Keeps bundle small by only importing specified languages/themes.
67
- * Can be either a Highlighter or HighlighterCore instance.
68
- *
69
- * @example
70
- * import {
71
- * createHighlighterCore,
72
- * createOnigurumaEngine,
73
- * useShikiHighlighter
74
- * } from "react-shiki";
75
- *
76
- * const customHighlighter = await createHighlighterCore({
77
- * themes: [
78
- * import('@shikijs/themes/nord')
79
- * ],
80
- * langs: [
81
- * import('@shikijs/langs/javascript'),
82
- * import('@shikijs/langs/typescript')
83
- * ],
84
- * engine: createOnigurumaEngine(import('shiki/wasm'))
85
- * });
86
- *
87
- * const highlightedCode = useShikiHighlighter(code, language, theme, {
88
- * highlighter: customHighlighter,
89
- * });
90
- */
91
- highlighter?: Highlighter | HighlighterCore;
92
- /**
93
- * Whether to show line numbers
94
- * @default false
95
- */
96
- showLineNumbers?: boolean;
97
- /**
98
- * Starting line number (when showLineNumbers is true)
99
- * @default 1
100
- */
101
- startingLineNumber?: number;
102
- }
103
- /**
104
- * Configuration options for the syntax highlighter
105
- * Extends CodeToHastOptions to allow passing any Shiki options directly
106
- */
107
- interface HighlighterOptions extends ReactShikiOptions, Pick<CodeOptionsMultipleThemes<BundledTheme>, 'defaultColor' | 'cssVariablePrefix'>, Omit<CodeToHastOptions, 'lang' | 'theme' | 'themes'>, Pick<BundledHighlighterOptions<string, string>, 'langAlias' | 'engine'> {
108
- }
109
- /**
110
- * Public API signature for the useShikiHighlighter hook.
111
- */
112
- type UseShikiHighlighter = (code: string, lang: Language, themeInput: Theme | Themes, options?: HighlighterOptions) => ReactNode | string | null;
113
-
114
- /**
115
- * Rehype plugin to add an 'inline' property to <code> elements
116
- * Sets 'inline' property to true if the <code> is not within a <pre> tag
117
- *
118
- * Pass this plugin to the `rehypePlugins` prop of react-markdown
119
- * You can then access `inline` as a prop in components passed to react-markdown
120
- *
121
- * @example
122
- * <ReactMarkdown rehypePlugins={[rehypeInlineCodeProperty]} />
123
- */
124
- declare function rehypeInlineCodeProperty(): (tree: any) => undefined;
125
- /**
126
- * Function to determine if code is inline based on the presence of line breaks
127
- *
128
- * @example
129
- * const isInline = node && isInlineCode(node: Element)
130
- */
131
- declare const isInlineCode: (node: Element) => boolean;
132
-
133
- /**
134
- * Props for the ShikiHighlighter component
135
- */
136
- interface ShikiHighlighterProps extends HighlighterOptions {
137
- /**
138
- * The programming language for syntax highlighting
139
- * Supports custom textmate grammar objects in addition to Shiki's bundled languages
140
- * @see https://shiki.style/languages
141
- */
142
- language: Language;
143
- /**
144
- * The code to be highlighted
145
- */
146
- children: string;
147
- /**
148
- * The color theme or themes for syntax highlighting
149
- * Supports single, dual, or multiple themes
150
- * Supports custom textmate theme objects in addition to Shiki's bundled themes
151
- *
152
- * @example
153
- * theme='github-dark' // single theme
154
- * theme={{ light: 'github-light', dark: 'github-dark' }} // multi-theme
155
- *
156
- * @see https://shiki.style/themes
157
- */
158
- theme: Theme | Themes;
159
- /**
160
- * Controls the application of default styles to the generated code blocks
161
- *
162
- * Default styles include padding, overflow handling, border radius, language label styling, and font settings
163
- * @default true
164
- */
165
- addDefaultStyles?: boolean;
166
- /**
167
- * Add custom inline styles to the generated code block
168
- */
169
- style?: React.CSSProperties;
170
- /**
171
- * Add custom inline styles to the language label
172
- */
173
- langStyle?: React.CSSProperties;
174
- /**
175
- * Add custom CSS class names to the generated code block
176
- */
177
- className?: string;
178
- /**
179
- * Add custom CSS class names to the language label
180
- */
181
- langClassName?: string;
182
- /**
183
- * Whether to show the language label
184
- * @default true
185
- */
186
- showLanguage?: boolean;
187
- /**
188
- * Whether to show line numbers
189
- * @default false
190
- */
191
- showLineNumbers?: boolean;
192
- /**
193
- * Starting line number (when showLineNumbers is true)
194
- * @default 1
195
- */
196
- startingLineNumber?: number;
197
- /**
198
- * The HTML element that wraps the generated code block.
199
- * @default 'pre'
200
- */
201
- as?: React.ElementType;
202
- }
203
-
204
- export { type Element as E, type HighlighterOptions as H, type Language as L, type ShikiHighlighterProps as S, type Theme as T, type UseShikiHighlighter as U, type Themes as a, isInlineCode as i, rehypeInlineCodeProperty as r };
package/dist/core.js DELETED
@@ -1,53 +0,0 @@
1
- import {
2
- createShikiHighlighterComponent,
3
- isInlineCode,
4
- rehypeInlineCodeProperty,
5
- useShikiHighlighter
6
- } from "./chunk-QPJZGYHO.js";
7
-
8
- // src/bundles/core.ts
9
- function validateCoreHighlighter(highlighter) {
10
- if (!highlighter) {
11
- throw new Error(
12
- "react-shiki/core requires a custom highlighter. Use createHighlighterCore() from react-shiki or switch to react-shiki for plug-and-play usage."
13
- );
14
- }
15
- return highlighter;
16
- }
17
-
18
- // src/core.ts
19
- import { createHighlighterCore } from "shiki/core";
20
- import { createOnigurumaEngine } from "shiki/engine/oniguruma";
21
- import {
22
- createJavaScriptRegexEngine,
23
- createJavaScriptRawEngine
24
- } from "shiki/engine/javascript";
25
- var useShikiHighlighter2 = (code, lang, themeInput, options = {}) => {
26
- const highlighter = validateCoreHighlighter(options.highlighter);
27
- return useShikiHighlighter(
28
- code,
29
- lang,
30
- themeInput,
31
- {
32
- ...options,
33
- highlighter
34
- },
35
- async () => highlighter
36
- );
37
- };
38
- var ShikiHighlighter = createShikiHighlighterComponent(
39
- useShikiHighlighter2
40
- );
41
- var core_default = ShikiHighlighter;
42
- export {
43
- ShikiHighlighter,
44
- createHighlighterCore,
45
- createJavaScriptRawEngine,
46
- createJavaScriptRegexEngine,
47
- createOnigurumaEngine,
48
- core_default as default,
49
- isInlineCode,
50
- rehypeInlineCodeProperty,
51
- useShikiHighlighter2 as useShikiHighlighter
52
- };
53
- //# sourceMappingURL=core.js.map
package/dist/core.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/bundles/core.ts","../src/core.ts"],"sourcesContent":["import type { HighlighterCore } from 'shiki';\n\n/**\n * Validates that a highlighter is provided for the core bundle.\n * The core bundle requires users to provide their own highlighter instance.\n */\nexport function validateCoreHighlighter(\n highlighter: HighlighterCore | undefined\n): HighlighterCore {\n if (!highlighter) {\n throw new Error(\n 'react-shiki/core requires a custom highlighter. ' +\n 'Use createHighlighterCore() from react-shiki or switch to react-shiki for plug-and-play usage.'\n );\n }\n return highlighter;\n}\n","import { useShikiHighlighter as useBaseHook } from './lib/hook';\nimport { validateCoreHighlighter } from './bundles/core';\nimport type { UseShikiHighlighter } from './lib/types';\n\nexport { isInlineCode, rehypeInlineCodeProperty } from './lib/plugins';\n\nimport {\n createShikiHighlighterComponent,\n type ShikiHighlighterProps,\n} from './lib/component';\n\nexport type { ShikiHighlighterProps };\n\nexport type {\n UseShikiHighlighter,\n Language,\n Theme,\n Themes,\n Element,\n HighlighterOptions,\n} from './lib/types';\n\nexport { createHighlighterCore } from 'shiki/core';\nexport { createOnigurumaEngine } from 'shiki/engine/oniguruma';\nexport {\n createJavaScriptRegexEngine,\n createJavaScriptRawEngine,\n} from 'shiki/engine/javascript';\n\nexport type { LanguageRegistration } from 'shiki/core';\n\n/**\n * Highlight code with shiki (core bundle)\n *\n * @param code - Code to highlight\n * @param lang - Language (bundled or custom)\n * @param theme - Theme (bundled, multi-theme, or custom)\n * @param options - react-shiki options + shiki options\n * @returns Highlighted code as React elements or HTML string\n *\n * @example\n * ```tsx\n * import { createHighlighterCore, createOnigurumaEngine } from 'react-shiki/core';\n *\n *\n * const highlighter = await createHighlighterCore({\n * themes: [import('@shikijs/themes/github-light'), import('@shikijs/themes/github-dark')],\n * langs: [import('@shikijs/langs/typescript')],\n * engine: createOnigurumaEngine(import('shiki/wasm'))\n * });\n *\n * const highlighted = useShikiHighlighter(\n * 'const x = 1;',\n * 'typescript',\n * {\n * light: 'github-light',\n * dark: 'github-dark'\n * },\n * { highlighter }\n * );\n * ```\n *\n * Core bundle (minimal). For plug-and-play: `react-shiki` or `react-shiki/web`\n */\nexport const useShikiHighlighter: UseShikiHighlighter = (\n code,\n lang,\n themeInput,\n options = {}\n) => {\n // Validate that highlighter is provided\n const highlighter = validateCoreHighlighter(options.highlighter);\n\n return useBaseHook(\n code,\n lang,\n themeInput,\n {\n ...options,\n highlighter,\n },\n async () => highlighter\n );\n};\n\n/**\n * ShikiHighlighter component using a custom highlighter.\n * Requires a highlighter to be provided.\n */\nexport const ShikiHighlighter = createShikiHighlighterComponent(\n useShikiHighlighter\n);\nexport default ShikiHighlighter;\n"],"mappings":";;;;;;;;AAMO,SAAS,wBACd,aACiB;AACjB,MAAI,CAAC,aAAa;AAChB,UAAM,IAAI;AAAA,MACR;AAAA,IAEF;AAAA,EACF;AACA,SAAO;AACT;;;ACMA,SAAS,6BAA6B;AACtC,SAAS,6BAA6B;AACtC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAqCA,IAAMA,uBAA2C,CACtD,MACA,MACA,YACA,UAAU,CAAC,MACR;AAEH,QAAM,cAAc,wBAAwB,QAAQ,WAAW;AAE/D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,GAAG;AAAA,MACH;AAAA,IACF;AAAA,IACA,YAAY;AAAA,EACd;AACF;AAMO,IAAM,mBAAmB;AAAA,EAC9BA;AACF;AACA,IAAO,eAAQ;","names":["useShikiHighlighter"]}
package/dist/index.d.ts DELETED
@@ -1,38 +0,0 @@
1
- import * as react from 'react';
2
- import { S as ShikiHighlighterProps, U as UseShikiHighlighter } from './component-CoSKNtmy.js';
3
- export { E as Element, H as HighlighterOptions, L as Language, T as Theme, a as Themes, i as isInlineCode, r as rehypeInlineCodeProperty } from './component-CoSKNtmy.js';
4
- export { createJavaScriptRawEngine, createJavaScriptRegexEngine } from 'shiki/engine/javascript';
5
- export { LanguageRegistration } from 'shiki';
6
- import 'hast';
7
-
8
- /**
9
- * Highlight code with shiki (full bundle)
10
- *
11
- * @param code - Code to highlight
12
- * @param lang - Language (bundled or custom)
13
- * @param theme - Theme (bundled, multi-theme, or custom)
14
- * @param options - react-shiki options + shiki options
15
- * @returns Highlighted code as React elements or HTML string
16
- *
17
- * @example
18
- * ```tsx
19
- * const highlighted = useShikiHighlighter(
20
- * 'const x = 1;',
21
- * 'typescript',
22
- * {
23
- * light: 'github-light',
24
- * dark: 'github-dark'
25
- * }
26
- * );
27
- * ```
28
- *
29
- * Full bundle (~6.4MB minified, 1.2MB gzipped). For smaller bundles: `react-shiki/web` or `react-shiki/core`
30
- */
31
- declare const useShikiHighlighter: UseShikiHighlighter;
32
- /**
33
- * ShikiHighlighter component using the full bundle.
34
- * Includes all languages and themes for maximum compatibility.
35
- */
36
- declare const ShikiHighlighter: react.ForwardRefExoticComponent<ShikiHighlighterProps & react.RefAttributes<HTMLElement>>;
37
-
38
- export { ShikiHighlighter, ShikiHighlighterProps, UseShikiHighlighter, ShikiHighlighter as default, useShikiHighlighter };
package/dist/index.js DELETED
@@ -1,53 +0,0 @@
1
- import {
2
- createShikiHighlighterComponent,
3
- isInlineCode,
4
- isLoadableLanguage,
5
- rehypeInlineCodeProperty,
6
- useShikiHighlighter
7
- } from "./chunk-QPJZGYHO.js";
8
-
9
- // src/bundles/full.ts
10
- import {
11
- getSingletonHighlighter,
12
- bundledLanguages
13
- } from "shiki";
14
- import { createOnigurumaEngine } from "shiki/engine/oniguruma";
15
- async function createFullHighlighter(langsToLoad, themesToLoad, engine) {
16
- const langs = langsToLoad.filter(
17
- (lang) => isLoadableLanguage(lang, bundledLanguages)
18
- );
19
- return await getSingletonHighlighter({
20
- langs,
21
- themes: themesToLoad,
22
- engine: engine ?? createOnigurumaEngine(import("shiki/wasm"))
23
- });
24
- }
25
-
26
- // src/index.ts
27
- import {
28
- createJavaScriptRegexEngine,
29
- createJavaScriptRawEngine
30
- } from "shiki/engine/javascript";
31
- var useShikiHighlighter2 = (code, lang, themeInput, options = {}) => {
32
- return useShikiHighlighter(
33
- code,
34
- lang,
35
- themeInput,
36
- options,
37
- createFullHighlighter
38
- );
39
- };
40
- var ShikiHighlighter = createShikiHighlighterComponent(
41
- useShikiHighlighter2
42
- );
43
- var src_default = ShikiHighlighter;
44
- export {
45
- ShikiHighlighter,
46
- createJavaScriptRawEngine,
47
- createJavaScriptRegexEngine,
48
- src_default as default,
49
- isInlineCode,
50
- rehypeInlineCodeProperty,
51
- useShikiHighlighter2 as useShikiHighlighter
52
- };
53
- //# sourceMappingURL=index.js.map
package/dist/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/bundles/full.ts","../src/index.ts"],"sourcesContent":["import {\n getSingletonHighlighter,\n bundledLanguages,\n type Highlighter,\n type Awaitable,\n type RegexEngine,\n} from 'shiki';\nimport { createOnigurumaEngine } from 'shiki/engine/oniguruma';\nimport type { Language, Theme } from '../lib/types';\nimport { isLoadableLanguage } from '../lib/language';\n\n/**\n * Creates a highlighter using the full Shiki bundle with all languages and themes.\n * This is the largest bundle but provides maximum compatibility.\n */\nexport async function createFullHighlighter(\n langsToLoad: Language[],\n themesToLoad: Theme[],\n engine?: Awaitable<RegexEngine>\n): Promise<Highlighter> {\n const langs = langsToLoad.filter((lang) =>\n isLoadableLanguage(lang, bundledLanguages)\n );\n\n return await getSingletonHighlighter({\n langs,\n themes: themesToLoad,\n engine: engine ?? createOnigurumaEngine(import('shiki/wasm')),\n });\n}\n","import { useShikiHighlighter as useBaseHook } from './lib/hook';\nimport { createFullHighlighter } from './bundles/full';\nimport type { UseShikiHighlighter } from './lib/types';\n\nexport { isInlineCode, rehypeInlineCodeProperty } from './lib/plugins';\n\nimport {\n createShikiHighlighterComponent,\n type ShikiHighlighterProps,\n} from './lib/component';\n\nexport type { ShikiHighlighterProps };\n\nexport type {\n UseShikiHighlighter,\n Language,\n Theme,\n Themes,\n Element,\n HighlighterOptions,\n} from './lib/types';\n\nexport {\n createJavaScriptRegexEngine,\n createJavaScriptRawEngine,\n} from 'shiki/engine/javascript';\n\nexport type { LanguageRegistration } from 'shiki';\n\n/**\n * Highlight code with shiki (full bundle)\n *\n * @param code - Code to highlight\n * @param lang - Language (bundled or custom)\n * @param theme - Theme (bundled, multi-theme, or custom)\n * @param options - react-shiki options + shiki options\n * @returns Highlighted code as React elements or HTML string\n *\n * @example\n * ```tsx\n * const highlighted = useShikiHighlighter(\n * 'const x = 1;',\n * 'typescript',\n * {\n * light: 'github-light',\n * dark: 'github-dark'\n * }\n * );\n * ```\n *\n * Full bundle (~6.4MB minified, 1.2MB gzipped). For smaller bundles: `react-shiki/web` or `react-shiki/core`\n */\nexport const useShikiHighlighter: UseShikiHighlighter = (\n code,\n lang,\n themeInput,\n options = {}\n) => {\n return useBaseHook(\n code,\n lang,\n themeInput,\n options,\n createFullHighlighter\n );\n};\n\n/**\n * ShikiHighlighter component using the full bundle.\n * Includes all languages and themes for maximum compatibility.\n */\nexport const ShikiHighlighter = createShikiHighlighterComponent(\n useShikiHighlighter\n);\nexport default ShikiHighlighter;\n"],"mappings":";;;;;;;;;AAAA;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AACP,SAAS,6BAA6B;AAQtC,eAAsB,sBACpB,aACA,cACA,QACsB;AACtB,QAAM,QAAQ,YAAY;AAAA,IAAO,CAAC,SAChC,mBAAmB,MAAM,gBAAgB;AAAA,EAC3C;AAEA,SAAO,MAAM,wBAAwB;AAAA,IACnC;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ,UAAU,sBAAsB,OAAO,YAAY,CAAC;AAAA,EAC9D,CAAC;AACH;;;ACPA;AAAA,EACE;AAAA,EACA;AAAA,OACK;AA2BA,IAAMA,uBAA2C,CACtD,MACA,MACA,YACA,UAAU,CAAC,MACR;AACH,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAMO,IAAM,mBAAmB;AAAA,EAC9BA;AACF;AACA,IAAO,cAAQ;","names":["useShikiHighlighter"]}
package/dist/web.d.ts DELETED
@@ -1,39 +0,0 @@
1
- import * as react from 'react';
2
- import { S as ShikiHighlighterProps, U as UseShikiHighlighter } from './component-CoSKNtmy.js';
3
- export { E as Element, H as HighlighterOptions, L as Language, T as Theme, a as Themes, i as isInlineCode, r as rehypeInlineCodeProperty } from './component-CoSKNtmy.js';
4
- export { createJavaScriptRawEngine, createJavaScriptRegexEngine } from 'shiki/engine/javascript';
5
- export { LanguageRegistration } from 'shiki/bundle/web';
6
- import 'shiki';
7
- import 'hast';
8
-
9
- /**
10
- * Highlight code with shiki (web bundle)
11
- *
12
- * @param code - Code to highlight
13
- * @param lang - Language (bundled or custom)
14
- * @param theme - Theme (bundled, multi-theme, or custom)
15
- * @param options - react-shiki options + shiki options
16
- * @returns Highlighted code as React elements or HTML string
17
- *
18
- * @example
19
- * ```tsx
20
- * const highlighted = useShikiHighlighter(
21
- * 'const x = 1;',
22
- * 'typescript',
23
- * {
24
- * light: 'github-light',
25
- * dark: 'github-dark'
26
- * }
27
- * );
28
- * ```
29
- *
30
- * Web bundle (~3.8MB minified, 695KB gzipped). For other bundles: `react-shiki` or `react-shiki/core`
31
- */
32
- declare const useShikiHighlighter: UseShikiHighlighter;
33
- /**
34
- * ShikiHighlighter component using the web bundle.
35
- * Includes web-focused languages for balanced size and functionality.
36
- */
37
- declare const ShikiHighlighter: react.ForwardRefExoticComponent<ShikiHighlighterProps & react.RefAttributes<HTMLElement>>;
38
-
39
- export { ShikiHighlighter, ShikiHighlighterProps, UseShikiHighlighter, ShikiHighlighter as default, useShikiHighlighter };
package/dist/web.js DELETED
@@ -1,53 +0,0 @@
1
- import {
2
- createShikiHighlighterComponent,
3
- isInlineCode,
4
- isLoadableLanguage,
5
- rehypeInlineCodeProperty,
6
- useShikiHighlighter
7
- } from "./chunk-QPJZGYHO.js";
8
-
9
- // src/bundles/web.ts
10
- import {
11
- getSingletonHighlighter,
12
- bundledLanguages
13
- } from "shiki/bundle/web";
14
- import { createOnigurumaEngine } from "shiki/engine/oniguruma";
15
- async function createWebHighlighter(langsToLoad, themesToLoad, engine) {
16
- const langs = langsToLoad.filter(
17
- (lang) => isLoadableLanguage(lang, bundledLanguages)
18
- );
19
- return await getSingletonHighlighter({
20
- langs,
21
- themes: themesToLoad,
22
- engine: engine ?? createOnigurumaEngine(import("shiki/wasm"))
23
- });
24
- }
25
-
26
- // src/web.ts
27
- import {
28
- createJavaScriptRegexEngine,
29
- createJavaScriptRawEngine
30
- } from "shiki/engine/javascript";
31
- var useShikiHighlighter2 = (code, lang, themeInput, options = {}) => {
32
- return useShikiHighlighter(
33
- code,
34
- lang,
35
- themeInput,
36
- options,
37
- createWebHighlighter
38
- );
39
- };
40
- var ShikiHighlighter = createShikiHighlighterComponent(
41
- useShikiHighlighter2
42
- );
43
- var web_default = ShikiHighlighter;
44
- export {
45
- ShikiHighlighter,
46
- createJavaScriptRawEngine,
47
- createJavaScriptRegexEngine,
48
- web_default as default,
49
- isInlineCode,
50
- rehypeInlineCodeProperty,
51
- useShikiHighlighter2 as useShikiHighlighter
52
- };
53
- //# sourceMappingURL=web.js.map
package/dist/web.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/bundles/web.ts","../src/web.ts"],"sourcesContent":["import {\n getSingletonHighlighter,\n bundledLanguages,\n type Highlighter,\n type Awaitable,\n type RegexEngine,\n} from 'shiki/bundle/web';\nimport { createOnigurumaEngine } from 'shiki/engine/oniguruma';\nimport type { Language, Theme } from '../lib/types';\nimport { isLoadableLanguage } from '../lib/language';\n\n/**\n * Creates a highlighter using the web Shiki bundle with web-focused languages.\n * Smaller than the full bundle while covering most web development needs.\n * Includes: HTML, CSS, JS, TS, JSON, Markdown, Vue, JSX, Svelte, etc.\n */\nexport async function createWebHighlighter(\n langsToLoad: Language[],\n themesToLoad: Theme[],\n engine?: Awaitable<RegexEngine>\n): Promise<Highlighter> {\n const langs = langsToLoad.filter((lang) =>\n isLoadableLanguage(lang, bundledLanguages)\n );\n\n return await getSingletonHighlighter({\n langs,\n themes: themesToLoad,\n engine: engine ?? createOnigurumaEngine(import('shiki/wasm')),\n });\n}\n","import { useShikiHighlighter as useBaseHook } from './lib/hook';\nimport { createWebHighlighter } from './bundles/web';\nimport type { UseShikiHighlighter } from './lib/types';\n\nexport { isInlineCode, rehypeInlineCodeProperty } from './lib/plugins';\n\nimport {\n createShikiHighlighterComponent,\n type ShikiHighlighterProps,\n} from './lib/component';\n\nexport type { ShikiHighlighterProps };\n\nexport type {\n UseShikiHighlighter,\n Language,\n Theme,\n Themes,\n Element,\n HighlighterOptions,\n} from './lib/types';\n\nexport {\n createJavaScriptRegexEngine,\n createJavaScriptRawEngine,\n} from 'shiki/engine/javascript';\n\nexport type { LanguageRegistration } from 'shiki/bundle/web';\n\n/**\n * Highlight code with shiki (web bundle)\n *\n * @param code - Code to highlight\n * @param lang - Language (bundled or custom)\n * @param theme - Theme (bundled, multi-theme, or custom)\n * @param options - react-shiki options + shiki options\n * @returns Highlighted code as React elements or HTML string\n *\n * @example\n * ```tsx\n * const highlighted = useShikiHighlighter(\n * 'const x = 1;',\n * 'typescript',\n * {\n * light: 'github-light',\n * dark: 'github-dark'\n * }\n * );\n * ```\n *\n * Web bundle (~3.8MB minified, 695KB gzipped). For other bundles: `react-shiki` or `react-shiki/core`\n */\nexport const useShikiHighlighter: UseShikiHighlighter = (\n code,\n lang,\n themeInput,\n options = {}\n) => {\n return useBaseHook(\n code,\n lang,\n themeInput,\n options,\n createWebHighlighter\n );\n};\n\n/**\n * ShikiHighlighter component using the web bundle.\n * Includes web-focused languages for balanced size and functionality.\n */\nexport const ShikiHighlighter = createShikiHighlighterComponent(\n useShikiHighlighter\n);\nexport default ShikiHighlighter;\n"],"mappings":";;;;;;;;;AAAA;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AACP,SAAS,6BAA6B;AAStC,eAAsB,qBACpB,aACA,cACA,QACsB;AACtB,QAAM,QAAQ,YAAY;AAAA,IAAO,CAAC,SAChC,mBAAmB,MAAM,gBAAgB;AAAA,EAC3C;AAEA,SAAO,MAAM,wBAAwB;AAAA,IACnC;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ,UAAU,sBAAsB,OAAO,YAAY,CAAC;AAAA,EAC9D,CAAC;AACH;;;ACRA;AAAA,EACE;AAAA,EACA;AAAA,OACK;AA2BA,IAAMA,uBAA2C,CACtD,MACA,MACA,YACA,UAAU,CAAC,MACR;AACH,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAMO,IAAM,mBAAmB;AAAA,EAC9BA;AACF;AACA,IAAO,cAAQ;","names":["useShikiHighlighter"]}
@@ -1,55 +0,0 @@
1
- .relative {
2
- position: relative;
3
- }
4
-
5
- .defaultStyles pre {
6
- overflow: auto;
7
- border-radius: 0.5rem;
8
- padding-left: 1.5rem;
9
- padding-right: 1.5rem;
10
- padding-top: 1.25rem;
11
- padding-bottom: 1.25rem;
12
- }
13
-
14
- .languageLabel {
15
- position: absolute;
16
- right: 0.75rem;
17
- top: 0.5rem;
18
- font-family: monospace;
19
- font-size: 0.75rem;
20
- letter-spacing: -0.05em;
21
- color: rgba(107, 114, 128, 0.85);
22
- }
23
-
24
- .line-numbers::before {
25
- counter-increment: line-number;
26
- content: counter(line-number);
27
- display: inline-flex;
28
- justify-content: flex-end;
29
- align-items: flex-start;
30
- box-sizing: content-box;
31
- min-width: var(--line-numbers-width, 2ch);
32
- padding-left: var(--line-numbers-padding-left, 2ch);
33
- padding-right: var(--line-numbers-padding-right, 2ch);
34
- color: var(--line-numbers-foreground, rgba(107, 114, 128, 0.6));
35
- font-size: var(--line-numbers-font-size, inherit);
36
- font-weight: var(--line-numbers-font-weight, inherit);
37
- line-height: var(--line-numbers-line-height, inherit);
38
- font-family: var(--line-numbers-font-family, inherit);
39
- opacity: var(--line-numbers-opacity, 1);
40
- user-select: none;
41
- pointer-events: none;
42
- }
43
-
44
- .has-line-numbers {
45
- counter-reset: line-number calc(var(--line-start, 1) - 1);
46
- --line-numbers-foreground: rgba(107, 114, 128, 0.5);
47
- --line-numbers-width: 2ch;
48
- --line-numbers-padding-left: 0ch;
49
- --line-numbers-padding-right: 2ch;
50
- --line-numbers-font-size: inherit;
51
- --line-numbers-font-weight: inherit;
52
- --line-numbers-line-height: inherit;
53
- --line-numbers-font-family: inherit;
54
- --line-numbers-opacity: 1;
55
- }