Stacks/lib/css/components/_stacks-code-blocks.less at 2a85582cbf8f0322829c33bb79e82c8b1a1e5f82 · StackExchange/Stacks · 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
124
125
pre.s-code-block {
    font-size: @fs-body1;
    font-family: @ff-mono;
    line-height: @lh-md;
    color: var(--highlight-color);
    background-color: var(--highlight-bg);
    border-radius: @br-md;
    margin: 0;
    padding: @su12;
    overflow: auto;

    @scrollbar-styles();
}

pre.s-code-block > code,
code[class*="language-"] {
    font-family: inherit;

    .hljs-subst {
        color: var(--highlight-color);
    }

    .hljs-comment {
        color: var(--highlight-comment);
    }

    .hljs-keyword,
    .hljs-selector-tag,
    .hljs-meta-keyword,
    .hljs-doctag,
    .hljs-section {
        color: var(--highlight-keyword);
    }

    .hljs-attr {
        color: var(--highlight-attribute);
    }

    .hljs-attribute {
        color: var(--highlight-symbol);
    }

    .hljs-name,
    .hljs-type,
    .hljs-number,
    .hljs-selector-id,
    .hljs-quote,
    .hljs-template-tag {
        color: var(--highlight-namespace);
    }

    .hljs-selector-class {
        color: var(--highlight-keyword);
    }

    .hljs-string,
    .hljs-regexp,
    .hljs-symbol,
    .hljs-variable,
    .hljs-template-variable,
    .hljs-link,
    .hljs-selector-attr {
        color: var(--highlight-variable);
    }

    .hljs-meta,
    .hljs-selector-pseudo {
        color: var(--highlight-keyword);
    }

    .hljs-built_in,
    .hljs-title,
    .hljs-literal {
        color: var(--highlight-literal);
    }

    .hljs-bullet,
    .hljs-code {
        color: var(--highlight-punctuation);
    }

    .hljs-meta-string {
        color: var(--highlight-variable);
    }

    .hljs-deletion {
        color: var(--highlight-deletion);
    }

    .hljs-addition {
        color: var(--highlight-addition);
    }

    .hljs-emphasis {
        font-style: italic;
    }

    .hljs-strong {
        font-weight: bold;
    }

    // TODO
    .hljs-class, .hljs-operator, .hljs-tag, .hljs-function, .hljs-params, .hljs-formula, .hljs-punctuation {
        color: inherit;
    }
}

pre.s-code-block .s-code-block--line-numbers {
    float: left;
    color: var(--black-300);
    text-align: right;
    border-width: 0;
    border-style: solid;
    border-color: var(--black-100);
    border-right-width: 1px;
    margin: -@su12;
    margin-right: @su12;
    padding: @su12;
    padding-right: @su6;
    background-color: var(--black-050);
}

#stacks-internals #darkmode('pre.s-code-block .s-code-block--line-numbers', {
    background-color: var(--black-025);
});