Skip to content

Commit 140df06

Browse files
metonymmetonym
committed
chore(examples): add scoped styles
1 parent efb2c3f commit 140df06

File tree

12 files changed

+144
-0
lines changed

12 files changed

+144
-0
lines changed

‎examples/rollup/src/App.svelte

+3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import typescript from "svelte-highlight/languages/typescript";
44
import atomOneDark from "svelte-highlight/styles/atom-one-dark";
55
import DynamicImport from "./DynamicImport.svelte";
6+
import ScopedStyles from "./ScopedStyles.svelte";
67
78
const code = "const add = (a: number, b: number) => a + b;";
89
</script>
@@ -14,3 +15,5 @@
1415
<Highlight language={typescript} {code} />
1516

1617
<DynamicImport />
18+
19+
<ScopedStyles />

‎examples/rollup/src/ScopedStyles.svelte

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script lang="ts">
2+
import { Highlight } from "svelte-highlight";
3+
import typescript from "svelte-highlight/languages/typescript";
4+
import atomOneDark from "svelte-highlight/styles/atom-one-dark.scoped";
5+
import github from "svelte-highlight/styles/github.scoped";
6+
import blackMetalDarkFuneral from "svelte-highlight/styles/black-metal-dark-funeral.scoped";
7+
8+
const code = "const add = (a: number, b: number) => a + b;";
9+
</script>
10+
11+
<svelte:head>
12+
{@html github}
13+
{@html atomOneDark}
14+
{@html blackMetalDarkFuneral}
15+
</svelte:head>
16+
17+
<Highlight class="github" language={typescript} {code} />
18+
19+
<Highlight class="atomOneDark" language={typescript} {code} />
20+
21+
<Highlight class="blackMetalDarkFuneral" language={typescript} {code} />

‎examples/routify/src/components/ScopedStyles.svelte

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script lang="ts">
2+
import { Highlight } from "svelte-highlight";
3+
import typescript from "svelte-highlight/languages/typescript";
4+
import atomOneDark from "svelte-highlight/styles/atom-one-dark.scoped";
5+
import github from "svelte-highlight/styles/github.scoped";
6+
import blackMetalDarkFuneral from "svelte-highlight/styles/black-metal-dark-funeral.scoped";
7+
8+
const code = "const add = (a: number, b: number) => a + b;";
9+
</script>
10+
11+
<svelte:head>
12+
{@html github}
13+
{@html atomOneDark}
14+
{@html blackMetalDarkFuneral}
15+
</svelte:head>
16+
17+
<Highlight class="github" language={typescript} {code} />
18+
19+
<Highlight class="atomOneDark" language={typescript} {code} />
20+
21+
<Highlight class="blackMetalDarkFuneral" language={typescript} {code} />

‎examples/routify/src/routes/index.svelte

+3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import typescript from "svelte-highlight/languages/typescript";
44
import atomOneDark from "svelte-highlight/styles/atom-one-dark";
55
import DynamicImport from "../components/DynamicImport.svelte";
6+
import ScopedStyles from "../components/ScopedStyles.svelte";
67
78
const code = "const add = (a: number, b: number) => a + b;";
89
</script>
@@ -14,3 +15,5 @@
1415
<Highlight language={typescript} {code} />
1516

1617
<DynamicImport />
18+
19+
<ScopedStyles />

‎examples/sveltekit/src/lib/ScopedStyles.svelte

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script lang="ts">
2+
import { Highlight } from "svelte-highlight";
3+
import typescript from "svelte-highlight/languages/typescript";
4+
import atomOneDark from "svelte-highlight/styles/atom-one-dark.scoped";
5+
import github from "svelte-highlight/styles/github.scoped";
6+
import blackMetalDarkFuneral from "svelte-highlight/styles/black-metal-dark-funeral.scoped";
7+
8+
const code = "const add = (a: number, b: number) => a + b;";
9+
</script>
10+
11+
<svelte:head>
12+
{@html github}
13+
{@html atomOneDark}
14+
{@html blackMetalDarkFuneral}
15+
</svelte:head>
16+
17+
<Highlight class="github" language={typescript} {code} />
18+
19+
<Highlight class="atomOneDark" language={typescript} {code} />
20+
21+
<Highlight class="blackMetalDarkFuneral" language={typescript} {code} />

‎examples/sveltekit/src/routes/+page.svelte

+3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import typescript from "svelte-highlight/languages/typescript";
44
import atomOneDark from "svelte-highlight/styles/atom-one-dark";
55
import DynamicImport from "$lib/DynamicImport.svelte";
6+
import ScopedStyles from "$lib/ScopedStyles.svelte";
67
78
const code = "const add = (a: number, b: number) => a + b;";
89
</script>
@@ -14,3 +15,5 @@
1415
<Highlight language={typescript} {code} />
1516

