Skip to content

Commit d848feb

Browse files
ItzNotABugItzNotABug
authored
Merge pull request #2822 from appwrite/remove-prismjs
2 parents a34e30a + 25e021b commit d848feb

8 files changed

Lines changed: 69 additions & 179 deletions

File tree

‎bun.lock‎

Lines changed: 2 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"@appwrite.io/pink-icons": "0.25.0",
2525
"@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@c1feb89",
2626
"@appwrite.io/pink-legacy": "^1.0.3",
27-
"@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c1feb89",
27+
"@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@dd7e01c",
2828
"@faker-js/faker": "^9.9.0",
2929
"@plausible-analytics/tracker": "^0.4.4",
3030
"@popperjs/core": "^2.11.8",
@@ -42,7 +42,6 @@
4242
"nanoid": "^5.1.5",
4343
"nanotar": "^0.1.1",
4444
"pretty-bytes": "^6.1.1",
45-
"prismjs": "^1.30.0",
4645
"remarkable": "^2.0.1",
4746
"svelte-confetti": "^1.4.0",
4847
"three": "^0.181.2",
@@ -62,7 +61,6 @@
6261
"@testing-library/svelte": "^5.2.8",
6362
"@testing-library/user-event": "^14.6.1",
6463
"@types/deep-equal": "^1.0.4",
65-
"@types/prismjs": "^1.26.5",
6664
"@types/remarkable": "^2.0.8",
6765
"@types/three": "^0.182.0",
6866
"@typescript-eslint/eslint-plugin": "^8.28.0",

‎src/lib/components/code.svelte‎

Lines changed: 8 additions & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,9 @@
88
</script>
99

1010
<script lang="ts">
11-
import { Badge, Icon } from '@appwrite.io/pink-svelte';
12-
import { IconCode, IconAndroid, IconFlutter, IconApple } from '@appwrite.io/pink-icons-svelte';
13-
import Prism from 'prismjs';
14-
import 'prismjs/components/prism-dart';
15-
import 'prismjs/components/prism-kotlin';
16-
import 'prismjs/components/prism-json';
17-
import 'prismjs/components/prism-bash';
18-
import 'prismjs/components/prism-yaml';
19-
import 'prismjs/components/prism-swift';
20-
import 'prismjs/plugins/autoloader/prism-autoloader';
21-
import 'prismjs/plugins/custom-class/prism-custom-class';
22-
import 'prismjs/plugins/line-numbers/prism-line-numbers';
2311
import { Copy } from '.';
12+
import { Badge, Icon, Code } from '@appwrite.io/pink-svelte';
13+
import { IconCode, IconAndroid, IconFlutter, IconApple } from '@appwrite.io/pink-icons-svelte';
2414
2515
let {
2616
label = null,
@@ -37,7 +27,7 @@
3727
label?: string;
3828
labelIcon?: 'code' | 'android' | 'flutter' | 'apple';
3929
code: string;
40-
language: 'js' | 'html' | 'dart' | 'kotlin' | 'json' | 'sh' | 'yml' | 'swift';
30+
language: Language;
4131
withLineNumbers?: boolean;
4232
withCopy?: boolean;
4333
noMargin?: boolean;
@@ -60,16 +50,13 @@
6050
return null;
6151
}
6252
}
63-
64-
Prism.plugins.customClass.prefix('prism-');
65-
66-
$effect(() => Prism.highlightAll());
6753
</script>
6854

