code-highlighter/prettylights.css at main · thiagooak/code-highlighter · GitHub

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
/* based on https://github.com/andreruffert/syntax-highlight-element/blob/main/src/themes/prettylights.css */

@layer code-highlighter {
    code-highlighter {
        display: block;
        white-space: pre;
        word-spacing: normal;
        word-break: normal;
        word-wrap: normal;
        overflow: auto;
        tab-size: 2;
        hyphens: none;

        --prettylights-bg: light-dark(#f6f8fa, #151b23);
        --prettylights-fg: light-dark(#1f2328, #f0f6fc);
        --prettylights-comment: light-dark(#59636e, #9198a1);
        --prettylights-constant: light-dark(#0550ae, #79c0ff);
        --prettylights-constant-other-reference-link: light-dark(
            #0a3069,
            #a5d6ff
        );
        --prettylights-entity: light-dark(#6639ba, #d2a8ff);
        --prettylights-entity-tag: light-dark(#0550ae, #7ee787);
        --prettylights-keyword: light-dark(#cf222e, #ff7b72);
        --prettylights-bold: light-dark(#f0f6fc, #f0f6fc);
        --prettylights-deleted-bg: light-dark(#ffebe9, #67060c);
        --prettylights-deleted-text: light-dark(#82071e, #ffdcd7);
        --prettylights-heading: light-dark(#0550ae, #1f6feb);
        --prettylights-inserted-bg: light-dark(#dafbe1, #033a16);
        --prettylights-inserted-text: light-dark(#116329, #aff5b4);
        --prettylights-italic: light-dark(#f0f6fc, #f0f6fc);
        --prettylights-string: light-dark(#0a3069, #a5d6ff);
        --prettylights-string-regexp: light-dark(#116329, #7ee787);
        --prettylights-variable: light-dark(#953800, #ffa657);
        color-scheme: light dark;
        color: var(--prettylights-fg);
        background-color: var(--prettylights-bg);
        font-family:
            ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
            "Liberation Mono", "Courier New", monospace;
        line-height: 1.6;
    }
    ::highlight(atrule),
    ::highlight(number),
    ::highlight(punctuation) {
        color: var(--prettylights-fg);
    }
    ::highlight(namespace) {
        opacity: 0.7;
    }
    ::highlight(cdata),
    ::highlight(comment),
    ::highlight(doctype),
    ::highlight(prolog) {
        color: var(--prettylights-comment);
    }
    ::highlight(attr-name),
    ::highlight(builtin),
    ::highlight(char),
    ::highlight(constant),
    ::highlight(operator) {
        color: var(--prettylights-constant);
    }
    ::highlight(boolean),
    ::highlight(property),
    ::highlight(symbol),
    ::highlight(tag) {
        color: var(--prettylights-entity-tag);
    }
    ::highlight(class-name),
    ::highlight(entity),
    ::highlight(function),
    ::highlight(selector) {
        color: var(--prettylights-entity);
    }
    ::highlight(keyword),
    ::highlight(rule) {
        color: var(--prettylights-keyword);
    }
    ::highlight(attr-value),
    ::highlight(string) {
        color: var(--prettylights-string);
    }
    ::highlight(variable) {
        color: var(--prettylights-variable);
    }
    ::highlight(regex) {
        font-weight: 700;
        color: var(--prettylights-string-regexp);
    }
    ::highlight(italic) {
        font-style: italic;
        color: var(--prettylights-italic);
    }
    ::highlight(bold) {
        font-weight: 700;
        color: var(--prettylights-bold);
    }
    ::highlight(deleted) {
        color: var(--prettylights-deleted-text);
        background-color: var(--prettylights-deleted-bg);
    }
    ::highlight(inserted) {
        color: var(--prettylights-inserted-text);
        background-color: var(--prettylights-inserted-bg);
    }
    ::highlight(url) {
        text-decoration: underline;
        color: var(--prettylights-constant-other-reference-link);
    }
    ::highlight(important) {
        color: var(--prettylights-heading);
    }
    ::highlight(css-important) {
        color: var(--prettylights-keyword);
    }
    ::highlight(md-title) {
        color: var(--prettylights-heading);
    }
    ::highlight(md-list) {
        color: var(--prettylights-variable);
    }
}