@shikijs/colorized-brackets 1.23.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/LICENSE +22 -0
- package/README.md +9 -0
- package/dist/index.d.mts +62 -0
- package/dist/index.d.ts +62 -0
- package/dist/index.mjs +701 -0
- package/package.json +40 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2021 Pine Wu
|
|
4
|
+
Copyright (c) 2023 Anthony Fu <https://github.com/antfu>
|
|
5
|
+
|
|
6
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
7
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
8
|
+
in the Software without restriction, including without limitation the rights
|
|
9
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
10
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
11
|
+
furnished to do so, subject to the following conditions:
|
|
12
|
+
|
|
13
|
+
The above copyright notice and this permission notice shall be included in all
|
|
14
|
+
copies or substantial portions of the Software.
|
|
15
|
+
|
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
17
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
18
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
19
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
20
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
21
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
|
+
SOFTWARE.
|
package/README.md
ADDED
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { ShikiTransformer } from 'shiki';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Colorized brackets plugin config
|
|
5
|
+
*
|
|
6
|
+
* @property themes - a record of theme names to bracket CSS colors; the final color is the unexpected bracket color
|
|
7
|
+
* @property bracketPairs - bracket pair definitions
|
|
8
|
+
* @property langs - language-specific configs that are merged with the base config
|
|
9
|
+
* @property explicitTrigger - if true, the transformer only runs for code blocks with the `colorize-brackets` meta string
|
|
10
|
+
*/
|
|
11
|
+
interface TransformerColorizedBracketsOptions {
|
|
12
|
+
themes: Record<string, string[]>;
|
|
13
|
+
bracketPairs: BracketPair[];
|
|
14
|
+
langs: Record<string, ColorizedBracketsLangConfig>;
|
|
15
|
+
explicitTrigger?: boolean;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Language-specific config
|
|
19
|
+
*
|
|
20
|
+
* @property themes - language-specific theme customizations; if not defined, it uses the theme customizations from the base config
|
|
21
|
+
* @property bracketPairs - language-specific bracket pairs; if not defined, it uses the bracket from the base config
|
|
22
|
+
*/
|
|
23
|
+
interface ColorizedBracketsLangConfig {
|
|
24
|
+
themes?: Record<string, string[]>;
|
|
25
|
+
bracketPairs?: BracketPair[];
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Defines opening and closing brackets, and allowed Textmate scopes
|
|
29
|
+
*
|
|
30
|
+
* @property opener - the string that opens a bracket pair; multi-character strings are not yet supported
|
|
31
|
+
* @property closer - the string that closes a bracket pair; multi-character strings are not yet supported
|
|
32
|
+
* @property scopesAllowList - if defined, brackets will only be colored if at least 1 of their scopes matches a scope from this list
|
|
33
|
+
* @property scopesDenyList - if defined, brackets will not be colored if any of their scopes match a scope from this list
|
|
34
|
+
*/
|
|
35
|
+
interface BracketPair {
|
|
36
|
+
opener: string;
|
|
37
|
+
closer: string;
|
|
38
|
+
scopesAllowList?: string[];
|
|
39
|
+
scopesDenyList?: string[];
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/**
|
|
43
|
+
* Creates a new bracket colorizer transformer
|
|
44
|
+
*
|
|
45
|
+
* @example basic usage
|
|
46
|
+
* ```ts
|
|
47
|
+
* const html = await shiki.codeToHtml(code, {
|
|
48
|
+
* lang: 'ts',
|
|
49
|
+
* theme: 'dark-plus',
|
|
50
|
+
* transformers: [transformerColorizedBrackets()],
|
|
51
|
+
* });
|
|
52
|
+
* ```
|
|
53
|
+
*
|
|
54
|
+
* @param options
|
|
55
|
+
* @param options.themes - custom themes; all Shiki built-in themes are supported without additional configuration
|
|
56
|
+
* @param options.bracketPairs - bracket definitions; be default [], {}, (), and <> (TS-only)
|
|
57
|
+
* @param options.langs - language-specific overrides for themes and bracketPairs
|
|
58
|
+
* @returns Shiki transformer
|
|
59
|
+
*/
|
|
60
|
+
declare function transformerColorizedBrackets(options?: Partial<TransformerColorizedBracketsOptions>): ShikiTransformer;
|
|
61
|
+
|
|
62
|
+
export { transformerColorizedBrackets };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { ShikiTransformer } from 'shiki';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Colorized brackets plugin config
|
|
5
|
+
*
|
|
6
|
+
* @property themes - a record of theme names to bracket CSS colors; the final color is the unexpected bracket color
|
|
7
|
+
* @property bracketPairs - bracket pair definitions
|
|
8
|
+
* @property langs - language-specific configs that are merged with the base config
|
|
9
|
+
* @property explicitTrigger - if true, the transformer only runs for code blocks with the `colorize-brackets` meta string
|
|
10
|
+
*/
|
|
11
|
+
interface TransformerColorizedBracketsOptions {
|
|
12
|
+
themes: Record<string, string[]>;
|
|
13
|
+
bracketPairs: BracketPair[];
|
|
14
|
+
langs: Record<string, ColorizedBracketsLangConfig>;
|
|
15
|
+
explicitTrigger?: boolean;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Language-specific config
|
|
19
|
+
*
|
|
20
|
+
* @property themes - language-specific theme customizations; if not defined, it uses the theme customizations from the base config
|
|
21
|
+
* @property bracketPairs - language-specific bracket pairs; if not defined, it uses the bracket from the base config
|
|
22
|
+
*/
|
|
23
|
+
interface ColorizedBracketsLangConfig {
|
|
24
|
+
themes?: Record<string, string[]>;
|
|
25
|
+
bracketPairs?: BracketPair[];
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Defines opening and closing brackets, and allowed Textmate scopes
|
|
29
|
+
*
|
|
30
|
+
* @property opener - the string that opens a bracket pair; multi-character strings are not yet supported
|
|
31
|
+
* @property closer - the string that closes a bracket pair; multi-character strings are not yet supported
|
|
32
|
+
* @property scopesAllowList - if defined, brackets will only be colored if at least 1 of their scopes matches a scope from this list
|
|
33
|
+
* @property scopesDenyList - if defined, brackets will not be colored if any of their scopes match a scope from this list
|
|
34
|
+
*/
|
|
35
|
+
interface BracketPair {
|
|
36
|
+
opener: string;
|
|
37
|
+
closer: string;
|
|
38
|
+
scopesAllowList?: string[];
|
|
39
|
+
scopesDenyList?: string[];
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/**
|
|
43
|
+
* Creates a new bracket colorizer transformer
|
|
44
|
+
*
|
|
45
|
+
* @example basic usage
|
|
46
|
+
* ```ts
|
|
47
|
+
* const html = await shiki.codeToHtml(code, {
|
|
48
|
+
* lang: 'ts',
|
|
49
|
+
* theme: 'dark-plus',
|
|
50
|
+
* transformers: [transformerColorizedBrackets()],
|
|
51
|
+
* });
|
|
52
|
+
* ```
|
|
53
|
+
*
|
|
54
|
+
* @param options
|
|
55
|
+
* @param options.themes - custom themes; all Shiki built-in themes are supported without additional configuration
|
|
56
|
+
* @param options.bracketPairs - bracket definitions; be default [], {}, (), and <> (TS-only)
|
|
57
|
+
* @param options.langs - language-specific overrides for themes and bracketPairs
|
|
58
|
+
* @returns Shiki transformer
|
|
59
|
+
*/
|
|
60
|
+
declare function transformerColorizedBrackets(options?: Partial<TransformerColorizedBracketsOptions>): ShikiTransformer;
|
|
61
|
+
|
|
62
|
+
export { transformerColorizedBrackets };
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,701 @@
|
|
|
1
|
+
const builtInThemes = {
|
|
2
|
+
"andromeeda": [
|
|
3
|
+
"#FFD700",
|
|
4
|
+
"#DA70D6",
|
|
5
|
+
"#179FFF",
|
|
6
|
+
"rgba(255, 18, 18, 0.8)"
|
|
7
|
+
],
|
|
8
|
+
"aurora-x": [
|
|
9
|
+
"#FFD700",
|
|
10
|
+
"#DA70D6",
|
|
11
|
+
"#179FFF",
|
|
12
|
+
"rgba(255, 18, 18, 0.8)"
|
|
13
|
+
],
|
|
14
|
+
"ayu-dark": [
|
|
15
|
+
"#FFD700",
|
|
16
|
+
"#DA70D6",
|
|
17
|
+
"#179FFF",
|
|
18
|
+
"rgba(255, 18, 18, 0.8)"
|
|
19
|
+
],
|
|
20
|
+
"catppuccin-frappe": [
|
|
21
|
+
"#e78284",
|
|
22
|
+
"#ef9f76",
|
|
23
|
+
"#e5c890",
|
|
24
|
+
"#a6d189",
|
|
25
|
+
"#85c1dc",
|
|
26
|
+
"#ca9ee6",
|
|
27
|
+
"#ea999c"
|
|
28
|
+
],
|
|
29
|
+
"catppuccin-latte": [
|
|
30
|
+
"#d20f39",
|
|
31
|
+
"#fe640b",
|
|
32
|
+
"#df8e1d",
|
|
33
|
+
"#40a02b",
|
|
34
|
+
"#209fb5",
|
|
35
|
+
"#8839ef",
|
|
36
|
+
"#e64553"
|
|
37
|
+
],
|
|
38
|
+
"catppuccin-macchiato": [
|
|
39
|
+
"#ed8796",
|
|
40
|
+
"#f5a97f",
|
|
41
|
+
"#eed49f",
|
|
42
|
+
"#a6da95",
|
|
43
|
+
"#7dc4e4",
|
|
44
|
+
"#c6a0f6",
|
|
45
|
+
"#ee99a0"
|
|
46
|
+
],
|
|
47
|
+
"catppuccin-mocha": [
|
|
48
|
+
"#f38ba8",
|
|
49
|
+
"#fab387",
|
|
50
|
+
"#f9e2af",
|
|
51
|
+
"#a6e3a1",
|
|
52
|
+
"#74c7ec",
|
|
53
|
+
"#cba6f7",
|
|
54
|
+
"#eba0ac"
|
|
55
|
+
],
|
|
56
|
+
"dark-plus": [
|
|
57
|
+
"#FFD700",
|
|
58
|
+
"#DA70D6",
|
|
59
|
+
"#179FFF",
|
|
60
|
+
"rgba(255, 18, 18, 0.8)"
|
|
61
|
+
],
|
|
62
|
+
"dracula": [
|
|
63
|
+
"#F8F8F2",
|
|
64
|
+
"#FF79C6",
|
|
65
|
+
"#8BE9FD",
|
|
66
|
+
"#50FA7B",
|
|
67
|
+
"#BD93F9",
|
|
68
|
+
"#FFB86C",
|
|
69
|
+
"#FF5555"
|
|
70
|
+
],
|
|
71
|
+
"dracula-soft": [
|
|
72
|
+
"#f6f6f4",
|
|
73
|
+
"#f286c4",
|
|
74
|
+
"#97e1f1",
|
|
75
|
+
"#62e884",
|
|
76
|
+
"#bf9eee",
|
|
77
|
+
"#FFB86C",
|
|
78
|
+
"#ee6666"
|
|
79
|
+
],
|
|
80
|
+
"everforest-dark": [
|
|
81
|
+
"#e67e80",
|
|
82
|
+
"#dbbc7f",
|
|
83
|
+
"#a7c080",
|
|
84
|
+
"#7fbbb3",
|
|
85
|
+
"#e69875",
|
|
86
|
+
"#d699b6",
|
|
87
|
+
"#859289"
|
|
88
|
+
],
|
|
89
|
+
"everforest-light": [
|
|
90
|
+
"#f85552",
|
|
91
|
+
"#dfa000",
|
|
92
|
+
"#8da101",
|
|
93
|
+
"#3a94c5",
|
|
94
|
+
"#f57d26",
|
|
95
|
+
"#df69ba",
|
|
96
|
+
"#939f91"
|
|
97
|
+
],
|
|
98
|
+
"github-dark": [
|
|
99
|
+
"#79b8ff",
|
|
100
|
+
"#ffab70",
|
|
101
|
+
"#b392f0",
|
|
102
|
+
"#79b8ff",
|
|
103
|
+
"#ffab70",
|
|
104
|
+
"#b392f0",
|
|
105
|
+
"rgba(255, 18, 18, 0.8)"
|
|
106
|
+
],
|
|
107
|
+
"github-dark-default": [
|
|
108
|
+
"#79c0ff",
|
|
109
|
+
"#56d364",
|
|
110
|
+
"#e3b341",
|
|
111
|
+
"#ffa198",
|
|
112
|
+
"#ff9bce",
|
|
113
|
+
"#d2a8ff",
|
|
114
|
+
"#7d8590"
|
|
115
|
+
],
|
|
116
|
+
"github-dark-dimmed": [
|
|
117
|
+
"#6cb6ff",
|
|
118
|
+
"#6bc46d",
|
|
119
|
+
"#daaa3f",
|
|
120
|
+
"#ff938a",
|
|
121
|
+
"#fc8dc7",
|
|
122
|
+
"#dcbdfb",
|
|
123
|
+
"#768390"
|
|
124
|
+
],
|
|
125
|
+
"github-dark-high-contrast": [
|
|
126
|
+
"#91cbff",
|
|
127
|
+
"#4ae168",
|
|
128
|
+
"#f7c843",
|
|
129
|
+
"#ffb1af",
|
|
130
|
+
"#ffadd4",
|
|
131
|
+
"#dbb7ff",
|
|
132
|
+
"#f0f3f6"
|
|
133
|
+
],
|
|
134
|
+
"github-light": [
|
|
135
|
+
"#005cc5",
|
|
136
|
+
"#e36209",
|
|
137
|
+
"#5a32a3",
|
|
138
|
+
"#005cc5",
|
|
139
|
+
"#e36209",
|
|
140
|
+
"#5a32a3",
|
|
141
|
+
"rgba(255, 18, 18, 0.8)"
|
|
142
|
+
],
|
|
143
|
+
"github-light-default": [
|
|
144
|
+
"#0969da",
|
|
145
|
+
"#1a7f37",
|
|
146
|
+
"#9a6700",
|
|
147
|
+
"#cf222e",
|
|
148
|
+
"#bf3989",
|
|
149
|
+
"#8250df",
|
|
150
|
+
"#656d76"
|
|
151
|
+
],
|
|
152
|
+
"github-light-high-contrast": [
|
|
153
|
+
"#0349b4",
|
|
154
|
+
"#055d20",
|
|
155
|
+
"#744500",
|
|
156
|
+
"#a0111f",
|
|
157
|
+
"#971368",
|
|
158
|
+
"#622cbc",
|
|
159
|
+
"#0e1116"
|
|
160
|
+
],
|
|
161
|
+
"houston": [
|
|
162
|
+
"#FFD700",
|
|
163
|
+
"#DA70D6",
|
|
164
|
+
"#179FFF",
|
|
165
|
+
"rgba(255, 18, 18, 0.8)"
|
|
166
|
+
],
|
|
167
|
+
"kanagawa-dragon": [
|
|
168
|
+
"#8992A7",
|
|
169
|
+
"#B6927B",
|
|
170
|
+
"#8BA4B0",
|
|
171
|
+
"#A292A3",
|
|
172
|
+
"#C4B28A",
|
|
173
|
+
"#8EA4A2",
|
|
174
|
+
"#C4746E"
|
|
175
|
+
],
|
|
176
|
+
"kanagawa-lotus": [
|
|
177
|
+
"#624C83",
|
|
178
|
+
"#CC6D00",
|
|
179
|
+
"#4D699B",
|
|
180
|
+
"#B35B79",
|
|
181
|
+
"#77713F",
|
|
182
|
+
"#597B75",
|
|
183
|
+
"#D9A594"
|
|
184
|
+
],
|
|
185
|
+
"kanagawa-wave": [
|
|
186
|
+
"#957FB8",
|
|
187
|
+
"#FFA066",
|
|
188
|
+
"#7E9CD8",
|
|
189
|
+
"#D27E99",
|
|
190
|
+
"#E6C384",
|
|
191
|
+
"#7AA89F",
|
|
192
|
+
"#FF5D62"
|
|
193
|
+
],
|
|
194
|
+
"laserwave": [
|
|
195
|
+
"#FFD700",
|
|
196
|
+
"#DA70D6",
|
|
197
|
+
"#179FFF",
|
|
198
|
+
"rgba(255, 18, 18, 0.8)"
|
|
199
|
+
],
|
|
200
|
+
"light-plus": [
|
|
201
|
+
"#0431FA",
|
|
202
|
+
"#319331",
|
|
203
|
+
"#7B3814",
|
|
204
|
+
"rgba(255, 18, 18, 0.8)"
|
|
205
|
+
],
|
|
206
|
+
"material-theme": [
|
|
207
|
+
"#FFD700",
|
|
208
|
+
"#DA70D6",
|
|
209
|
+
"#179FFF",
|
|
210
|
+
"rgba(255, 18, 18, 0.8)"
|
|
211
|
+
],
|
|
212
|
+
"material-theme-darker": [
|
|
213
|
+
"#FFD700",
|
|
214
|
+
"#DA70D6",
|
|
215
|
+
"#179FFF",
|
|
216
|
+
"rgba(255, 18, 18, 0.8)"
|
|
217
|
+
],
|
|
218
|
+
"material-theme-lighter": [
|
|
219
|
+
"#0431FA",
|
|
220
|
+
"#319331",
|
|
221
|
+
"#7B3814",
|
|
222
|
+
"rgba(255, 18, 18, 0.8)"
|
|
223
|
+
],
|
|
224
|
+
"material-theme-ocean": [
|
|
225
|
+
"#FFD700",
|
|
226
|
+
"#DA70D6",
|
|
227
|
+
"#179FFF",
|
|
228
|
+
"rgba(255, 18, 18, 0.8)"
|
|
229
|
+
],
|
|
230
|
+
"material-theme-palenight": [
|
|
231
|
+
"#FFD700",
|
|
232
|
+
"#DA70D6",
|
|
233
|
+
"#179FFF",
|
|
234
|
+
"rgba(255, 18, 18, 0.8)"
|
|
235
|
+
],
|
|
236
|
+
"min-dark": [
|
|
237
|
+
"#FFD700",
|
|
238
|
+
"#DA70D6",
|
|
239
|
+
"#179FFF",
|
|
240
|
+
"rgba(255, 18, 18, 0.8)"
|
|
241
|
+
],
|
|
242
|
+
"min-light": [
|
|
243
|
+
"#0431FA",
|
|
244
|
+
"#319331",
|
|
245
|
+
"#7B3814",
|
|
246
|
+
"rgba(255, 18, 18, 0.8)"
|
|
247
|
+
],
|
|
248
|
+
"monokai": [
|
|
249
|
+
"#FFD700",
|
|
250
|
+
"#DA70D6",
|
|
251
|
+
"#179FFF",
|
|
252
|
+
"rgba(255, 18, 18, 0.8)"
|
|
253
|
+
],
|
|
254
|
+
"night-owl": [
|
|
255
|
+
"#FFD700",
|
|
256
|
+
"#DA70D6",
|
|
257
|
+
"#179FFF",
|
|
258
|
+
"rgba(255, 18, 18, 0.8)"
|
|
259
|
+
],
|
|
260
|
+
"nord": [
|
|
261
|
+
"#8fbcbb",
|
|
262
|
+
"#88c0d0",
|
|
263
|
+
"#81a1c1",
|
|
264
|
+
"#5e81ac",
|
|
265
|
+
"#8fbcbb",
|
|
266
|
+
"#88c0d0",
|
|
267
|
+
"#bf616a"
|
|
268
|
+
],
|
|
269
|
+
"one-dark-pro": [
|
|
270
|
+
"#d19a66",
|
|
271
|
+
"#c678dd",
|
|
272
|
+
"#56b6c2",
|
|
273
|
+
"rgba(255, 18, 18, 0.8)"
|
|
274
|
+
],
|
|
275
|
+
"one-light": [
|
|
276
|
+
"#0431FA",
|
|
277
|
+
"#319331",
|
|
278
|
+
"#7B3814",
|
|
279
|
+
"rgba(255, 18, 18, 0.8)"
|
|
280
|
+
],
|
|
281
|
+
"plastic": [
|
|
282
|
+
"#A9B2C3",
|
|
283
|
+
"#61AFEF",
|
|
284
|
+
"#E5C07B",
|
|
285
|
+
"#E06C75",
|
|
286
|
+
"#98C379",
|
|
287
|
+
"#B57EDC",
|
|
288
|
+
"#D74E42"
|
|
289
|
+
],
|
|
290
|
+
"poimandres": [
|
|
291
|
+
"#FFD700",
|
|
292
|
+
"#DA70D6",
|
|
293
|
+
"#179FFF",
|
|
294
|
+
"rgba(255, 18, 18, 0.8)"
|
|
295
|
+
],
|
|
296
|
+
"red": [
|
|
297
|
+
"#FFD700",
|
|
298
|
+
"#DA70D6",
|
|
299
|
+
"#179FFF",
|
|
300
|
+
"rgba(255, 18, 18, 0.8)"
|
|
301
|
+
],
|
|
302
|
+
"rose-pine": [
|
|
303
|
+
"#eb6f9280",
|
|
304
|
+
"#31748f80",
|
|
305
|
+
"#f6c17780",
|
|
306
|
+
"#9ccfd880",
|
|
307
|
+
"#ebbcba80",
|
|
308
|
+
"#c4a7e780",
|
|
309
|
+
"rgba(255, 18, 18, 0.8)"
|
|
310
|
+
],
|
|
311
|
+
"rose-pine-dawn": [
|
|
312
|
+
"#b4637a80",
|
|
313
|
+
"#28698380",
|
|
314
|
+
"#ea9d3480",
|
|
315
|
+
"#56949f80",
|
|
316
|
+
"#d7827e80",
|
|
317
|
+
"#907aa980",
|
|
318
|
+
"rgba(255, 18, 18, 0.8)"
|
|
319
|
+
],
|
|
320
|
+
"rose-pine-moon": [
|
|
321
|
+
"#eb6f9280",
|
|
322
|
+
"#3e8fb080",
|
|
323
|
+
"#f6c17780",
|
|
324
|
+
"#9ccfd880",
|
|
325
|
+
"#ea9a9780",
|
|
326
|
+
"#c4a7e780",
|
|
327
|
+
"rgba(255, 18, 18, 0.8)"
|
|
328
|
+
],
|
|
329
|
+
"slack-dark": [
|
|
330
|
+
"#FFD700",
|
|
331
|
+
"#DA70D6",
|
|
332
|
+
"#179FFF",
|
|
333
|
+
"rgba(255, 18, 18, 0.8)"
|
|
334
|
+
],
|
|
335
|
+
"slack-ochin": [
|
|
336
|
+
"#0431FA",
|
|
337
|
+
"#319331",
|
|
338
|
+
"#7B3814",
|
|
339
|
+
"rgba(255, 18, 18, 0.8)"
|
|
340
|
+
],
|
|
341
|
+
"snazzy-light": [
|
|
342
|
+
"#0431FA",
|
|
343
|
+
"#319331",
|
|
344
|
+
"#7B3814",
|
|
345
|
+
"rgba(255, 18, 18, 0.8)"
|
|
346
|
+
],
|
|
347
|
+
"solarized-dark": [
|
|
348
|
+
"#cdcdcdff",
|
|
349
|
+
"#b58900ff",
|
|
350
|
+
"#d33682ff",
|
|
351
|
+
"rgba(255, 18, 18, 0.8)"
|
|
352
|
+
],
|
|
353
|
+
"solarized-light": [
|
|
354
|
+
"#0431FA",
|
|
355
|
+
"#319331",
|
|
356
|
+
"#7B3814",
|
|
357
|
+
"rgba(255, 18, 18, 0.8)"
|
|
358
|
+
],
|
|
359
|
+
"synthwave-84": [
|
|
360
|
+
"#FFD700",
|
|
361
|
+
"#DA70D6",
|
|
362
|
+
"#179FFF",
|
|
363
|
+
"rgba(255, 18, 18, 0.8)"
|
|
364
|
+
],
|
|
365
|
+
"tokyo-night": [
|
|
366
|
+
"#698cd6",
|
|
367
|
+
"#68b3de",
|
|
368
|
+
"#9a7ecc",
|
|
369
|
+
"#25aac2",
|
|
370
|
+
"#80a856",
|
|
371
|
+
"#c49a5a",
|
|
372
|
+
"#db4b4b"
|
|
373
|
+
],
|
|
374
|
+
"vesper": [
|
|
375
|
+
"#A0A0A0",
|
|
376
|
+
"#A0A0A0",
|
|
377
|
+
"#A0A0A0",
|
|
378
|
+
"#A0A0A0",
|
|
379
|
+
"#A0A0A0",
|
|
380
|
+
"#A0A0A0",
|
|
381
|
+
"#FF8080"
|
|
382
|
+
],
|
|
383
|
+
"vitesse-black": [
|
|
384
|
+
"#5eaab5",
|
|
385
|
+
"#4d9375",
|
|
386
|
+
"#d4976c",
|
|
387
|
+
"#d9739f",
|
|
388
|
+
"#e6cc77",
|
|
389
|
+
"#6394bf",
|
|
390
|
+
"rgba(255, 18, 18, 0.8)"
|
|
391
|
+
],
|
|
392
|
+
"vitesse-dark": [
|
|
393
|
+
"#5eaab5",
|
|
394
|
+
"#4d9375",
|
|
395
|
+
"#d4976c",
|
|
396
|
+
"#d9739f",
|
|
397
|
+
"#e6cc77",
|
|
398
|
+
"#6394bf",
|
|
399
|
+
"rgba(255, 18, 18, 0.8)"
|
|
400
|
+
],
|
|
401
|
+
"vitesse-light": [
|
|
402
|
+
"#2993a3",
|
|
403
|
+
"#1e754f",
|
|
404
|
+
"#a65e2b",
|
|
405
|
+
"#a13865",
|
|
406
|
+
"#bda437",
|
|
407
|
+
"#296aa3",
|
|
408
|
+
"rgba(255, 18, 18, 0.8)"
|
|
409
|
+
]
|
|
410
|
+
};
|
|
411
|
+
|
|
412
|
+
function getEmbeddedLang(token) {
|
|
413
|
+
return token.explanation?.[0].scopes.findLast((scope) => scope.scopeName.match(/^source.\w+$/))?.scopeName.split(".")[1];
|
|
414
|
+
}
|
|
415
|
+
function resolveConfig(config, lang) {
|
|
416
|
+
return {
|
|
417
|
+
themes: config.langs[lang]?.themes ?? config.themes,
|
|
418
|
+
bracketPairs: config.langs[lang]?.bracketPairs ?? config.bracketPairs
|
|
419
|
+
};
|
|
420
|
+
}
|
|
421
|
+
function escapeRegExp(string) {
|
|
422
|
+
return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
|
423
|
+
}
|
|
424
|
+
function shouldIgnoreToken(token, scopesAllowList, scopesDenyList) {
|
|
425
|
+
if (!token.explanation)
|
|
426
|
+
return true;
|
|
427
|
+
const commentLastIndex = token.explanation?.[0].scopes.findLastIndex(
|
|
428
|
+
(scope) => scope.scopeName.startsWith("comment.")
|
|
429
|
+
) ?? -1;
|
|
430
|
+
const stringLastIndex = token.explanation?.[0].scopes.findLastIndex(
|
|
431
|
+
(scope) => scope.scopeName.startsWith("string.")
|
|
432
|
+
) ?? -1;
|
|
433
|
+
const embeddedLastIndex = token.explanation?.[0].scopes.findLastIndex(
|
|
434
|
+
(scope) => scope.scopeName.startsWith("meta.embedded.") || scope.scopeName.startsWith("scope.embedded.") || scope.scopeName === "entity.name.type.instance.jsdoc" || scope.scopeName === "variable.other.jsdoc" || scope.scopeName === "meta.object.liquid"
|
|
435
|
+
) ?? -1;
|
|
436
|
+
if (commentLastIndex > embeddedLastIndex || stringLastIndex > embeddedLastIndex) {
|
|
437
|
+
return true;
|
|
438
|
+
}
|
|
439
|
+
if (scopesAllowList && scopesAllowList.length && !token.explanation?.some(
|
|
440
|
+
(explanation) => explanation.scopes.some(
|
|
441
|
+
(scope) => scopesAllowList.some(
|
|
442
|
+
(allowed) => scope.scopeName === allowed || scope.scopeName.startsWith(`${allowed}.`)
|
|
443
|
+
)
|
|
444
|
+
)
|
|
445
|
+
)) {
|
|
446
|
+
return true;
|
|
447
|
+
}
|
|
448
|
+
if (scopesDenyList && scopesDenyList.length && token.explanation?.some(
|
|
449
|
+
(explanation) => explanation.scopes.some(
|
|
450
|
+
(scope) => scopesDenyList.some(
|
|
451
|
+
(denied) => scope.scopeName === denied || scope.scopeName.startsWith(`${denied}.`)
|
|
452
|
+
)
|
|
453
|
+
)
|
|
454
|
+
)) {
|
|
455
|
+
return true;
|
|
456
|
+
}
|
|
457
|
+
return false;
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
function colorizeBracketTokens(tokens, config, shikiOptions, lang) {
|
|
461
|
+
const openerStack = [];
|
|
462
|
+
for (const token of tokens) {
|
|
463
|
+
const embeddedLang = getEmbeddedLang(token);
|
|
464
|
+
const resolvedConfig = resolveConfig(config, embeddedLang ?? lang);
|
|
465
|
+
const openers = new Set(
|
|
466
|
+
resolvedConfig.bracketPairs.map((pair) => pair.opener)
|
|
467
|
+
);
|
|
468
|
+
const closers = new Set(
|
|
469
|
+
resolvedConfig.bracketPairs.map((pair) => pair.closer)
|
|
470
|
+
);
|
|
471
|
+
const closerToOpener = Object.fromEntries(
|
|
472
|
+
resolvedConfig.bracketPairs.map((pair) => [pair.closer, pair.opener])
|
|
473
|
+
);
|
|
474
|
+
const pairDefinition = resolvedConfig.bracketPairs.find(
|
|
475
|
+
(pair) => pair.opener === token.content.trim() || pair.closer === token.content.trim()
|
|
476
|
+
);
|
|
477
|
+
if (!pairDefinition || shouldIgnoreToken(
|
|
478
|
+
token,
|
|
479
|
+
pairDefinition.scopesAllowList,
|
|
480
|
+
pairDefinition.scopesDenyList
|
|
481
|
+
)) {
|
|
482
|
+
continue;
|
|
483
|
+
}
|
|
484
|
+
if (openers.has(token.content.trim())) {
|
|
485
|
+
openerStack.push(token);
|
|
486
|
+
} else if (closers.has(token.content.trim())) {
|
|
487
|
+
const opener = openerStack.slice().reverse().find((t) => t.content.trim() === closerToOpener[token.content.trim()]);
|
|
488
|
+
if (opener) {
|
|
489
|
+
while (openerStack.at(-1) !== opener) {
|
|
490
|
+
const unexpected = openerStack.pop();
|
|
491
|
+
if (unexpected) {
|
|
492
|
+
assignColorToToken(
|
|
493
|
+
unexpected,
|
|
494
|
+
resolvedConfig.themes,
|
|
495
|
+
shikiOptions,
|
|
496
|
+
-1
|
|
497
|
+
);
|
|
498
|
+
}
|
|
499
|
+
}
|
|
500
|
+
openerStack.pop();
|
|
501
|
+
assignColorToToken(
|
|
502
|
+
token,
|
|
503
|
+
resolvedConfig.themes,
|
|
504
|
+
shikiOptions,
|
|
505
|
+
openerStack.length
|
|
506
|
+
);
|
|
507
|
+
assignColorToToken(
|
|
508
|
+
opener,
|
|
509
|
+
resolvedConfig.themes,
|
|
510
|
+
shikiOptions,
|
|
511
|
+
openerStack.length
|
|
512
|
+
);
|
|
513
|
+
} else {
|
|
514
|
+
assignColorToToken(token, resolvedConfig.themes, shikiOptions, -1);
|
|
515
|
+
}
|
|
516
|
+
}
|
|
517
|
+
}
|
|
518
|
+
for (const token of openerStack) {
|
|
519
|
+
assignColorToToken(
|
|
520
|
+
token,
|
|
521
|
+
resolveConfig(config, lang).themes,
|
|
522
|
+
shikiOptions,
|
|
523
|
+
-1
|
|
524
|
+
);
|
|
525
|
+
}
|
|
526
|
+
}
|
|
527
|
+
function assignColorToToken(token, themes, shikiOptions, level) {
|
|
528
|
+
if (isSingleTheme(shikiOptions)) {
|
|
529
|
+
const themeName = typeof shikiOptions.theme === "string" ? shikiOptions.theme : shikiOptions.theme.name;
|
|
530
|
+
token.color = getColor(themes, themeName, level);
|
|
531
|
+
} else {
|
|
532
|
+
const { defaultColor = "light", cssVariablePrefix = "--shiki-" } = shikiOptions;
|
|
533
|
+
const styles = [];
|
|
534
|
+
for (const [colorName, theme] of Object.entries(shikiOptions.themes)) {
|
|
535
|
+
const themeName = typeof theme === "string" ? theme : theme?.name;
|
|
536
|
+
const cssProperty = colorName === defaultColor ? "color" : `${cssVariablePrefix}${colorName}`;
|
|
537
|
+
styles.push(`${cssProperty}:${getColor(themes, themeName, level)}`);
|
|
538
|
+
}
|
|
539
|
+
token.htmlStyle = styles.join(";");
|
|
540
|
+
}
|
|
541
|
+
}
|
|
542
|
+
function isSingleTheme(shikiOptions) {
|
|
543
|
+
return "theme" in shikiOptions;
|
|
544
|
+
}
|
|
545
|
+
const DEFAULT_BRACKETS_COLORS = [
|
|
546
|
+
"#FFD700",
|
|
547
|
+
"#DA70D6",
|
|
548
|
+
"#179FFF",
|
|
549
|
+
"rgba(255, 18, 18, 0.8)"
|
|
550
|
+
];
|
|
551
|
+
function getColor(themes, themeName, level) {
|
|
552
|
+
const colors = themeName == null ? DEFAULT_BRACKETS_COLORS : themes[themeName] ?? builtInThemes[themeName] ?? DEFAULT_BRACKETS_COLORS;
|
|
553
|
+
const isUnexpected = level === -1;
|
|
554
|
+
if (isUnexpected) {
|
|
555
|
+
return colors[colors.length - 1];
|
|
556
|
+
} else {
|
|
557
|
+
return colors[level % (colors.length - 1)];
|
|
558
|
+
}
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
function splitBracketTokens(rawToken, config, lang) {
|
|
562
|
+
const embeddedLang = getEmbeddedLang(rawToken);
|
|
563
|
+
const resolvedConfig = resolveConfig(config, embeddedLang ?? lang);
|
|
564
|
+
if (resolvedConfig.bracketPairs.length === 0 || shouldIgnoreToken(rawToken)) {
|
|
565
|
+
return [rawToken];
|
|
566
|
+
}
|
|
567
|
+
const bracketsRegExp = new RegExp(
|
|
568
|
+
resolvedConfig.bracketPairs.flatMap((pair) => [pair.opener, pair.closer]).sort((a, b) => b.length - a.length).map(escapeRegExp).join("|")
|
|
569
|
+
);
|
|
570
|
+
const tokens = [rawToken];
|
|
571
|
+
while (true) {
|
|
572
|
+
const token = tokens.pop();
|
|
573
|
+
if (!token)
|
|
574
|
+
break;
|
|
575
|
+
const match = token?.content.match(bracketsRegExp);
|
|
576
|
+
if (!match) {
|
|
577
|
+
tokens.push(token);
|
|
578
|
+
break;
|
|
579
|
+
}
|
|
580
|
+
const matchIndex = match.index ?? 0;
|
|
581
|
+
if (matchIndex > 0) {
|
|
582
|
+
tokens.push({
|
|
583
|
+
...token,
|
|
584
|
+
content: token.content.substring(0, matchIndex)
|
|
585
|
+
});
|
|
586
|
+
}
|
|
587
|
+
tokens.push({
|
|
588
|
+
...token,
|
|
589
|
+
content: match[0],
|
|
590
|
+
offset: token.offset + matchIndex
|
|
591
|
+
});
|
|
592
|
+
if (matchIndex + match[0].length < token.content.length) {
|
|
593
|
+
tokens.push({
|
|
594
|
+
...token,
|
|
595
|
+
content: token.content.substring(matchIndex + match[0].length),
|
|
596
|
+
offset: token.offset + matchIndex + match[0].length
|
|
597
|
+
});
|
|
598
|
+
} else {
|
|
599
|
+
break;
|
|
600
|
+
}
|
|
601
|
+
}
|
|
602
|
+
const explanations = rawToken.explanation ?? [];
|
|
603
|
+
let currentExplanationStart = 0;
|
|
604
|
+
const explanationsWithStartEnd = (explanations ?? []).map(
|
|
605
|
+
(explanation, i) => {
|
|
606
|
+
const start = currentExplanationStart;
|
|
607
|
+
let length = explanation.content.length;
|
|
608
|
+
if (explanations.length === 1) {
|
|
609
|
+
length = rawToken.content.length;
|
|
610
|
+
} else if (i === 0) {
|
|
611
|
+
length = (rawToken.content.match(/^\s*/)?.[0].length ?? 0) + explanation.content.trimStart().length;
|
|
612
|
+
} else if (i === explanations.length - 1) {
|
|
613
|
+
length = explanation.content.trimEnd().length + (rawToken.content.match(/\s*$/)?.[0].length ?? 0);
|
|
614
|
+
}
|
|
615
|
+
currentExplanationStart += length;
|
|
616
|
+
return {
|
|
617
|
+
...explanation,
|
|
618
|
+
start,
|
|
619
|
+
end: start + length - 1
|
|
620
|
+
};
|
|
621
|
+
}
|
|
622
|
+
);
|
|
623
|
+
for (const token of tokens) {
|
|
624
|
+
const tokenStart = token.offset - rawToken.offset;
|
|
625
|
+
const tokenEnd = tokenStart + token.content.length - 1;
|
|
626
|
+
const overlappingExplanations = explanationsWithStartEnd.filter(
|
|
627
|
+
(explanation) => (
|
|
628
|
+
// token start in explanation range
|
|
629
|
+
tokenStart >= explanation.start && tokenStart <= explanation.end || tokenEnd >= explanation.start && tokenEnd <= explanation.end || explanation.start >= tokenStart && explanation.start <= tokenEnd || explanation.end >= tokenStart && explanation.end <= tokenEnd
|
|
630
|
+
)
|
|
631
|
+
);
|
|
632
|
+
token.explanation = overlappingExplanations.map(
|
|
633
|
+
(exp, i) => explanations[i]
|
|
634
|
+
);
|
|
635
|
+
}
|
|
636
|
+
return tokens;
|
|
637
|
+
}
|
|
638
|
+
|
|
639
|
+
const jinjaLikeBracketPairs = [
|
|
640
|
+
{ opener: "[", closer: "]" },
|
|
641
|
+
{ opener: "{", closer: "}" },
|
|
642
|
+
{ opener: "(", closer: ")" },
|
|
643
|
+
{ opener: "{{", closer: "}}" },
|
|
644
|
+
{ opener: "{%", closer: "%}" }
|
|
645
|
+
];
|
|
646
|
+
function transformerColorizedBrackets(options = {}) {
|
|
647
|
+
const config = {
|
|
648
|
+
themes: options.themes ?? {},
|
|
649
|
+
bracketPairs: options.bracketPairs ?? [
|
|
650
|
+
{ opener: "[", closer: "]" },
|
|
651
|
+
{ opener: "{", closer: "}" },
|
|
652
|
+
{ opener: "(", closer: ")" },
|
|
653
|
+
{
|
|
654
|
+
opener: "<",
|
|
655
|
+
closer: ">",
|
|
656
|
+
scopesAllowList: [
|
|
657
|
+
"punctuation.definition.typeparameters.begin.ts",
|
|
658
|
+
"punctuation.definition.typeparameters.end.ts",
|
|
659
|
+
"entity.name.type.instance.jsdoc"
|
|
660
|
+
]
|
|
661
|
+
}
|
|
662
|
+
],
|
|
663
|
+
langs: {
|
|
664
|
+
html: { bracketPairs: [] },
|
|
665
|
+
jinja: { bracketPairs: jinjaLikeBracketPairs },
|
|
666
|
+
liquid: { bracketPairs: jinjaLikeBracketPairs },
|
|
667
|
+
...options.langs
|
|
668
|
+
},
|
|
669
|
+
explicitTrigger: options.explicitTrigger ?? false
|
|
670
|
+
};
|
|
671
|
+
const transformer = {
|
|
672
|
+
name: "colorizedBrackets",
|
|
673
|
+
preprocess(code, options2) {
|
|
674
|
+
if (!isEnabled(config, this.options.meta?.__raw)) {
|
|
675
|
+
return;
|
|
676
|
+
}
|
|
677
|
+
options2.includeExplanation || (options2.includeExplanation = "scopeName");
|
|
678
|
+
},
|
|
679
|
+
tokens: function transformTokens(tokens) {
|
|
680
|
+
if (!isEnabled(config, this.options.meta?.__raw)) {
|
|
681
|
+
return;
|
|
682
|
+
}
|
|
683
|
+
const lang = this.options.lang;
|
|
684
|
+
for (let lineIndex = 0; lineIndex < tokens.length; lineIndex++) {
|
|
685
|
+
const line = tokens[lineIndex];
|
|
686
|
+
const newLine = line.flatMap(
|
|
687
|
+
(token) => splitBracketTokens(token, config, lang)
|
|
688
|
+
);
|
|
689
|
+
tokens[lineIndex] = newLine;
|
|
690
|
+
}
|
|
691
|
+
colorizeBracketTokens(tokens.flat(), config, this.options, lang);
|
|
692
|
+
}
|
|
693
|
+
};
|
|
694
|
+
return transformer;
|
|
695
|
+
}
|
|
696
|
+
const EXPLICIT_TRIGGER_REGEX = /(^|\s)colorize-brackets($|\s)/;
|
|
697
|
+
function isEnabled(config, meta) {
|
|
698
|
+
return !config.explicitTrigger || meta?.match(EXPLICIT_TRIGGER_REGEX) != null;
|
|
699
|
+
}
|
|
700
|
+
|
|
701
|
+
export { transformerColorizedBrackets };
|
package/package.json
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@shikijs/colorized-brackets",
|
|
3
|
+
"type": "module",
|
|
4
|
+
"version": "1.23.0",
|
|
5
|
+
"description": "Collective of common transformers transformers for Shiki",
|
|
6
|
+
"author": "Michael Moore <mscottmoore@pm.me>",
|
|
7
|
+
"license": "MIT",
|
|
8
|
+
"homepage": "https://github.com/shikijs/shiki#readme",
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "git+https://github.com/shikijs/shiki.git",
|
|
12
|
+
"directory": "packages/colorized-brackets"
|
|
13
|
+
},
|
|
14
|
+
"bugs": "https://github.com/shikijs/shiki/issues",
|
|
15
|
+
"keywords": [
|
|
16
|
+
"shiki",
|
|
17
|
+
"@shikijs/colorized-brackets"
|
|
18
|
+
],
|
|
19
|
+
"sideEffects": false,
|
|
20
|
+
"exports": {
|
|
21
|
+
".": {
|
|
22
|
+
"types": "./dist/index.d.mts",
|
|
23
|
+
"default": "./dist/index.mjs"
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
"main": "./dist/index.mjs",
|
|
27
|
+
"module": "./dist/index.mjs",
|
|
28
|
+
"types": "./dist/index.d.mts",
|
|
29
|
+
"files": [
|
|
30
|
+
"dist"
|
|
31
|
+
],
|
|
32
|
+
"dependencies": {
|
|
33
|
+
"shiki": "1.23.0"
|
|
34
|
+
},
|
|
35
|
+
"scripts": {
|
|
36
|
+
"build": "unbuild",
|
|
37
|
+
"dev": "unbuild --stub",
|
|
38
|
+
"test": "vitest"
|
|
39
|
+
}
|
|
40
|
+
}
|