6955
<section
7056
class="box u-overflow-hidden {classes}"
7157
class:common-section={!noMargin}
72-
class:noBoxPadding>
58+
class:noBoxPadding
59+
class:with-scroll={allowScroll}>
7360
<div
7461
class="controls u-position-absolute u-inset-inline-end-8 u-inset-block-start-8 u-flex u-gap-8">
7562
{#if label}
@@ -87,150 +74,16 @@
8774
</Copy>
8875
{/if}
8976
</div>
90-
<pre
91-
class:with-scroll={allowScroll}
92-
class={`language-${language}`}
93-
class:line-numbers={withLineNumbers}><code>{code}</code></pre>
77+
<Code {code} lang={language} lineNumbers={withLineNumbers} hideHeader />
9478
</section>
9579

96-
<!-- svelte-ignore css_unused_selector -->
97-
<style lang="scss" global>
98-
@import 'prismjs/themes/prism.css';
99-
@import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
100-
101-
.box {
102-
--p-box-background-color: var(--color-neutral-400) !important;
103-
104-
body.theme-light & {
105-
--p-box-background-color: var(--color-neutral-5) !important;
106-
}
107-
108-
.controls {
109-
z-index: 2;
110-
}
111-
}
112-
80+
<style lang="scss">
11381
.noBoxPadding {
11482
padding: 0 !important;
11583
}
11684
11785
.with-scroll {
11886
height: 100%;
119-
overflow: auto;
120-
}
121-
122-
code,
123-
pre {
124-
&[class*='language-'] {
125-
color: #fcfcff;
126-
text-shadow: none;
127-
font-family: 'Source Code Pro';
128-
129-
&.line-numbers {
130-
padding-left: 2.5em;
131-
}
132-
body.theme-light & {
133-
color: #373b4d;
134-
}
135-
}
136-
::selection,
137-
&::selection {
138-
text-shadow: none;
139-
background: #b3d4fc;
140-
}
141-
142-
&.line-numbers .line-numbers-rows {
143-
border: none;
144-
145-
> span::before {
146-
color: #868ea3;
147-
}
148-
}
149-
}
150-
151-
:not(pre) > code[class*='language-'],
152-
pre[class*='language-'] {
153-
background: hsl(var(--p-box-background-color));
154-
155-
margin: 0;
156-
}
157-
.prism-token {
158-
&.prism-comment,
159-
&.prism-prolog,
160-
&.prism-doctype,
161-
&.prism-cdata {
162-
color: #868ea3;
163-
}
164-
165-
&.prism-punctuation {
166-
color: #fcfcff;
167-
168-
body.theme-light & {
169-
color: #373b4d;
170-
}
171-
}
172-
&.prism-property,
173-
&.prism-tag,
174-
&.prism-boolean,
175-
&.prism-number,
176-
&.prism-constant,
177-
&.prism-symbol,
178-
&.prism-deleted,
179-
&.prism-selector,
180-
&.prism-attr-name,
181-
&.prism-string,
182-
&.prism-char,
183-
&.prism-builtin,
184-
&.prism-inserted {
185-
color: #fdc584;
186-
body.theme-light & {
187-
color: #e49545;
188-
}
189-
}
190-
&.prism-operator,
191-
&.prism-entity,
192-
&.prism-url,
193-
.language-css &.prism-string,
194-
.style &.prism-string {
195-
color: #fcfcff;
196-
background: none;
197-
body.theme-light & {
198-
color: #373b4d;
199-
}
200-
}
201-
202-
&.prism-atrule,
203-
&.prism-attr-value,
204-
&.prism-keyword {
205-
color: #cbb1fc;
206-
body.theme-light & {
207-
color: #6a6af7;
208-
}
209-
}
210-
&.prism-function {
211-
color: #ffa1ce;
212-
body.theme-light & {
213-
color: #f02e7f;
214-
}
215-
}
216-
&.prism-class-name {
217-
color: #a1c4ff;
218-
body.theme-light & {
219-
color: #62aed2;
220-
}
221-
}
222-
&.prism-important,
223-
&.prism-variable {
224-
color: #a1c4ff;
225-
body.theme-light & {
226-
color: #62aed2;
227-
}
228-
}
229-
&.prism-regex {
230-
color: #a1c4ff;
231-
body.theme-light & {
232-
color: #62aed2;
233-
}
234-
}
87+
overflow: auto !important;
23588
}
23689
</style>

‎src/themes/dark-cloud.json‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -200,5 +200,18 @@
200200
"shadow-offsety-4": "var(--base-4)",
201201
"shadow-offsety-6": "var(--base-6)",
202202
"shadow-offsety-8": "var(--base-8)",
203-
"shadow-offsety-20": "var(--base-20)"
203+
"shadow-offsety-20": "var(--base-20)",
204+
"shiki-foreground": "var(--fgcolor-neutral-primary)",
205+
"shiki-background": "var(--bgcolor-neutral-primary)",
206+
"shiki-token-constant": "var(--brand-orange-500)",
207+
"shiki-token-string": "var(--web-green-500)",
208+
"shiki-token-comment": "var(--neutral-600)",
209+
"shiki-token-keyword": "var(--brand-purple-200)",
210+
"shiki-token-parameter": "var(--fgcolor-neutral-primary)",
211+
"shiki-token-function": "var(--brand-blue-500)",
212+
"shiki-token-string-expression": "var(--web-green-500)",
213+
"shiki-token-punctuation": "var(--neutral-250)",
214+
"shiki-token-link": "var(--brand-blue-500)",
215+
"shiki-token-deleted": "var(--web-red-500)",
216+
"shiki-token-inserted": "var(--web-green-500)"
204217
}

