improved syntax highlighting
mellbacon committed
Jan 1, 2023 at 12:27 UTC
6a1cd5a6661aa215b45614c57784eefd947ad8eb
2 files changed
+125
-10
src/components/Editor/scripts/DefaultTheme.ts
+87
-10
@@ -2,7 +2,6 @@ import { EditorView } from "@codemirror/view";
2
import type { Extension } from "@codemirror/state";
3
import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
4
import { tags as t } from "@lezer/highlight";
5
-import { font } from "../../../config/config";
5
6
const bg = "#1c1c1c",
7
cl = "#282a2e",
@@ -18,7 +17,7 @@ const bg = "#1c1c1c",
17
const defaultTheme = EditorView.theme(
18
{
19
"*": {
21
- fontFamily: `"${font}", monospace`
20
+ fontFamily: `"Ubuntu Mono", monospace`
21
},
22
23
"&": {
@@ -107,17 +106,38 @@ const defaultTheme = EditorView.theme(
106
107
const defaultHighlightStyle = HighlightStyle.define([
108
{
110
- tag: [t.keyword, t.typeName],
111
- color: "#7db7f3" // blue
109
+ tag: [t.typeName, t.namespace],
110
+ class: "type"
111
+ },
112
+ {
113
+ tag: t.keyword,
114
+ class: "keyword"
115
+ },
116
+ {
117
+ tag: t.function(t.variableName),
118
+ class: "variable"
119
+ },
120
+ {
121
+ tag: [t.string, t.deleted],
122
+ class: "string"
123
+ },
124
+ {
125
+ tag: [t.inserted],
126
+ class: "literal"
127
+ },
128
+ {
129
+ tag: [t.labelName],
130
+ class: "atom"
131
},
132
133
{
115
- tag: [t.deleted, t.character, t.propertyName, t.macroName],
116
- color: "#cc8c66" // orange
134
+ tag: [ t.character, t.propertyName, t.macroName],
135
+ color: "#cc8c66", // orange
136
+ class: "test"
137
},
138
139
{
120
- tag: [t.function(t.variableName), t.labelName],
140
+ tag: [t.labelName],
141
color: blue
142
},
143
@@ -139,7 +159,6 @@ const defaultHighlightStyle = HighlightStyle.define([
159
t.annotation,
160
t.modifier,
161
t.self,
142
- t.namespace
162
],
163
color: purple
164
},
@@ -195,7 +214,7 @@ const defaultHighlightStyle = HighlightStyle.define([
214
},
215
216
{
198
- tag: [t.processingInstruction, t.string, t.inserted],
217
+ tag: [t.processingInstruction],
218
color: "#df8cc9" // pink
219
},
220
@@ -205,4 +224,62 @@ const defaultHighlightStyle = HighlightStyle.define([
224
}
225
]);
226
208
-export const default_theme: Extension = [defaultTheme, syntaxHighlighting(defaultHighlightStyle)];
\ No newline at end of file
227
+const test = HighlightStyle.define([
228
+ { tag: t.meta, class: "meta" },
229
+ { tag: t.link, class: "link" },
230
+ { tag: t.heading, class: "heading" },
231
+ { tag: t.emphasis, class: "emphasis" },
232
+ { tag: t.strong, class: "strong" },
233
+ { tag: t.strikethrough, class: "strikethrough" },
234
+ { tag: t.keyword, class: "keyword" },
235
+ {
236
+ tag: [
237
+ t.atom,
238
+ t.bool,
239
+ t.url,
240
+ t.contentSeparator,
241
+ t.labelName,
242
+ ],
243
+ class: "atom",
244
+ },
245
+ { tag: [t.literal, t.inserted], class: "literal" },
246
+ { tag: [t.string, t.deleted], class: "string" },
247
+ {
248
+ tag: [
249
+ t.regexp,
250
+ t.escape,
251
+ t.special(t.string),
252
+ ],
253
+ class: "regex",
254
+ },
255
+ {
256
+ tag: t.definition(t.variableName),
257
+ class: "variable",
258
+ },
259
+ { tag: [t.typeName], class: "type" },
260
+ { tag: t.className, class: "class" },
261
+ {
262
+ tag: [t.special(t.variableName), t.macroName, t.character],
263
+ class: "macro",
264
+ },
265
+ {
266
+ tag: t.definition(t.propertyName),
267
+ class: "property",
268
+ },
269
+ { tag: t.comment, class: "comment" },
270
+ { tag: t.invalid, class: "invalid" },
271
+ { tag: t.bracket, class: "bracket" },
272
+ { tag: t.function(t.name), class: "functionCall" },
273
+ { tag: t.namespace, class: "namespace" },
274
+ {
275
+ tag: [t.processingInstruction],
276
+ color: "#df8cc9" // pink
277
+ },
278
+ {
279
+ tag: t.propertyName,
280
+ class: "propertyName"
281
+ }
282
+ ])
283
+
284
+
285
+export const default_theme: Extension = [defaultTheme, syntaxHighlighting(test)];
\ No newline at end of file
src/components/Editor/syntaxhighlighting.scss
new
+38
@@ -0,0 +1,38 @@
1
+.cm-scroller {
2
+ font-family: "Consolas", 'Courier New', monospace !important;
3
+}
4
+.cm-editor {
5
+ .literal {
6
+ color: #bd93f9
7
+ }
8
+ .string {
9
+ color: #64b84c
10
+ }
11
+ .variable {
12
+ color: #e7e7e7;
13
+ }
14
+ .class, .type {
15
+ color: #f1c461;
16
+ }
17
+ .property {
18
+ color: #f8f8f8;
19
+ }
20
+ .comment {
21
+ color: #969896;
22
+ }
23
+ .keyword {
24
+ color: #de8cee;
25
+ }
26
+ .functionCall, .propertyName {
27
+ color: #82aaff;
28
+ }
29
+ .atom {
30
+ color: #ff7b53;
31
+ }
32
+ .macro {
33
+ color: #cc8c66;
34
+ }
35
+ .meta, .link, .heading, .emphasis, .strong, .strikethrough, .regex, .invalid, .bracket {
36
+
37
+ }
38
+}