Skip to content

Commit 440c68a

Browse files
AslemammadAslemammad
authored
Update hello example's css (pmndrs#346)
* new css * format
1 parent b78b0e4 commit 440c68a

File tree

1 file changed

+162
-158
lines changed

1 file changed

+162
-158
lines changed

‎examples/hello/src/prism.css

+162-158
Original file line numberDiff line numberDiff line change
@@ -3,162 +3,166 @@
33
* Inspired by Visual Studio syntax coloring
44
*/
55

6-
code[class*="language-"],
7-
pre[class*="language-"] {
8-
color: #393A34;
9-
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
10-
direction: ltr;
11-
text-align: left;
12-
white-space: pre;
13-
word-spacing: normal;
14-
word-break: normal;
15-
font-size: .9em;
16-
line-height: 1.2em;
17-
18-
-moz-tab-size: 4;
19-
-o-tab-size: 4;
20-
tab-size: 4;
21-
22-
-webkit-hyphens: none;
23-
-moz-hyphens: none;
24-
-ms-hyphens: none;
25-
hyphens: none;
26-
}
27-
28-
pre > code[class*="language-"] {
29-
font-size: 1em;
30-
}
31-
32-
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
33-
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
34-
background: #C1DEF1;
35-
}
36-
37-
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
38-
code[class*="language-"]::selection, code[class*="language-"] ::selection {
39-
background: #C1DEF1;
40-
}
41-
42-
/* Code blocks */
43-
pre[class*="language-"] {
44-
padding: 1em;
45-
margin: .5em 0;
46-
overflow: auto;
47-
border: 1px solid #dddddd;
48-
background-color: white;
49-
}
50-
51-
/* Inline code */
52-
:not(pre) > code[class*="language-"] {
53-
padding: .2em;
54-
padding-top: 1px;
55-
padding-bottom: 1px;
56-
background: #f8f8f8;
57-
border: 1px solid #dddddd;
58-
}
59-
60-
.token.comment,
61-
.token.prolog,
62-
.token.doctype,
63-
.token.cdata {
64-
color: #b2b8c0;
65-
font-style: italic;
66-
}
67-
68-
.token.namespace {
69-
opacity: .7;
70-
}
71-
72-
.token.string {
73-
color: #67c2c7;
74-
}
75-
76-
.token.punctuation,
77-
.token.operator {
78-
color: #393A34; /* no highlight */
79-
}
80-
81-
.token.url,
82-
.token.symbol,
83-
.token.number,
84-
.token.boolean,
85-
.token.variable,
86-
.token.constant,
87-
.token.inserted {
88-
color: #36acaa;
89-
}
90-
91-
.token.atrule,
92-
.token.keyword,
93-
.token.attr-value,
94-
.language-autohotkey .token.selector,
95-
.language-json .token.boolean,
96-
.language-json .token.number,
97-
code[class*="language-css"] {
98-
color: #9494ab;
99-
}
100-
101-
.token.function {
102-
color: #393A34;
103-
}
104-
105-
.token.deleted,
106-
.language-autohotkey .token.tag {
107-
color: #9a050f;
108-
}
109-
110-
.token.selector,
111-
.language-autohotkey .token.keyword {
112-
color: #00009f;
113-
}
114-
115-
.token.important,
116-
.token.bold {
117-
font-weight: bold;
118-
}
119-
120-
.token.italic {
121-
font-style: italic;
122-
}
123-
124-
.token.class-name,
125-
.language-json .token.property {
126-
color: #67c2c7;
127-
}
128-
129-
.token.tag,
130-
.token.selector {
131-
color: #67c2c7;
132-
}
133-
134-
.token.attr-name,
135-
.token.property,
136-
.token.regex,
137-
.token.entity {
138-
color: #91adbd;
139-
}
140-
141-
.token.directive.tag .tag {
142-
background: #ffff00;
143-
color: #393A34;
144-
}
145-
146-
/* overrides color-values for the Line Numbers plugin
147-
* http://prismjs.com/plugins/line-numbers/
6+
code[class*='language-'],
7+
pre[class*='language-'] {
8+
color: #393a34;
9+
font-family: 'Consolas', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;
10+
direction: ltr;
11+
text-align: left;
12+
white-space: pre;
13+
word-spacing: normal;
14+
word-break: normal;
15+
font-size: 0.9em;
16+
line-height: 1.2em;
17+
18+
-moz-tab-size: 4;
19+
-o-tab-size: 4;
20+
tab-size: 4;
21+
22+
-webkit-hyphens: none;
23+
-moz-hyphens: none;
24+
-ms-hyphens: none;
25+
hyphens: none;
26+
}
27+
28+
pre > code[class*='language-'] {
29+
font-size: 1em;
30+
}
31+
32+
pre[class*='language-']::-moz-selection,
33+
pre[class*='language-'] ::-moz-selection,
34+
code[class*='language-']::-moz-selection,
35+
code[class*='language-'] ::-moz-selection {
36+
background: #c1def1;
37+
}
38+
39+
pre[class*='language-']::selection,
40+
pre[class*='language-'] ::selection,
41+
code[class*='language-']::selection,
42+
code[class*='language-'] ::selection {
43+
background: #c1def1;
44+
}
45+
46+
/* Code blocks */
47+
pre[class*='language-'] {
48+
padding: 1em;
49+
margin: 0.5em 0;
50+
overflow: auto;
51+
border: 1px solid #dddddd;
52+
background-color: white;
53+
}
54+
55+
/* Inline code */
56+
:not(pre) > code[class*='language-'] {
57+
padding: 0.2em;
58+
padding-top: 1px;
59+
padding-bottom: 1px;
60+
background: #f8f8f8;
61+
border: 1px solid #dddddd;
62+
}
63+
64+
.token.comment,
65+
.token.prolog,
66+
.token.doctype,
67+
.token.cdata {
68+
color: #b2b8c0;
69+
font-style: italic;
70+
}
71+
72+
.token.namespace {
73+
opacity: 0.7;
74+
}
75+
76+
.token.string {
77+
color: #67c2c7;
78+
}
79+
80+
.token.punctuation,
81+
.token.operator {
82+
color: #393a34 !important; /* no highlight */
83+
}
84+
85+
.token.url,
86+
.token.symbol,
87+
.token.number,
88+
.token.boolean,
89+
.token.variable,
90+
.token.constant,
91+
.token.inserted {
92+
color: #36acaa;
93+
}
94+
95+
.token.atrule,
96+
.token.keyword,
97+
.token.attr-value,
98+
.language-autohotkey .token.selector,
99+
.language-json .token.boolean,
100+
.language-json .token.number,
101+
code[class*='language-css'] {
102+
color: #9494ab;
103+
}
104+
105+
.token.function {
106+
color: #ff7bab;
107+
}
108+
109+
.token.deleted,
110+
.language-autohotkey .token.tag {
111+
color: #9a050f;
112+
}
113+
114+
.token.selector,
115+
.language-autohotkey .token.keyword {
116+
color: #00009f;
117+
}
118+
119+
.token.important,
120+
.token.bold {
121+
font-weight: bold;
122+
}
123+
124+
.token.italic {
125+
font-style: italic;
126+
}
127+
128+
.token.class-name,
129+
.language-json .token.property {
130+
color: #67c2c7;
131+
}
132+
133+
.token.tag,
134+
.token.selector {
135+
color: #67c2c7;
136+
}
137+
138+
.token.attr-name,
139+
.token.property,
140+
.token.regex,
141+
.token.entity {
142+
color: #91adbd;
143+
}
144+
145+
.token.directive.tag .tag {
146+
background: #ffff00;
147+
color: #393a34;
148+
}
149+
150+
/* overrides color-values for the Line Numbers plugin
151+
* http://prismjs.com/plugins/line-numbers/
152+
*/
153+
.line-numbers .line-numbers-rows {
154+
border-right-color: #a5a5a5;
155+
}
156+
157+
.line-numbers-rows > span:before {
158+
color: #2b91af;
159+
}
160+
161+
/* overrides color-values for the Line Highlight plugin
162+
* http://prismjs.com/plugins/line-highlight/
148163
*/
149-
.line-numbers .line-numbers-rows {
150-
border-right-color: #a5a5a5;
151-
}
152-
153-
.line-numbers-rows > span:before {
154-
color: #2B91AF;
155-
}
156-
157-
/* overrides color-values for the Line Highlight plugin
158-
* http://prismjs.com/plugins/line-highlight/
159-
*/
160-
.line-highlight {
161-
background: rgba(193, 222, 241, 0.2);
162-
background: -webkit-linear-gradient(left, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
163-
background: linear-gradient(to right, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
164-
}
164+
.line-highlight {
165+
background: rgba(193, 222, 241, 0.2);
166+
background: -webkit-linear-gradient(left, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
167+
background: linear-gradient(to right, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
168+
}

0 commit comments

Comments
 (0)