‎src/themes/dark.json‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -200,5 +200,18 @@
200200
"shadow-offsety-4": "var(--base-4)",
201201
"shadow-offsety-6": "var(--base-6)",
202202
"shadow-offsety-8": "var(--base-8)",
203-
"shadow-offsety-20": "var(--base-20)"
203+
"shadow-offsety-20": "var(--base-20)",
204+
"shiki-foreground": "var(--fgcolor-neutral-primary)",
205+
"shiki-background": "var(--bgcolor-neutral-primary)",
206+
"shiki-token-constant": "var(--brand-orange-500)",
207+
"shiki-token-string": "var(--web-green-500)",
208+
"shiki-token-comment": "var(--neutral-600)",
209+
"shiki-token-keyword": "var(--brand-purple-200)",
210+
"shiki-token-parameter": "var(--fgcolor-neutral-primary)",
211+
"shiki-token-function": "var(--brand-blue-500)",
212+
"shiki-token-string-expression": "var(--web-green-500)",
213+
"shiki-token-punctuation": "var(--neutral-250)",
214+
"shiki-token-link": "var(--brand-blue-500)",
215+
"shiki-token-deleted": "var(--web-red-500)",
216+
"shiki-token-inserted": "var(--web-green-500)"
204217
}

‎src/themes/light-cloud.json‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -200,5 +200,18 @@
200200
"shadow-offsety-4": "var(--base-4)",
201201
"shadow-offsety-6": "var(--base-6)",
202202
"shadow-offsety-8": "var(--base-8)",
203-
"shadow-offsety-20": "var(--base-20)"
203+
"shadow-offsety-20": "var(--base-20)",
204+
"shiki-foreground": "var(--fgcolor-neutral-primary)",
205+
"shiki-background": "var(--bgcolor-neutral-primary)",
206+
"shiki-token-constant": "var(--brand-orange-700)",
207+
"shiki-token-string": "var(--web-green-700)",
208+
"shiki-token-comment": "var(--neutral-400)",
209+
"shiki-token-keyword": "var(--brand-purple-500)",
210+
"shiki-token-parameter": "var(--fgcolor-neutral-primary)",
211+
"shiki-token-function": "var(--brand-blue-600)",
212+
"shiki-token-string-expression": "var(--web-green-700)",
213+
"shiki-token-punctuation": "var(--neutral-700)",
214+
"shiki-token-link": "var(--brand-blue-600)",
215+
"shiki-token-deleted": "var(--web-red-700)",
216+
"shiki-token-inserted": "var(--web-green-700)"
204217
}

‎src/themes/light.json‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -200,5 +200,18 @@
200200
"shadow-offsety-4": "var(--base-4)",
201201
"shadow-offsety-6": "var(--base-6)",
202202
"shadow-offsety-8": "var(--base-8)",
203-
"shadow-offsety-20": "var(--base-20)"
203+
"shadow-offsety-20": "var(--base-20)",
204+
"shiki-foreground": "var(--fgcolor-neutral-primary)",
205+
"shiki-background": "var(--bgcolor-neutral-primary)",
206+
"shiki-token-constant": "var(--brand-orange-700)",
207+
"shiki-token-string": "var(--web-green-700)",
208+
"shiki-token-comment": "var(--neutral-400)",
209+
"shiki-token-keyword": "var(--brand-purple-500)",
210+
"shiki-token-parameter": "var(--fgcolor-neutral-primary)",
211+
"shiki-token-function": "var(--brand-blue-600)",
212+
"shiki-token-string-expression": "var(--web-green-700)",
213+
"shiki-token-punctuation": "var(--neutral-700)",
214+
"shiki-token-link": "var(--brand-blue-600)",
215+
"shiki-token-deleted": "var(--web-red-700)",
216+
"shiki-token-inserted": "var(--web-green-700)"
204217
}

‎vite.config.ts‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default defineConfig({
1515
sveltekit()
1616
],
1717
optimizeDeps: {
18-
include: ['echarts', 'prismjs']
18+
include: ['echarts']
1919
},
2020
css: {
2121
preprocessorOptions: {
@@ -25,14 +25,7 @@ export default defineConfig({
2525
}
2626
},
2727
ssr: {
28-
noExternal: [
29-
'@analytics/google-analytics',
30-
'analytics',
31-
'dayjs',
32-
'echarts',
33-
'prismjs',
34-
'zrender'
35-
]
28+
noExternal: ['@analytics/google-analytics', 'analytics', 'dayjs', 'echarts', 'zrender']
3629
},
3730
server: {
3831
port: 3000

0 commit comments

Comments
 (0)