UNPKG

4.18 kBCSSView Raw
1pre[class*="language-"],
2code[class*="language-"] {
3 color: #d4d4d4;
4 font-size: 13px;
5 text-shadow: none;
6 font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;
7 direction: ltr;
8 text-align: left;
9 white-space: pre;
10 word-spacing: normal;
11 word-break: normal;
12 line-height: 1.5;
13 -moz-tab-size: 4;
14 -o-tab-size: 4;
15 tab-size: 4;
16 -webkit-hyphens: none;
17 -moz-hyphens: none;
18 -ms-hyphens: none;
19 hyphens: none;
20}
21
22pre[class*="language-"]::selection,
23code[class*="language-"]::selection,
24pre[class*="language-"] *::selection,
25code[class*="language-"] *::selection {
26 text-shadow: none;
27 background: #264F78;
28}
29
30@media print {
31 pre[class*="language-"],
32 code[class*="language-"] {
33 text-shadow: none;
34 }
35}
36
37pre[class*="language-"] {
38 padding: 1em;
39 margin: .5em 0;
40 overflow: auto;
41 background: #1e1e1e;
42}
43
44:not(pre) > code[class*="language-"] {
45 padding: .1em .3em;
46 border-radius: .3em;
47 color: #db4c69;
48 background: #1e1e1e;
49}
50/*********************************************************
51* Tokens
52*/
53.namespace {
54 opacity: .7;
55}
56
57.token.doctype .token.doctype-tag {
58 color: #569CD6;
59}
60
61.token.doctype .token.name {
62 color: #9cdcfe;
63}
64
65.token.comment,
66.token.prolog {
67 color: #6a9955;
68}
69
70.token.punctuation,
71.language-html .language-css .token.punctuation,
72.language-html .language-javascript .token.punctuation {
73 color: #d4d4d4;
74}
75
76.token.property,
77.token.tag,
78.token.boolean,
79.token.number,
80.token.constant,
81.token.symbol,
82.token.inserted,
83.token.unit {
84 color: #b5cea8;
85}
86
87.token.selector,
88.token.attr-name,
89.token.string,
90.token.char,
91.token.builtin,
92.token.deleted {
93 color: #ce9178;
94}
95
96.language-css .token.string.url {
97 text-decoration: underline;
98}
99
100.token.operator,
101.token.entity {
102 color: #d4d4d4;
103}
104
105.token.operator.arrow {
106 color: #569CD6;
107}
108
109.token.atrule {
110 color: #ce9178;
111}
112
113.token.atrule .token.rule {
114 color: #c586c0;
115}
116
117.token.atrule .token.url {
118 color: #9cdcfe;
119}
120
121.token.atrule .token.url .token.function {
122 color: #dcdcaa;
123}
124
125.token.atrule .token.url .token.punctuation {
126 color: #d4d4d4;
127}
128
129.token.keyword {
130 color: #569CD6;
131}
132
133.token.keyword.module,
134.token.keyword.control-flow {
135 color: #c586c0;
136}
137
138.token.function,
139.token.function .token.maybe-class-name {
140 color: #dcdcaa;
141}
142
143.token.regex {
144 color: #d16969;
145}
146
147.token.important {
148 color: #569cd6;
149}
150
151.token.italic {
152 font-style: italic;
153}
154
155.token.constant {
156 color: #9cdcfe;
157}
158
159.token.class-name,
160.token.maybe-class-name {
161 color: #4ec9b0;
162}
163
164.token.console {
165 color: #9cdcfe;
166}
167
168.token.parameter {
169 color: #9cdcfe;
170}
171
172.token.interpolation {
173 color: #9cdcfe;
174}
175
176.token.punctuation.interpolation-punctuation {
177 color: #569cd6;
178}
179
180.token.boolean {
181 color: #569cd6;
182}
183
184.token.property,
185.token.variable,
186.token.imports .token.maybe-class-name,
187.token.exports .token.maybe-class-name {
188 color: #9cdcfe;
189}
190
191.token.selector {
192 color: #d7ba7d;
193}
194
195.token.escape {
196 color: #d7ba7d;
197}
198
199.token.tag {
200 color: #569cd6;
201}
202
203.token.tag .token.punctuation {
204 color: #808080;
205}
206
207.token.cdata {
208 color: #808080;
209}
210
211.token.attr-name {
212 color: #9cdcfe;
213}
214
215.token.attr-value,
216.token.attr-value .token.punctuation {
217 color: #ce9178;
218}
219
220.token.attr-value .token.punctuation.attr-equals {
221 color: #d4d4d4;
222}
223
224.token.entity {
225 color: #569cd6;
226}
227
228.token.namespace {
229 color: #4ec9b0;
230}
231/*********************************************************
232* Language Specific
233*/
234
235pre[class*="language-javascript"],
236code[class*="language-javascript"],
237pre[class*="language-jsx"],
238code[class*="language-jsx"],
239pre[class*="language-typescript"],
240code[class*="language-typescript"],
241pre[class*="language-tsx"],
242code[class*="language-tsx"] {
243 color: #9cdcfe;
244}
245
246pre[class*="language-css"],
247code[class*="language-css"] {
248 color: #ce9178;
249}
250
251pre[class*="language-html"],
252code[class*="language-html"] {
253 color: #d4d4d4;
254}
255
256.language-regex .token.anchor {
257 color: #dcdcaa;
258}
259
260.language-html .token.punctuation {
261 color: #808080;
262}
263/*********************************************************
264* Line highlighting
265*/
266pre[class*="language-"] > code[class*="language-"] {
267 position: relative;
268 z-index: 1;
269}
270
271.line-highlight.line-highlight {
272 background: #f7ebc6;
273 box-shadow: inset 5px 0 0 #f7d87c;
274 z-index: 0;
275}