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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy