1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
/*** IMPORT ------------------------------------------- ***/
import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
import { EditorView } from "@codemirror/view";
import { tags as t } from "@lezer/highlight";
/*** EXPORT ------------------------------------------- ***/
const BG = "#fafafa";
const BORDER = "#e0e0e0";
const FG = "#24292e";
const GUTTER_BG = "#f3f3f3";
const GUTTER_FG = "#9ca3af";
const SELECTION = "#b3d4fc";
const base = EditorView.theme({
"&": {
backgroundColor: BG,
color: FG
},
"&.cm-focused": {
outline: "none"
},
".cm-activeLine": {
backgroundColor: "#f0f0f0"
},
".cm-activeLineGutter": {
backgroundColor: "transparent",
color: FG
},
".cm-content": {
caretColor: "#1f6feb"
},
".cm-cursor, .cm-dropCursor": {
borderLeftColor: "#1f6feb"
},
".cm-gutters": {
backgroundColor: GUTTER_BG,
border: "none",
borderRight: `1px solid ${BORDER}`,
color: GUTTER_FG
},
".cm-matchingBracket": {
backgroundColor: "#dbeafe",
outline: "1px solid #93c5fd"
},
".cm-selectionBackground, &.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
backgroundColor: SELECTION
}
}, { dark: false });
const highlight = HighlightStyle.define([
{ color: "#d73a49", tag: t.keyword },
{ color: "#6f42c1", tag: [t.name, t.deleted, t.character, t.macroName] },
{ color: "#6f42c1", tag: [t.propertyName] },
{ color: "#032f62", tag: [t.string, t.special(t.string)] },
{ color: "#005cc5", tag: [t.number, t.bool, t.null, t.atom] },
{ color: "#6a737d", fontStyle: "italic", tag: t.comment },
{ color: "#22863a", tag: [t.typeName, t.className] },
{ color: "#e36209", tag: [t.variableName, t.labelName] },
{ color: "#d73a49", tag: [t.operator, t.operatorKeyword] },
{ color: "#6a737d", tag: [t.meta, t.documentMeta] },
{ color: "#22863a", tag: [t.tagName] },
{ color: "#6f42c1", tag: [t.attributeName] },
{ color: "#e36209", tag: [t.heading] },
{ color: "#032f62", tag: [t.link] },
{ fontWeight: "bold", tag: [t.strong] },
{ fontStyle: "italic", tag: [t.emphasis] },
{ tag: t.strikethrough, textDecoration: "line-through" }
]);
export const lightTheme = [base, syntaxHighlighting(highlight)];
|