Skip to content

Commit f82392e

Browse files
authored
refactor: tweaking syntaxt highlight further (#58)
* refactor: tweaking syntaxt highlight further * fix: misspelled a word
1 parent 8d9851e commit f82392e

File tree

1 file changed

+105
-71
lines changed

1 file changed

+105
-71
lines changed

assets/css/syntax.css

Lines changed: 105 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
11
@import "tailwindcss";
22
@source "hugo_stats.json";
33

4-
/*
5-
Generated using: hugo gen chromastyles --style=github-dark -- then modified toward's a11y-dark theme
6-
*/
4+
/* Generated using: hugo gen chromastyles --style=tokyonight-moon --omitEmpty */
5+
76
/* Background */
87
.bg {
98
@apply bg-zinc-800;
109
@apply text-neutral-50;
1110
}
12-
/* code -- this allows `code` to be var (--accent-color) while making text in a
13-
* ``` to not be the accent color ``` */
11+
12+
/* This exists to allow `code` to be var (--accent-color) and ``` to be theme color ``` */
1413
.chroma code[class^="language-"] {
1514
@apply text-neutral-50;
16-
/* Styles for code elements with language classes within .chroma containers */
1715
}
1816
/* PreWrapper */
1917
.chroma {
@@ -22,12 +20,13 @@ Generated using: hugo gen chromastyles --style=github-dark -- then modified towa
2220
}
2321
/* Error */
2422
.chroma .err {
25-
color: #f85149;
23+
@apply bg-zinc-800;
24+
color: #c53b53;
2625
}
2726
/* LineLink */
2827
.chroma .lnlinks {
2928
outline: none;
30-
@apply text-neutral-50;
29+
color: inherit;
3130
text-decoration: none;
3231
}
3332
/* LineTableTD */
@@ -46,13 +45,13 @@ Generated using: hugo gen chromastyles --style=github-dark -- then modified towa
4645
}
4746
/* LineHighlight */
4847
.chroma .hl {
49-
@apply bg-zinc-600;
48+
@apply bg-zinc-800;
5049
}
5150
/* LineNumbersTable */
5251
.chroma .lnt {
5352
margin-right: 0.4em;
5453
padding: 0 0.4em 0 0.4em;
55-
@apply text-neutral-50;
54+
color: inherit;
5655
white-space: pre;
5756
-webkit-user-select: none;
5857
user-select: none;
@@ -61,7 +60,7 @@ Generated using: hugo gen chromastyles --style=github-dark -- then modified towa
6160
.chroma .ln {
6261
margin-right: 0.4em;
6362
padding: 0 0.4em 0 0.4em;
64-
@apply text-neutral-50;
63+
color: inherit;
6564
white-space: pre;
6665
-webkit-user-select: none;
6766
user-select: none;
@@ -72,80 +71,98 @@ Generated using: hugo gen chromastyles --style=github-dark -- then modified towa
7271
}
7372
/* Keyword */
7473
.chroma .k {
75-
color: #abe338;
74+
/* @apply text-amber-500; */
75+
color: #00e0e0;
7676
}
7777
/* KeywordConstant */
7878
.chroma .kc {
79-
color: #abe338;
79+
@apply text-amber-500;
8080
}
8181
/* KeywordDeclaration */
8282
.chroma .kd {
83-
color: #abe338;
83+
/* @apply text-amber-500; */
84+
color: #00e0e0;
8485
}
8586
/* KeywordNamespace */
8687
.chroma .kn {
87-
color: #abe338;
88+
/* @apply text-amber-500; */
89+
color: #00e0e0;
8890
}
8991
/* KeywordPseudo */
9092
.chroma .kp {
91-
color: #abe338;
93+
@apply text-amber-500;
94+
/* color: #abe338; */
9295
}
9396
/* KeywordReserved */
9497
.chroma .kr {
95-
color: #abe338;
98+
@apply text-amber-500;
99+
/* color: #abe338; */
96100
}
97101
/* KeywordType */
98102
.chroma .kt {
99-
color: #abe338;
103+
@apply text-rose-400;
104+
/* color: #4fd6be; */
100105
}
101106
/* NameAttribute */
102107
.chroma .na {
103-
@apply text-neutral-50;
108+
color: #5e96ff;
109+
}
110+
/* NameBuiltin */
111+
.chroma .nb {
112+
color: #abe338;
113+
}
114+
/* NameBuiltinPseudo */
115+
.chroma .bp {
116+
color: #abe338;
104117
}
105118
/* NameClass */
106119
.chroma .nc {
107-
color: #FF8C38;
108-
font-weight: bold;
120+
color: #ff966c;
109121
}
110122
/* NameConstant */
111123
.chroma .no {
112-
color: #FF8C38;
113-
font-weight: bold;
124+
color: #ff966c;
114125
}
115126
/* NameDecorator */
116127
.chroma .nd {
117-
color: #FF8C38;
128+
color: #5e96ff;
118129
font-weight: bold;
119130
}
131+
/* NameEntity */
132+
.chroma .ni {
133+
color: #86e1fc;
134+
}
120135
/* NameException */
121136
.chroma .ne {
122-
color: #FF8C38;
123-
font-weight: bold;
137+
@apply text-amber-500;
124138
}
125139
/* NameFunction */
126140
.chroma .nf {
127-
color: #FF8C38;
128-
font-weight: bold;
129-
}
130-
/* NameOther */
131-
.chroma .nx {
132-
@apply text-neutral-100;
141+
color: #5e96ff;
133142
}
134-
/* NameTag */
135-
.chroma .nt {
136-
color: #FF8C38;
143+
/* NameFunctionMagic */
144+
.chroma .fm {
145+
color: #5e96ff;
137146
}
138-
/* Literal */
139-
.chroma .l {
147+
/* NameLabel */
148+
.chroma .nl {
140149
color: #abe338;
141150
}
142-
/* LiteralDate */
143-
.chroma .ld {
151+
/* NameNamespace */
152+
.chroma .nn {
153+
@apply text-amber-500;
154+
}
155+
/* NameProperty */
156+
.chroma .py {
157+
@apply text-amber-500;
158+
}
159+
/* NameTag */
160+
.chroma .nt {
144161
color: #abe338;
145162
}
146163
/* LiteralString */
147164
.chroma .s {
148-
color: #abe338;
165+
color: #ffd866;
149166
}
150167
/* LiteralStringAffix */
151168
.chroma .sa {
@@ -161,23 +178,23 @@ Generated using: hugo gen chromastyles --style=github-dark -- then modified towa
161178
}
162179
/* LiteralStringDelimiter */
163180
.chroma .dl {
164-
color: #abe338;
181+
color: #5e96ff;
165182
}
166183
/* LiteralStringDoc */
167184
.chroma .sd {
168-
color: #abe338;
185+
@apply text-gray-400;
169186
}
170187
/* LiteralStringDouble */
171188
.chroma .s2 {
172-
color: #abe338;
189+
color: #ffd866;
173190
}
174191
/* LiteralStringEscape */
175192
.chroma .se {
176-
color: #abe338;
193+
color: #5e96ff;
177194
}
178195
/* LiteralStringHeredoc */
179196
.chroma .sh {
180-
color: #abe338;
197+
@apply text-gray-400;
181198
}
182199
/* LiteralStringInterpol */
183200
.chroma .si {
@@ -189,111 +206,128 @@ Generated using: hugo gen chromastyles --style=github-dark -- then modified towa
189206
}
190207
/* LiteralStringRegex */
191208
.chroma .sr {
192-
color: #f5ab35;
209+
color: #86e1fc;
193210
}
194211
/* LiteralStringSingle */
195212
.chroma .s1 {
196-
color: #abe338;
213+
color: #ffd866;
197214
}
198215
/* LiteralStringSymbol */
199216
.chroma .ss {
200-
color: #f5ab35;
217+
color: #abe338;
201218
}
202219
/* LiteralNumber */
203220
.chroma .m {
204-
color: #f5ab35;
221+
@apply text-amber-500;
205222
}
206223
/* LiteralNumberBin */
207224
.chroma .mb {
208-
color: #f5ab35;
225+
@apply text-amber-500;
209226
}
210227
/* LiteralNumberFloat */
211228
.chroma .mf {
212-
color: #f5ab35;
229+
@apply text-amber-500;
213230
}
214231
/* LiteralNumberHex */
215232
.chroma .mh {
216-
color: #f5ab35;
233+
@apply text-amber-500;
217234
}
218235
/* LiteralNumberInteger */
219236
.chroma .mi {
220-
color: #f5ab35;
237+
@apply text-amber-500;
221238
}
222239
/* LiteralNumberIntegerLong */
223240
.chroma .il {
224-
color: #f5ab35;
241+
@apply text-amber-500;
225242
}
226243
/* LiteralNumberOct */
227244
.chroma .mo {
228-
color: #f5ab35;
245+
@apply text-amber-500;
229246
}
230247
/* Operator */
231248
.chroma .o {
232-
color: #abe338;
249+
@apply text-rose-400;
233250
font-weight: bold;
234251
}
235252
/* OperatorWord */
236253
.chroma .ow {
237-
color: #abe338;
254+
@apply text-rose-400;
255+
/* color: #abe338; */
238256
font-weight: bold;
239257
}
240258
/* Comment */
241259
.chroma .c {
242-
@apply text-neutral-200;
260+
@apply text-gray-400;
243261
font-style: italic;
244262
}
245263
/* CommentHashbang */
246264
.chroma .ch {
247-
@apply text-neutral-200;
265+
@apply text-gray-400;
248266
font-style: italic;
249267
}
250268
/* CommentMultiline */
251269
.chroma .cm {
252-
@apply text-neutral-200;
270+
@apply text-gray-400;
253271
font-style: italic;
254272
}
255273
/* CommentSingle */
256274
.chroma .c1 {
257-
@apply text-neutral-200;
275+
@apply text-gray-400;
258276
font-style: italic;
259277
}
260278
/* CommentSpecial */
261279
.chroma .cs {
262-
@apply text-neutral-200;
280+
@apply text-gray-400;
263281
font-style: italic;
264-
font-weight: bold;
265282
}
266283
/* CommentPreproc */
267284
.chroma .cp {
268-
@apply text-neutral-200;
285+
@apply text-gray-400;
269286
font-style: italic;
270-
font-weight: bold;
271287
}
272288
/* CommentPreprocFile */
273289
.chroma .cpf {
274-
@apply text-neutral-200;
290+
@apply text-gray-400;
275291
font-style: italic;
276292
font-weight: bold;
277293
}
278294
/* GenericDeleted */
279295
.chroma .gd {
280-
background-color: #490202;
281-
color: #ffa198;
296+
@apply bg-zinc-800;
297+
color: #c53b53;
282298
}
283299
/* GenericEmph */
284300
.chroma .ge {
285301
font-style: italic;
286302
}
303+
/* GenericError */
304+
.chroma .gr {
305+
color: #c53b53;
306+
}
307+
/* GenericHeading */
308+
.chroma .gh {
309+
@apply text-amber-500;
310+
font-weight: bold;
311+
}
287312
/* GenericInserted */
288313
.chroma .gi {
289-
background-color: #0f5323;
290-
color: #56d364;
314+
@apply bg-zinc-800;
315+
color: #abe338;
291316
}
292317
/* GenericStrong */
293318
.chroma .gs {
294319
font-weight: bold;
295320
}
296321
/* GenericSubheading */
297322
.chroma .gu {
298-
@apply text-neutral-200;
323+
@apply text-amber-500;
324+
font-weight: bold;
325+
}
326+
/* GenericTraceback */
327+
.chroma .gt {
328+
color: #c53b53;
329+
}
330+
/* GenericUnderline */
331+
.chroma .gl {
332+
text-decoration: underline;
299333
}

0 commit comments

Comments
 (0)