@wsxjs/wsx-marked-components 0.0.23 → 0.0.24
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/dist/index.cjs +9 -1
- package/dist/index.js +3828 -935
- package/package.json +7 -5
- package/src/Code.css +529 -16
- package/src/Code.wsx +190 -3
- package/src/Markdown.wsx +11 -1
- package/src/index.ts +3 -0
- package/src/prism-wsx.ts +65 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wsxjs/wsx-marked-components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.24",
|
|
4
4
|
"description": "Markdown rendering components built with WSXJS for marked library",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -19,18 +19,20 @@
|
|
|
19
19
|
],
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"marked": "^12.0.0",
|
|
22
|
-
"
|
|
23
|
-
"@wsxjs/wsx-logger": "0.0.
|
|
22
|
+
"prismjs": "^1.30.0",
|
|
23
|
+
"@wsxjs/wsx-logger": "0.0.24",
|
|
24
|
+
"@wsxjs/wsx-core": "0.0.24"
|
|
24
25
|
},
|
|
25
26
|
"devDependencies": {
|
|
27
|
+
"@types/prismjs": "^1.26.5",
|
|
26
28
|
"@typescript-eslint/eslint-plugin": "^8.37.0",
|
|
27
29
|
"@typescript-eslint/parser": "^8.37.0",
|
|
28
30
|
"eslint": "^9.31.0",
|
|
29
31
|
"tsup": "^8.0.0",
|
|
30
32
|
"typescript": "^5.0.0",
|
|
31
33
|
"vite": "^5.4.19",
|
|
32
|
-
"@wsxjs/eslint-plugin-wsx": "0.0.
|
|
33
|
-
"@wsxjs/wsx-vite-plugin": "0.0.
|
|
34
|
+
"@wsxjs/eslint-plugin-wsx": "0.0.24",
|
|
35
|
+
"@wsxjs/wsx-vite-plugin": "0.0.24"
|
|
34
36
|
},
|
|
35
37
|
"keywords": [
|
|
36
38
|
"wsx",
|
package/src/Code.css
CHANGED
|
@@ -1,33 +1,546 @@
|
|
|
1
|
-
/* WSX Marked Code Component Styles
|
|
1
|
+
/* WSX Marked Code Component Styles
|
|
2
|
+
* Following wsxjs site design system
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
/* ===== Container ===== */
|
|
2
6
|
wsx-marked-code {
|
|
3
7
|
display: block;
|
|
8
|
+
width: 100%;
|
|
4
9
|
margin: 1rem 0;
|
|
10
|
+
position: relative;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.code-container {
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-direction: column;
|
|
16
|
+
width: 100%;
|
|
17
|
+
background: var(--bg-secondary, #fde8d1);
|
|
18
|
+
border-radius: 12px;
|
|
19
|
+
overflow: hidden;
|
|
20
|
+
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
|
|
21
|
+
border: 1px solid var(--border-color, #fed7aa);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* ===== Language Label ===== */
|
|
25
|
+
wsx-marked-code .language-label {
|
|
26
|
+
display: block;
|
|
27
|
+
padding: 0.75rem 1.5rem;
|
|
28
|
+
background: var(--bg-primary, #fef2e5);
|
|
29
|
+
border-bottom: 1px solid var(--border-color, #fed7aa);
|
|
30
|
+
color: var(--text-primary, #2c3e50);
|
|
31
|
+
font-weight: 600;
|
|
32
|
+
font-size: 0.9rem;
|
|
33
|
+
text-transform: uppercase;
|
|
34
|
+
letter-spacing: 0.5px;
|
|
5
35
|
}
|
|
6
36
|
|
|
37
|
+
/* ===== Pre/Code Block ===== */
|
|
7
38
|
wsx-marked-code pre {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
font-family: "
|
|
39
|
+
padding: 1.5rem;
|
|
40
|
+
margin: 0;
|
|
41
|
+
/* Light mode default - matches site theme */
|
|
42
|
+
background: var(--bg-primary, #fef2e5);
|
|
43
|
+
color: var(--text-primary, #2c3e50);
|
|
44
|
+
font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
|
|
14
45
|
font-size: 0.9rem;
|
|
15
|
-
line-height: 1.
|
|
46
|
+
line-height: 1.6;
|
|
47
|
+
overflow-x: auto;
|
|
48
|
+
position: relative;
|
|
16
49
|
}
|
|
17
50
|
|
|
18
51
|
wsx-marked-code code {
|
|
52
|
+
display: block;
|
|
19
53
|
background: transparent;
|
|
20
54
|
padding: 0;
|
|
21
55
|
border: none;
|
|
22
56
|
font-family: inherit;
|
|
57
|
+
font-size: inherit;
|
|
58
|
+
white-space: pre;
|
|
59
|
+
word-wrap: normal;
|
|
60
|
+
word-break: normal;
|
|
61
|
+
tab-size: 4;
|
|
62
|
+
-moz-tab-size: 4;
|
|
63
|
+
-o-tab-size: 4;
|
|
23
64
|
}
|
|
24
65
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
66
|
+
/* ===== Dark Mode ===== */
|
|
67
|
+
@media (prefers-color-scheme: dark) {
|
|
68
|
+
.code-container {
|
|
69
|
+
background: var(--bg-secondary, #2d2d2d);
|
|
70
|
+
border-color: var(--border-color, #404040);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
wsx-marked-code .language-label {
|
|
74
|
+
background: var(--bg-primary, #1a1a1a);
|
|
75
|
+
border-color: var(--border-color, #404040);
|
|
76
|
+
color: var(--text-primary, #ffffff);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
wsx-marked-code pre {
|
|
80
|
+
background: #2d2d2d;
|
|
81
|
+
color: #f8f8f2;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* ===== Light Mode (explicit class) ===== */
|
|
86
|
+
/* Override prefers-color-scheme when .light class is present */
|
|
87
|
+
/* Using site theme colors for consistency */
|
|
88
|
+
.light .code-container,
|
|
89
|
+
[data-theme="light"] .code-container {
|
|
90
|
+
background: var(--bg-secondary, #fde8d1);
|
|
91
|
+
border-color: var(--border-color, #fed7aa);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.light wsx-marked-code .language-label,
|
|
95
|
+
[data-theme="light"] wsx-marked-code .language-label {
|
|
96
|
+
background: var(--bg-primary, #fef2e5);
|
|
97
|
+
border-color: var(--border-color, #fed7aa);
|
|
98
|
+
color: var(--text-primary, #2c3e50);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.light wsx-marked-code pre,
|
|
102
|
+
[data-theme="light"] wsx-marked-code pre {
|
|
103
|
+
background: var(--bg-primary, #fef2e5);
|
|
104
|
+
color: var(--text-primary, #2c3e50);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/* ===== Dark Mode (explicit class) ===== */
|
|
108
|
+
[data-theme="dark"] .code-container,
|
|
109
|
+
.dark .code-container {
|
|
110
|
+
background: var(--bg-secondary, #2d2d2d);
|
|
111
|
+
border-color: var(--border-color, #404040);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
[data-theme="dark"] wsx-marked-code .language-label,
|
|
115
|
+
.dark wsx-marked-code .language-label {
|
|
116
|
+
background: var(--bg-primary, #1a1a1a);
|
|
117
|
+
border-color: var(--border-color, #404040);
|
|
118
|
+
color: var(--text-primary, #ffffff);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
[data-theme="dark"] wsx-marked-code pre,
|
|
122
|
+
.dark wsx-marked-code pre {
|
|
123
|
+
background: #2d2d2d;
|
|
124
|
+
color: #f8f8f2;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/* ===== Syntax Highlighting (Light Mode - explicit class) ===== */
|
|
128
|
+
/* WCAG AA compliant contrast ratios (4.5:1+) against #f3f4f6 background */
|
|
129
|
+
/* Using darker, more saturated colors for better visibility */
|
|
130
|
+
|
|
131
|
+
.light wsx-marked-code code[class*="language-"],
|
|
132
|
+
[data-theme="light"] wsx-marked-code code[class*="language-"] {
|
|
133
|
+
background: transparent;
|
|
134
|
+
color: #1f2937; /* Dark gray text - high contrast */
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.light wsx-marked-code .token.comment,
|
|
138
|
+
.light wsx-marked-code .token.prolog,
|
|
139
|
+
.light wsx-marked-code .token.doctype,
|
|
140
|
+
.light wsx-marked-code .token.cdata,
|
|
141
|
+
[data-theme="light"] wsx-marked-code .token.comment,
|
|
142
|
+
[data-theme="light"] wsx-marked-code .token.prolog,
|
|
143
|
+
[data-theme="light"] wsx-marked-code .token.doctype,
|
|
144
|
+
[data-theme="light"] wsx-marked-code .token.cdata {
|
|
145
|
+
color: #4b5563; /* Medium gray comments */
|
|
146
|
+
font-style: italic;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.light wsx-marked-code .token.punctuation,
|
|
150
|
+
[data-theme="light"] wsx-marked-code .token.punctuation {
|
|
151
|
+
color: #111827; /* Near black */
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.light wsx-marked-code .token.property,
|
|
155
|
+
.light wsx-marked-code .token.tag,
|
|
156
|
+
.light wsx-marked-code .token.boolean,
|
|
157
|
+
.light wsx-marked-code .token.number,
|
|
158
|
+
.light wsx-marked-code .token.constant,
|
|
159
|
+
.light wsx-marked-code .token.symbol,
|
|
160
|
+
.light wsx-marked-code .token.deleted,
|
|
161
|
+
[data-theme="light"] wsx-marked-code .token.property,
|
|
162
|
+
[data-theme="light"] wsx-marked-code .token.tag,
|
|
163
|
+
[data-theme="light"] wsx-marked-code .token.boolean,
|
|
164
|
+
[data-theme="light"] wsx-marked-code .token.number,
|
|
165
|
+
[data-theme="light"] wsx-marked-code .token.constant,
|
|
166
|
+
[data-theme="light"] wsx-marked-code .token.symbol,
|
|
167
|
+
[data-theme="light"] wsx-marked-code .token.deleted {
|
|
168
|
+
color: #be185d; /* Deep magenta/pink */
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.light wsx-marked-code .token.selector,
|
|
172
|
+
.light wsx-marked-code .token.attr-name,
|
|
173
|
+
.light wsx-marked-code .token.string,
|
|
174
|
+
.light wsx-marked-code .token.char,
|
|
175
|
+
.light wsx-marked-code .token.builtin,
|
|
176
|
+
.light wsx-marked-code .token.inserted,
|
|
177
|
+
[data-theme="light"] wsx-marked-code .token.selector,
|
|
178
|
+
[data-theme="light"] wsx-marked-code .token.attr-name,
|
|
179
|
+
[data-theme="light"] wsx-marked-code .token.string,
|
|
180
|
+
[data-theme="light"] wsx-marked-code .token.char,
|
|
181
|
+
[data-theme="light"] wsx-marked-code .token.builtin,
|
|
182
|
+
[data-theme="light"] wsx-marked-code .token.inserted {
|
|
183
|
+
color: #059669; /* Deep green for strings */
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.light wsx-marked-code .token.operator,
|
|
187
|
+
.light wsx-marked-code .token.entity,
|
|
188
|
+
.light wsx-marked-code .token.url,
|
|
189
|
+
.light wsx-marked-code .language-css .token.string,
|
|
190
|
+
.light wsx-marked-code .style .token.string,
|
|
191
|
+
[data-theme="light"] wsx-marked-code .token.operator,
|
|
192
|
+
[data-theme="light"] wsx-marked-code .token.entity,
|
|
193
|
+
[data-theme="light"] wsx-marked-code .token.url,
|
|
194
|
+
[data-theme="light"] wsx-marked-code .language-css .token.string,
|
|
195
|
+
[data-theme="light"] wsx-marked-code .style .token.string {
|
|
196
|
+
color: #111827; /* Near black */
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.light wsx-marked-code .token.atrule,
|
|
200
|
+
.light wsx-marked-code .token.attr-value,
|
|
201
|
+
.light wsx-marked-code .token.keyword,
|
|
202
|
+
[data-theme="light"] wsx-marked-code .token.atrule,
|
|
203
|
+
[data-theme="light"] wsx-marked-code .token.attr-value,
|
|
204
|
+
[data-theme="light"] wsx-marked-code .token.keyword {
|
|
205
|
+
color: #7c3aed; /* Deep purple for keywords */
|
|
206
|
+
font-weight: 600;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.light wsx-marked-code .token.function,
|
|
210
|
+
.light wsx-marked-code .token.class-name,
|
|
211
|
+
[data-theme="light"] wsx-marked-code .token.function,
|
|
212
|
+
[data-theme="light"] wsx-marked-code .token.class-name {
|
|
213
|
+
color: #0369a1; /* Deep blue for functions/classes */
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.light wsx-marked-code .token.regex,
|
|
217
|
+
.light wsx-marked-code .token.important,
|
|
218
|
+
.light wsx-marked-code .token.variable,
|
|
219
|
+
[data-theme="light"] wsx-marked-code .token.regex,
|
|
220
|
+
[data-theme="light"] wsx-marked-code .token.important,
|
|
221
|
+
[data-theme="light"] wsx-marked-code .token.variable {
|
|
222
|
+
color: #c2410c; /* Deep orange for variables */
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
/* WSX-specific highlighting (light mode - explicit class) */
|
|
226
|
+
.light wsx-marked-code .token.decorator,
|
|
227
|
+
.light wsx-marked-code .token.decorator-name,
|
|
228
|
+
[data-theme="light"] wsx-marked-code .token.decorator,
|
|
229
|
+
[data-theme="light"] wsx-marked-code .token.decorator-name {
|
|
230
|
+
color: #c2410c; /* Deep orange for decorators */
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.light wsx-marked-code .token.web-component,
|
|
234
|
+
.light wsx-marked-code .token.tag-name,
|
|
235
|
+
[data-theme="light"] wsx-marked-code .token.web-component,
|
|
236
|
+
[data-theme="light"] wsx-marked-code .token.tag-name {
|
|
237
|
+
color: #0369a1; /* Deep blue for web components */
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
/* ===== Syntax Highlighting (Light Mode - fallback for no class) ===== */
|
|
241
|
+
/* Default styles when neither .light nor .dark class is present */
|
|
242
|
+
|
|
243
|
+
wsx-marked-code code[class*="language-"] {
|
|
244
|
+
background: transparent;
|
|
245
|
+
color: #24292e;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
wsx-marked-code .token.comment,
|
|
249
|
+
wsx-marked-code .token.prolog,
|
|
250
|
+
wsx-marked-code .token.doctype,
|
|
251
|
+
wsx-marked-code .token.cdata {
|
|
252
|
+
color: #5a6268;
|
|
253
|
+
font-style: italic;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
wsx-marked-code .token.punctuation {
|
|
257
|
+
color: #1a1a1a;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
wsx-marked-code .token.property,
|
|
261
|
+
wsx-marked-code .token.tag,
|
|
262
|
+
wsx-marked-code .token.boolean,
|
|
263
|
+
wsx-marked-code .token.number,
|
|
264
|
+
wsx-marked-code .token.constant,
|
|
265
|
+
wsx-marked-code .token.symbol,
|
|
266
|
+
wsx-marked-code .token.deleted {
|
|
267
|
+
color: #c7254e;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
wsx-marked-code .token.selector,
|
|
271
|
+
wsx-marked-code .token.attr-name,
|
|
272
|
+
wsx-marked-code .token.string,
|
|
273
|
+
wsx-marked-code .token.char,
|
|
274
|
+
wsx-marked-code .token.builtin,
|
|
275
|
+
wsx-marked-code .token.inserted {
|
|
276
|
+
color: #005cc5;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
wsx-marked-code .token.operator,
|
|
280
|
+
wsx-marked-code .token.entity,
|
|
281
|
+
wsx-marked-code .token.url,
|
|
282
|
+
wsx-marked-code .language-css .token.string,
|
|
283
|
+
wsx-marked-code .style .token.string {
|
|
284
|
+
color: #1a1a1a;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
wsx-marked-code .token.atrule,
|
|
288
|
+
wsx-marked-code .token.attr-value,
|
|
289
|
+
wsx-marked-code .token.keyword {
|
|
290
|
+
color: #d73a49;
|
|
291
|
+
font-weight: 600;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
wsx-marked-code .token.function,
|
|
295
|
+
wsx-marked-code .token.class-name {
|
|
296
|
+
color: #6f42c1;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
wsx-marked-code .token.regex,
|
|
300
|
+
wsx-marked-code .token.important,
|
|
301
|
+
wsx-marked-code .token.variable {
|
|
302
|
+
color: #e36209;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
/* WSX-specific highlighting (light mode - fallback) */
|
|
306
|
+
wsx-marked-code .token.decorator,
|
|
307
|
+
wsx-marked-code .token.decorator-name {
|
|
308
|
+
color: #e36209;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
wsx-marked-code .token.web-component,
|
|
312
|
+
wsx-marked-code .token.tag-name {
|
|
313
|
+
color: #6f42c1;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
/* ===== Syntax Highlighting (Dark Mode - Monokai-inspired) ===== */
|
|
317
|
+
@media (prefers-color-scheme: dark) {
|
|
318
|
+
wsx-marked-code code[class*="language-"] {
|
|
319
|
+
color: #f8f8f2; /* Bright white default text */
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
wsx-marked-code .token.comment,
|
|
323
|
+
wsx-marked-code .token.prolog,
|
|
324
|
+
wsx-marked-code .token.doctype,
|
|
325
|
+
wsx-marked-code .token.cdata {
|
|
326
|
+
color: #75715e; /* Gray comments */
|
|
327
|
+
font-style: italic;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
wsx-marked-code .token.punctuation {
|
|
331
|
+
color: #f8f8f2; /* White punctuation */
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
wsx-marked-code .token.property,
|
|
335
|
+
wsx-marked-code .token.tag,
|
|
336
|
+
wsx-marked-code .token.boolean,
|
|
337
|
+
wsx-marked-code .token.number,
|
|
338
|
+
wsx-marked-code .token.constant,
|
|
339
|
+
wsx-marked-code .token.symbol,
|
|
340
|
+
wsx-marked-code .token.deleted {
|
|
341
|
+
color: #f92672; /* Pink/Red */
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
wsx-marked-code .token.selector,
|
|
345
|
+
wsx-marked-code .token.attr-name,
|
|
346
|
+
wsx-marked-code .token.string,
|
|
347
|
+
wsx-marked-code .token.char,
|
|
348
|
+
wsx-marked-code .token.builtin,
|
|
349
|
+
wsx-marked-code .token.inserted {
|
|
350
|
+
color: #e6db74; /* Yellow strings */
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
wsx-marked-code .token.operator,
|
|
354
|
+
wsx-marked-code .token.entity,
|
|
355
|
+
wsx-marked-code .token.url,
|
|
356
|
+
wsx-marked-code .language-css .token.string,
|
|
357
|
+
wsx-marked-code .style .token.string {
|
|
358
|
+
color: #f8f8f2; /* White operators */
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
wsx-marked-code .token.atrule,
|
|
362
|
+
wsx-marked-code .token.attr-value,
|
|
363
|
+
wsx-marked-code .token.keyword {
|
|
364
|
+
color: #66d9ef; /* Cyan keywords */
|
|
365
|
+
font-weight: 500;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
wsx-marked-code .token.function,
|
|
369
|
+
wsx-marked-code .token.class-name {
|
|
370
|
+
color: #a6e22e; /* Green functions */
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
wsx-marked-code .token.regex,
|
|
374
|
+
wsx-marked-code .token.important,
|
|
375
|
+
wsx-marked-code .token.variable {
|
|
376
|
+
color: #fd971f; /* Orange variables */
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
/* WSX-specific highlighting (dark mode) */
|
|
380
|
+
wsx-marked-code .token.decorator,
|
|
381
|
+
wsx-marked-code .token.decorator-name {
|
|
382
|
+
color: #fd971f; /* Orange decorators */
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
wsx-marked-code .token.web-component,
|
|
386
|
+
wsx-marked-code .token.tag-name {
|
|
387
|
+
color: #a6e22e; /* Green web components */
|
|
388
|
+
}
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
/* Dark mode via attribute */
|
|
392
|
+
[data-theme="dark"] wsx-marked-code code[class*="language-"],
|
|
393
|
+
.dark wsx-marked-code code[class*="language-"] {
|
|
394
|
+
color: #f8f8f2;
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
[data-theme="dark"] wsx-marked-code .token.comment,
|
|
398
|
+
[data-theme="dark"] wsx-marked-code .token.prolog,
|
|
399
|
+
[data-theme="dark"] wsx-marked-code .token.doctype,
|
|
400
|
+
[data-theme="dark"] wsx-marked-code .token.cdata,
|
|
401
|
+
.dark wsx-marked-code .token.comment,
|
|
402
|
+
.dark wsx-marked-code .token.prolog,
|
|
403
|
+
.dark wsx-marked-code .token.doctype,
|
|
404
|
+
.dark wsx-marked-code .token.cdata {
|
|
405
|
+
color: #75715e;
|
|
406
|
+
font-style: italic;
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
[data-theme="dark"] wsx-marked-code .token.punctuation,
|
|
410
|
+
.dark wsx-marked-code .token.punctuation {
|
|
411
|
+
color: #f8f8f2;
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
[data-theme="dark"] wsx-marked-code .token.property,
|
|
415
|
+
[data-theme="dark"] wsx-marked-code .token.tag,
|
|
416
|
+
[data-theme="dark"] wsx-marked-code .token.boolean,
|
|
417
|
+
[data-theme="dark"] wsx-marked-code .token.number,
|
|
418
|
+
[data-theme="dark"] wsx-marked-code .token.constant,
|
|
419
|
+
[data-theme="dark"] wsx-marked-code .token.symbol,
|
|
420
|
+
[data-theme="dark"] wsx-marked-code .token.deleted,
|
|
421
|
+
.dark wsx-marked-code .token.property,
|
|
422
|
+
.dark wsx-marked-code .token.tag,
|
|
423
|
+
.dark wsx-marked-code .token.boolean,
|
|
424
|
+
.dark wsx-marked-code .token.number,
|
|
425
|
+
.dark wsx-marked-code .token.constant,
|
|
426
|
+
.dark wsx-marked-code .token.symbol,
|
|
427
|
+
.dark wsx-marked-code .token.deleted {
|
|
428
|
+
color: #f92672;
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
[data-theme="dark"] wsx-marked-code .token.selector,
|
|
432
|
+
[data-theme="dark"] wsx-marked-code .token.attr-name,
|
|
433
|
+
[data-theme="dark"] wsx-marked-code .token.string,
|
|
434
|
+
[data-theme="dark"] wsx-marked-code .token.char,
|
|
435
|
+
[data-theme="dark"] wsx-marked-code .token.builtin,
|
|
436
|
+
[data-theme="dark"] wsx-marked-code .token.inserted,
|
|
437
|
+
.dark wsx-marked-code .token.selector,
|
|
438
|
+
.dark wsx-marked-code .token.attr-name,
|
|
439
|
+
.dark wsx-marked-code .token.string,
|
|
440
|
+
.dark wsx-marked-code .token.char,
|
|
441
|
+
.dark wsx-marked-code .token.builtin,
|
|
442
|
+
.dark wsx-marked-code .token.inserted {
|
|
443
|
+
color: #e6db74;
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
[data-theme="dark"] wsx-marked-code .token.operator,
|
|
447
|
+
[data-theme="dark"] wsx-marked-code .token.entity,
|
|
448
|
+
[data-theme="dark"] wsx-marked-code .token.url,
|
|
449
|
+
[data-theme="dark"] wsx-marked-code .language-css .token.string,
|
|
450
|
+
[data-theme="dark"] wsx-marked-code .style .token.string,
|
|
451
|
+
.dark wsx-marked-code .token.operator,
|
|
452
|
+
.dark wsx-marked-code .token.entity,
|
|
453
|
+
.dark wsx-marked-code .token.url,
|
|
454
|
+
.dark wsx-marked-code .language-css .token.string,
|
|
455
|
+
.dark wsx-marked-code .style .token.string {
|
|
456
|
+
color: #f8f8f2;
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
[data-theme="dark"] wsx-marked-code .token.atrule,
|
|
460
|
+
[data-theme="dark"] wsx-marked-code .token.attr-value,
|
|
461
|
+
[data-theme="dark"] wsx-marked-code .token.keyword,
|
|
462
|
+
.dark wsx-marked-code .token.atrule,
|
|
463
|
+
.dark wsx-marked-code .token.attr-value,
|
|
464
|
+
.dark wsx-marked-code .token.keyword {
|
|
465
|
+
color: #66d9ef;
|
|
466
|
+
font-weight: 500;
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
[data-theme="dark"] wsx-marked-code .token.function,
|
|
470
|
+
[data-theme="dark"] wsx-marked-code .token.class-name,
|
|
471
|
+
.dark wsx-marked-code .token.function,
|
|
472
|
+
.dark wsx-marked-code .token.class-name {
|
|
473
|
+
color: #a6e22e;
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
[data-theme="dark"] wsx-marked-code .token.regex,
|
|
477
|
+
[data-theme="dark"] wsx-marked-code .token.important,
|
|
478
|
+
[data-theme="dark"] wsx-marked-code .token.variable,
|
|
479
|
+
.dark wsx-marked-code .token.regex,
|
|
480
|
+
.dark wsx-marked-code .token.important,
|
|
481
|
+
.dark wsx-marked-code .token.variable {
|
|
482
|
+
color: #fd971f;
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
/* WSX-specific (dark theme via attribute) */
|
|
486
|
+
[data-theme="dark"] wsx-marked-code .token.decorator,
|
|
487
|
+
[data-theme="dark"] wsx-marked-code .token.decorator-name,
|
|
488
|
+
.dark wsx-marked-code .token.decorator,
|
|
489
|
+
.dark wsx-marked-code .token.decorator-name {
|
|
490
|
+
color: #fd971f;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
[data-theme="dark"] wsx-marked-code .token.web-component,
|
|
494
|
+
[data-theme="dark"] wsx-marked-code .token.tag-name,
|
|
495
|
+
.dark wsx-marked-code .token.web-component,
|
|
496
|
+
.dark wsx-marked-code .token.tag-name {
|
|
497
|
+
color: #a6e22e;
|
|
498
|
+
}
|
|
499
|
+
|
|
500
|
+
/* ===== Special Token Types ===== */
|
|
501
|
+
wsx-marked-code .token.namespace {
|
|
502
|
+
opacity: 0.7;
|
|
503
|
+
}
|
|
504
|
+
|
|
505
|
+
wsx-marked-code .token.important {
|
|
506
|
+
font-weight: bold;
|
|
507
|
+
}
|
|
508
|
+
|
|
509
|
+
wsx-marked-code .token.bold {
|
|
510
|
+
font-weight: bold;
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
wsx-marked-code .token.italic {
|
|
514
|
+
font-style: italic;
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
/* ===== Scrollbar Styling ===== */
|
|
518
|
+
wsx-marked-code pre::-webkit-scrollbar {
|
|
519
|
+
height: 8px;
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
wsx-marked-code pre::-webkit-scrollbar-track {
|
|
523
|
+
background: transparent;
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
wsx-marked-code pre::-webkit-scrollbar-thumb {
|
|
527
|
+
background: var(--border-color, #e5e7eb);
|
|
528
|
+
border-radius: 4px;
|
|
529
|
+
}
|
|
530
|
+
|
|
531
|
+
wsx-marked-code pre::-webkit-scrollbar-thumb:hover {
|
|
532
|
+
background: var(--text-secondary, #6b7280);
|
|
533
|
+
}
|
|
534
|
+
|
|
535
|
+
/* ===== Responsive Design ===== */
|
|
536
|
+
@media (max-width: 768px) {
|
|
537
|
+
wsx-marked-code .language-label {
|
|
538
|
+
padding: 0.5rem 1rem;
|
|
539
|
+
font-size: 0.8rem;
|
|
540
|
+
}
|
|
541
|
+
|
|
542
|
+
wsx-marked-code pre {
|
|
543
|
+
padding: 1rem;
|
|
544
|
+
font-size: 0.85rem;
|
|
545
|
+
}
|
|
33
546
|
}
|