this repo has no description
1code {
2 font-family: "TX-02", monospace;
3 font-size: var(--medium-size);
4
5 padding: 3px 8px;
6 overflow-wrap: anywhere;
7
8 background-color: var(--palette0);
9 border-radius: 5px;
10}
11
12pre:has(code) {
13 font-family: "TX-02", monospace;
14 line-height: 1.4;
15
16 background-color: var(--palette0);
17 border-radius: 5px;
18
19 padding: 10px 15px;
20 overflow-y: auto;
21
22 code {
23 padding: unset;
24 border-radius: unset;
25 }
26}
27
28.block:has(pre > code) {
29 pre {
30 margin: 0 16px;
31 }
32}
33
34figure:has(pre > code) {
35 margin: auto;
36
37 figcaption {
38 text-align: center;
39 }
40}
41
42@mixin style($color: --none, $font-weight: 400, $font-style: normal) {
43 color: var($color);
44 font-weight: $font-weight;
45 font-style: $font-style;
46
47 &::selection {
48 background-color: var($color);
49 color: var(--selection-foreground);
50 }
51
52 &::-moz-selection {
53 background-color: var($color);
54 color: var(--selection-foreground);
55 }
56}
57
58// Syntax
59
60code > .variable {
61 // color: var(--fg);
62 @include style($color: --fg);
63}
64
65code > .variable_builtin {
66 // color: var(--syn-special2);
67 // font-style: italic;
68 @include style($color: --syn-special2, $font-style: italic);
69}
70
71code > .comment {
72 // color: var(--syn-comment);
73 @include style($color: --syn-comment, $font-style: italic);
74}
75
76code > .constant,
77code > .markup_math,
78code > .attribute {
79 // color: var(--syn-constant);
80 @include style($color: --syn-constant);
81}
82
83code > .string,
84code > .character,
85code > .markup_raw {
86 // color: var(--syn-string);
87 @include style($color: --syn-string);
88}
89
90code > .number,
91code > .float {
92 // color: var(--syn-number);
93 @include style($color: --syn-number);
94}
95
96code > .boolean {
97 // color: var(--syn-constant);
98 // font-weight: bold;
99 @include style($color: --syn-constant, $font-weight: bold);
100}
101
102code > .identifier {
103 // color: var(--syn-identifier);
104 @include style($color: --syn-identifier);
105}
106
107code > .function,
108code > .function_call,
109code > .markup_heading {
110 // color: var(--syn-fun);
111 @include style($color: --syn-fun);
112}
113
114code > .statement {
115 // color: var(--syn-statement);
116 @include style($color: --syn-statement);
117}
118
119code > .operator {
120 // color: var(--syn-operator);
121 @include style($color: --syn-operator);
122}
123
124code > .keyword,
125code > .markup_environment {
126 // color: var(--syn-keyword);
127 @include style($color: --syn-keyword);
128}
129
130code > .preproc,
131code > .keyword_import {
132 // color: var(--syn-preproc);
133 @include style($color: --syn-preproc);
134}
135
136code > .type,
137code > .constructor.constant {
138 // color: var(--syn-type);
139 @include style($color: --syn-type);
140}
141
142code > .type_builtin,
143code > .function_builtin {
144 @include style($color: --syn-keyword);
145}
146
147code > .special {
148 // color: var(--syn-special1);
149 @include style($color: --syn-special1);
150}
151
152code > .delimiter {
153 // color: var(--syn-punct);
154 @include style($color: --syn-punct);
155}
156
157code > .underlined {
158 // color: var(--syn-special1);
159 text-decoration: underline;
160 @include style($color: --syn-special1);
161}
162
163code > .bold {
164 // font-weight: bold;
165 @include style($font-weight: bold);
166}
167
168code > .italic {
169 // font-style: italic;
170 @include style($font-style: italic);
171}
172
173code > .error {
174 // color: var(--diag-error);
175 @include style($color: --diag-error);
176}
177
178code > .todo {
179 // color: var(--fg-reverse);
180 background-color: var(--diag-info);
181 // font-weight: bold;
182 @include style($color: --fg-reverse, $font-weight: bold);
183}
184
185// Treesitter
186
187code > .variable_parameter {
188 // color: var(--syn-parameter);
189 @include style($color: --syn-parameter);
190}
191
192code > .variable_member,
193code > .property,
194code > .tag_attribute {
195 // color: var(--syn-identifier);
196 @include style($color: --syn-identifier);
197}
198
199code > .string_regexp {
200 // color: var(--syn-regex);
201 @include style($color: --syn-regex);
202}
203
204code > .string_escape {
205 // color: var(--syn-regex);
206 // font-weight: bold;
207 @include style($color: --syn-regex, $font-weight: bold);
208}
209
210code > .string_special_symbol {
211 // color: var(--syn-identifier);
212 @include style($color: --syn-identifier);
213}
214
215code > .string_special_url,
216code > .markup_link_url {
217 // color: var(--syn-special1);
218 text-decoration: wavy;
219 @include style($color: --syn-special1);
220}
221
222code > .constructor {
223 // color: var(--syn-special1);
224 @include style($color: --syn-special1);
225}
226
227code > .keyword_operator {
228 // color: var(--syn-operator);
229 // font-weight: bold;
230 @include style($color: --syn-operator, $font-weight: bold);
231}
232
233code > .keyword_modifier,
234code > .keyword_function,
235code > .keyword_type {
236 @include style($color: --syn-keyword, $font-style: italic);
237}
238
239code > .keyword_return {
240 @include style($color: --syn-special3, $font-style: italic);
241}
242
243code > .keyword_conditional {
244 @include style($color: --syn-keyword, $font-style: italic);
245}
246
247code > .keyword_exception {
248 @include style($color: --syn-special3, $font-weight: bold);
249}
250
251code > .punctuation_delimiter,
252code > .punctuation_bracket,
253code > .tag_delimiter {
254 @include style($color: --syn-punct);
255}
256
257code > .punctuation_special {
258 @include style($color: --syn-special1);
259}
260
261code > .comment_error {
262 background-color: var(--diag-error);
263 @include style($color: --fg, $font-weight: bold);
264}
265
266code > .comment_warning {
267 background-color: var(--diag-warning);
268 @include style($color: --fg, $font-weight: bold);
269}
270
271code > .comment_note {
272 color: var(--fg);
273 background-color: var(--diag-hint);
274 font-weight: bold;
275 @include style($color: --syn-constant);
276}
277
278code > .markup_strong {
279 @include style($font-weight: bold);
280}
281
282code > .markup_italic {
283 @include style($font-style: italic);
284}
285
286code > .markup_strikethrough {
287 text-decoration: line-through;
288}
289
290code > .markup_quote {
291 @include style($color: --syn-parameter);
292}
293
294code > .diff_plus {
295 // color: var(--vcs-added);
296 @include style($color: --syn-added);
297}
298
299code > .diff_minus {
300 @include style($color: --syn-removed);
301}
302
303code > .diff_delta {
304 @include style($color: --syn-changed);
305}