Skip to content

Commit c5d2def

Browse files
HetariHetari
committed
fix: code style
1 parent 1b16a89 commit c5d2def

File tree

4 files changed

+256
-8
lines changed

4 files changed

+256
-8
lines changed

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@
5050
"vue": "^3.0.0"
5151
},
5252
"dependencies": {
53-
"prismjs": "^1.29.0",
5453
"vue": "^3.0.0"
5554
},
5655
"devDependencies": {

‎src/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
// const langs = ref(Object.keys(Prism.languages));
2323
2424
const code = `print("Hello, World!")
25-
ss = 2
25+
s = 2
2626
`;
2727
</script>
2828

‎src/components/code-block/CodeBlock.vue‎

Lines changed: 255 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
<!-- Code Block Component -->
33
<component
44
:id="props.id"
5-
:class="`${props.class} ${props.theme}`"
5+
:class="`${props.class} vuejs-code-block-${props.theme}`"
66
:is="props.asElement || 'pre'"
77
v-bind="$attrs"
8-
class="code">
8+
class="vuejs-code-block">
99
<!-- Line Component -->
1010
<slot>
1111
<template
@@ -50,13 +50,13 @@
5050
</script>
5151

5252
<style>
53-
.code {
53+
.vuejs-code-block {
5454
padding: 1rem;
5555
border-radius: 0.25rem;
5656
border: 1px solid #888;
5757
}
5858
59-
.dark.code {
59+
.vuejs-code-block-dark {
6060
background-color: #121212;
6161
color: #fff;
6262
}
@@ -73,3 +73,254 @@
7373
padding: 0.1rem 1rem 0.1rem 0;
7474
}
7575
</style>
76+
77+
<!-- light -->
78+
<style>
79+
.vuejs-code-block-light {
80+
code[class*='language-'],
81+
pre[class*='language-'] {
82+
color: #000;
83+
background: 0 0;
84+
text-shadow: 0 1px #fff;
85+
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
86+
font-size: 1em;
87+
text-align: left;
88+
white-space: pre;
89+
word-spacing: normal;
90+
word-break: normal;
91+
word-wrap: normal;
92+
line-height: 1.5;
93+
-moz-tab-size: 4;
94+
-o-tab-size: 4;
95+
tab-size: 4;
96+
-webkit-hyphens: none;
97+
-moz-hyphens: none;
98+
-ms-hyphens: none;
99+
hyphens: none;
100+
}
101+
code[class*='language-'] ::-moz-selection,
102+
code[class*='language-']::-moz-selection,
103+
pre[class*='language-'] ::-moz-selection,
104+
pre[class*='language-']::-moz-selection {
105+
text-shadow: none;
106+
background: #b3d4fc;
107+
}
108+
code[class*='language-'] ::selection,
109+
code[class*='language-']::selection,
110+
pre[class*='language-'] ::selection,
111+
pre[class*='language-']::selection {
112+
text-shadow: none;
113+
background: #b3d4fc;
114+
}
115+
@media print {
116+
code[class*='language-'],
117+
pre[class*='language-'] {
118+
text-shadow: none;
119+
}
120+
}
121+
pre[class*='language-'] {
122+
padding: 1em;
123+
margin: 0.5em 0;
124+
overflow: auto;
125+
}
126+
:not(pre) > code[class*='language-'],
127+
pre[class*='language-'] {
128+
background: #f5f2f0;
129+
}
130+
:not(pre) > code[class*='language-'] {
131+
padding: 0.1em;
132+
border-radius: 0.3em;
133+
white-space: normal;
134+
}
135+
.token.cdata,
136+
.token.comment,
137+
.token.doctype,
138+
.token.prolog {
139+
color: #708090;
140+
}
141+
.token.punctuation {
142+
color: #999;
143+
}
144+
.token.namespace {
145+
opacity: 0.7;
146+
}
147+
.token.boolean,
148+
.token.constant,
149+
.token.deleted,
150+
.token.number,
151+
.token.property,
152+
.token.symbol,
153+
.token.tag {
154+
color: #905;
155+
}
156+
.token.attr-name,
157+
.token.builtin,
158+
.token.char,
159+
.token.inserted,
160+
.token.selector,
161+
.token.string {
162+
color: #690;
163+
}
164+
.language-css .token.string,
165+
.style .token.string,
166+
.token.entity,
167+
.token.operator,
168+
.token.url {
169+
color: #9a6e3a;
170+
background: hsla(0, 0%, 100%, 0.5);
171+
}
172+
.token.atrule,
173+
.token.attr-value,
174+
.token.keyword {
175+
color: #07a;
176+
}
177+
.token.class-name,
178+
.token.function {
179+
color: #dd4a68;
180+
}
181+
.token.important,
182+
.token.regex,
183+
.token.variable {
184+
color: #e90;
185+
}
186+
.token.bold,
187+
.token.important {
188+
font-weight: 700;
189+
}
190+
.token.italic {
191+
font-style: italic;
192+
}
193+
.token.entity {
194+
cursor: help;
195+
}
196+
}
197+
</style>
198+
199+
<!-- dark -->
200+
<style>
201+
.vuejs-code-block-dark {
202+
code[class*='language-'],
203+
pre[class*='language-'] {
204+
color: white;
205+
background: none;
206+
text-shadow: 0 -0.1em 0.2em black;
207+
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
208+
font-size: 1em;
209+
text-align: left;
210+
white-space: pre;
211+
word-spacing: normal;
212+
word-break: normal;
213+
word-wrap: normal;
214+
line-height: 1.5;
215+
216+
-moz-tab-size: 4;
217+
-o-tab-size: 4;
218+
tab-size: 4;
219+
220+
-webkit-hyphens: none;
221+
-moz-hyphens: none;
222+
-ms-hyphens: none;
223+
hyphens: none;
224+
}
225+
226+
@media print {
227+
code[class*='language-'],
228+
pre[class*='language-'] {
229+
text-shadow: none;
230+
}
231+
}
232+
233+
pre[class*='language-'],
234+
:not(pre) > code[class*='language-'] {
235+
background: hsl(30, 20%, 25%);
236+
}
237+
238+
/* Code blocks */
239+
pre[class*='language-'] {
240+
padding: 1em;
241+
margin: 0.5em 0;
242+
overflow: auto;
243+
border: 0.3em solid hsl(30, 20%, 40%);
244+
border-radius: 0.5em;
245+
box-shadow: 1px 1px 0.5em black inset;
246+
}
247+
248+
/* Inline code */
249+
:not(pre) > code[class*='language-'] {
250+
padding: 0.15em 0.2em 0.05em;
251+
border-radius: 0.3em;
252+
border: 0.13em solid hsl(30, 20%, 40%);
253+
box-shadow: 1px 1px 0.3em -0.1em black inset;
254+
white-space: normal;
255+
}
256+
257+
.token.comment,
258+
.token.prolog,
259+
.token.doctype,
260+
.token.cdata {
261+
color: hsl(30, 20%, 50%);
262+
}
263+
264+
.token.punctuation {
265+
opacity: 0.7;
266+
}
267+
268+
.token.namespace {
269+
opacity: 0.7;
270+
}
271+
272+
.token.property,
273+
.token.tag,
274+
.token.boolean,
275+
.token.number,
276+
.token.constant,
277+
.token.symbol {
278+
color: hsl(350, 40%, 70%);
279+
}
280+
281+
.token.selector,
282+
.token.attr-name,
283+
.token.string,
284+
.token.char,
285+
.token.builtin,
286+
.token.inserted {
287+
color: hsl(75, 70%, 60%);
288+
}
289+
290+
.token.operator,
291+
.token.entity,
292+
.token.url,
293+
.language-css .token.string,
294+
.style .token.string,
295+
.token.variable {
296+
color: hsl(40, 90%, 60%);
297+
}
298+
299+
.token.atrule,
300+
.token.attr-value,
301+
.token.keyword {
302+
color: hsl(350, 40%, 70%);
303+
}
304+
305+
.token.regex,
306+
.token.important {
307+
color: #e90;
308+
}
309+
310+
.token.important,
311+
.token.bold {
312+
font-weight: bold;
313+
}
314+
.token.italic {
315+
font-style: italic;
316+
}
317+
318+
.token.entity {
319+
cursor: help;
320+
}
321+
322+
.token.deleted {
323+
color: red;
324+
}
325+
}
326+
</style>

‎src/components/utils.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import 'prismjs/themes/prism.min.css';
2-
import 'prismjs/themes/prism-dark.min.css';
31
import { Prism } from './prism-langs';
42

53
export function highlightedCode(code: string, language: string) {

0 commit comments

Comments
 (0)