Skip to content

Commit ab4f056

Browse files
nooobcodernooobcoder
committed
Code theme optimisations
1 parent 8363db3 commit ab4f056

File tree

3 files changed

+201
-1
lines changed

3 files changed

+201
-1
lines changed

‎pages/_app.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import 'styles/prism-theme.css'
1818

1919
// this might be better for dark mode
2020
import '../styles/prism-night-owl.css'
21+
// import '../styles/prism-shades-of-purple.css'
2122
// import 'prismjs/themes/prism-tomorrow.css'
2223

2324
import * as React from 'react'

‎styles/prism-night-owl.css

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@
99
code[class*='language-'],
1010
pre[class*='language-'] {
1111
color: #d6deeb;
12-
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
12+
font-family: 'Operator Mono', 'MonoLisa', 'Dank Mono', 'Fira Code', Consolas,
13+
Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
14+
font-weight: 300;
1315
text-align: left;
1416
white-space: pre;
1517
word-spacing: normal;

‎styles/prism-shades-of-purple.css

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
/**
2+
* Shades of Purple Theme for Prism.js
3+
*
4+
* @author Ahmad Awais <https://twitter.com/MrAhmadAwais/>
5+
* @support Follow/tweet at https://twitter.com/MrAhmadAwais/
6+
*/
7+
8+
code[class*='language-'],
9+
pre[class*='language-'] {
10+
color: #9efeff;
11+
direction: ltr;
12+
text-align: left;
13+
white-space: pre;
14+
word-spacing: normal;
15+
word-break: normal;
16+
17+
-moz-tab-size: 4;
18+
-o-tab-size: 4;
19+
tab-size: 4;
20+
21+
-webkit-hyphens: none;
22+
-moz-hyphens: none;
23+
-ms-hyphens: none;
24+
hyphens: none;
25+
26+
font-family: 'Operator Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono',
27+
'Ubuntu Mono', monospace;
28+
font-weight: 300;
29+
font-size: 1em;
30+
line-height: 25px;
31+
letter-spacing: 0.5px;
32+
text-shadow: 0 1px #222245;
33+
}
34+
35+
pre[class*='language-']::-moz-selection,
36+
pre[class*='language-'] ::-moz-selection,
37+
code[class*='language-']::-moz-selection,
38+
code[class*='language-'] ::-moz-selection,
39+
pre[class*='language-']::selection,
40+
pre[class*='language-'] ::selection,
41+
code[class*='language-']::selection,
42+
code[class*='language-'] ::selection {
43+
color: inherit;
44+
background: #a599e9;
45+
}
46+
47+
/* Code blocks. */
48+
pre[class*='language-'] {
49+
padding: 2em;
50+
margin: 0.5em 0;
51+
overflow: auto;
52+
}
53+
54+
:not(pre) > code[class*='language-'],
55+
pre[class*='language-'] {
56+
background: #1e1e3f;
57+
}
58+
59+
/* Inline code */
60+
:not(pre) > code[class*='language-'] {
61+
padding: 0.1em;
62+
border-radius: 0.3em;
63+
}
64+
65+
.token {
66+
font-weight: 400;
67+
}
68+
69+
.token.comment,
70+
.token.prolog,
71+
.token.cdata {
72+
color: #b362ff;
73+
}
74+
75+
.token.delimiter,
76+
.token.keyword,
77+
.token.selector,
78+
.token.important,
79+
.token.atrule {
80+
color: #ff9d00;
81+
}
82+
83+
.token.operator,
84+
.token.attr-name {
85+
color: rgb(255, 180, 84);
86+
}
87+
88+
.token.punctuation {
89+
color: #ffffff;
90+
}
91+
92+
.token.boolean {
93+
color: rgb(255, 98, 140);
94+
}
95+
96+
.token.tag,
97+
.token.tag .punctuation,
98+
.token.doctype,
99+
.token.builtin {
100+
color: rgb(255, 157, 0);
101+
}
102+
103+
.token.entity,
104+
.token.symbol {
105+
color: #6897bb;
106+
}
107+
108+
.token.number {
109+
color: #ff628c;
110+
}
111+
112+
.token.property,
113+
.token.constant,
114+
.token.variable {
115+
color: #ff628c;
116+
}
117+
118+
.token.string,
119+
.token.char {
120+
color: #a5ff90;
121+
}
122+
123+
.token.attr-value,
124+
.token.attr-value .punctuation {
125+
color: #a5c261;
126+
}
127+
128+
.token.attr-value .punctuation:first-child {
129+
color: #a9b7c6;
130+
}
131+
132+
.token.url {
133+
color: #287bde;
134+
text-decoration: underline;
135+
}
136+
137+
.token.function {
138+
color: rgb(250, 208, 0);
139+
}
140+
141+
.token.regex {
142+
background: #364135;
143+
}
144+
145+
.token.bold {
146+
font-weight: bold;
147+
}
148+
149+
.token.italic {
150+
font-style: italic;
151+
}
152+
153+
.token.inserted {
154+
background: #00ff00;
155+
}
156+
157+
.token.deleted {
158+
background: #ff000d;
159+
}
160+
161+
code.language-css .token.property,
162+
code.language-css .token.property + .token.punctuation {
163+
color: #a9b7c6;
164+
}
165+
166+
code.language-css .token.id {
167+
color: #ffc66d;
168+
}
169+
170+
code.language-css .token.selector > .token.class,
171+
code.language-css .token.selector > .token.attribute,
172+
code.language-css .token.selector > .token.pseudo-class,
173+
code.language-css .token.selector > .token.pseudo-element {
174+
color: #ffc66d;
175+
}
176+
177+
.token.class-name {
178+
color: #fb94ff;
179+
}
180+
181+
.token.operator,
182+
.token.entity,
183+
.token.url,
184+
.language-css .token.string,
185+
.style .token.string {
186+
background: none;
187+
}
188+
189+
.line-highlight.line-highlight {
190+
margin-top: 36px;
191+
background: linear-gradient(to right, rgba(179, 98, 255, 0.17), transparent);
192+
}
193+
194+
.line-highlight.line-highlight:before,
195+
.line-highlight.line-highlight[data-end]:after {
196+
content: '';
197+
}

0 commit comments

Comments
 (0)