1617
<DynamicImport />
18+
19+
<ScopedStyles />

‎examples/vite/src/App.svelte

+3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import typescript from "svelte-highlight/languages/typescript";
44
import atomOneDark from "svelte-highlight/styles/atom-one-dark";
55
import DynamicImport from "./DynamicImport.svelte";
6+
import ScopedStyles from "./ScopedStyles.svelte";
67
78
const code = "const add = (a: number, b: number) => a + b;";
89
</script>
@@ -14,3 +15,5 @@
1415
<Highlight language={typescript} {code} />
1516

1617
<DynamicImport />
18+
19+
<ScopedStyles />

‎examples/vite/src/ScopedStyles.svelte

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script lang="ts">
2+
import { Highlight } from "svelte-highlight";
3+
import typescript from "svelte-highlight/languages/typescript";
4+
import atomOneDark from "svelte-highlight/styles/atom-one-dark.scoped";
5+
import github from "svelte-highlight/styles/github.scoped";
6+
import blackMetalDarkFuneral from "svelte-highlight/styles/black-metal-dark-funeral.scoped";
7+
8+
const code = "const add = (a: number, b: number) => a + b;";
9+
</script>
10+
11+
<svelte:head>
12+
{@html github}
13+
{@html atomOneDark}
14+
{@html blackMetalDarkFuneral}
15+
</svelte:head>
16+
17+
<Highlight class="github" language={typescript} {code} />
18+
19+
<Highlight class="atomOneDark" language={typescript} {code} />
20+
21+
<Highlight class="blackMetalDarkFuneral" language={typescript} {code} />

‎examples/vite@svelte-5/src/App.svelte

+3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import typescript from "svelte-highlight/languages/typescript";
44
import atomOneDark from "svelte-highlight/styles/atom-one-dark";
55
import DynamicImport from "./DynamicImport.svelte";
6+
import ScopedStyles from "./ScopedStyles.svelte";
67
78
const code = "const add = (a: number, b: number) => a + b;";
89
</script>
@@ -14,3 +15,5 @@
1415
<Highlight language={typescript} {code} />
1516

1617
<DynamicImport />
18+
19+
<ScopedStyles />

‎examples/vite@svelte-5/src/ScopedStyles.svelte

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script lang="ts">
2+
import { Highlight } from "svelte-highlight";
3+
import typescript from "svelte-highlight/languages/typescript";
4+
import atomOneDark from "svelte-highlight/styles/atom-one-dark.scoped";
5+
import github from "svelte-highlight/styles/github.scoped";
6+
import blackMetalDarkFuneral from "svelte-highlight/styles/black-metal-dark-funeral.scoped";
7+
8+
const code = "const add = (a: number, b: number) => a + b;";
9+
</script>
10+
11+
<svelte:head>
12+
{@html github}
13+
{@html atomOneDark}
14+
{@html blackMetalDarkFuneral}
15+
</svelte:head>
16+
17+
<Highlight class="github" language={typescript} {code} />
18+
19+
<Highlight class="atomOneDark" language={typescript} {code} />
20+
21+
<Highlight class="blackMetalDarkFuneral" language={typescript} {code} />

‎examples/webpack/src/App.svelte

+3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import typescript from "svelte-highlight/languages/typescript";
44
import atomOneDark from "svelte-highlight/styles/atom-one-dark";
55
import DynamicImport from "./DynamicImport.svelte";
6+
import ScopedStyles from "./ScopedStyles.svelte";
67
78
const code = "const add = (a: number, b: number) => a + b;";
89
</script>
@@ -14,3 +15,5 @@
1415
<Highlight language={typescript} {code} />
1516

1617
<DynamicImport />
18+
19+
<ScopedStyles />

‎examples/webpack/src/ScopedStyles.svelte

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script lang="ts">
2+
import { Highlight } from "svelte-highlight";
3+
import typescript from "svelte-highlight/languages/typescript";
4+
import atomOneDark from "svelte-highlight/styles/atom-one-dark.scoped";
5+
import github from "svelte-highlight/styles/github.scoped";
6+
import blackMetalDarkFuneral from "svelte-highlight/styles/black-metal-dark-funeral.scoped";
7+
8+
const code = "const add = (a: number, b: number) => a + b;";
9+
</script>
10+
11+
<svelte:head>
12+
{@html github}
13+
{@html atomOneDark}
14+
{@html blackMetalDarkFuneral}
15+
</svelte:head>
16+
17+
<Highlight class="github" language={typescript} {code} />
18+
19+
<Highlight class="atomOneDark" language={typescript} {code} />
20+
21+
<Highlight class="blackMetalDarkFuneral" language={typescript} {code} />

0 commit comments

Comments
 (0)