Skip to content

Commit

Permalink
chore(examples): add scoped styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@metonym
metonym committed Sep 22, 2024
1 parent efb2c3f commit 140df06
Show file tree
Hide file tree
Showing 12 changed files with 144 additions and 0 deletions.
3 changes: 3 additions & 0 deletions examples/rollup/src/App.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import typescript from "svelte-highlight/languages/typescript";
import atomOneDark from "svelte-highlight/styles/atom-one-dark";
import DynamicImport from "./DynamicImport.svelte";
import ScopedStyles from "./ScopedStyles.svelte";
const code = "const add = (a: number, b: number) => a + b;";
</script>
Expand All @@ -14,3 +15,5 @@
<Highlight language={typescript} {code} />

<DynamicImport />

<ScopedStyles />
21 changes: 21 additions & 0 deletions examples/rollup/src/ScopedStyles.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<script lang="ts">
import { Highlight } from "svelte-highlight";
import typescript from "svelte-highlight/languages/typescript";
import atomOneDark from "svelte-highlight/styles/atom-one-dark.scoped";
import github from "svelte-highlight/styles/github.scoped";
import blackMetalDarkFuneral from "svelte-highlight/styles/black-metal-dark-funeral.scoped";
const code = "const add = (a: number, b: number) => a + b;";
</script>

<svelte:head>
{@html github}
{@html atomOneDark}
{@html blackMetalDarkFuneral}
</svelte:head>

<Highlight class="github" language={typescript} {code} />

<Highlight class="atomOneDark" language={typescript} {code} />

<Highlight class="blackMetalDarkFuneral" language={typescript} {code} />
21 changes: 21 additions & 0 deletions examples/routify/src/components/ScopedStyles.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<script lang="ts">
import { Highlight } from "svelte-highlight";
import typescript from "svelte-highlight/languages/typescript";
import atomOneDark from "svelte-highlight/styles/atom-one-dark.scoped";
import github from "svelte-highlight/styles/github.scoped";
import blackMetalDarkFuneral from "svelte-highlight/styles/black-metal-dark-funeral.scoped";
const code = "const add = (a: number, b: number) => a + b;";
</script>

<svelte:head>
{@html github}
{@html atomOneDark}
{@html blackMetalDarkFuneral}
</svelte:head>

<Highlight class="github" language={typescript} {code} />

<Highlight class="atomOneDark" language={typescript} {code} />

<Highlight class="blackMetalDarkFuneral" language={typescript} {code} />
3 changes: 3 additions & 0 deletions examples/routify/src/routes/index.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import typescript from "svelte-highlight/languages/typescript";
import atomOneDark from "svelte-highlight/styles/atom-one-dark";
import DynamicImport from "../components/DynamicImport.svelte";
import ScopedStyles from "../components/ScopedStyles.svelte";
const code = "const add = (a: number, b: number) => a + b;";
</script>
Expand All @@ -14,3 +15,5 @@
<Highlight language={typescript} {code} />

<DynamicImport />

<ScopedStyles />
21 changes: 21 additions & 0 deletions examples/sveltekit/src/lib/ScopedStyles.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<script lang="ts">
import { Highlight } from "svelte-highlight";
import typescript from "svelte-highlight/languages/typescript";
import atomOneDark from "svelte-highlight/styles/atom-one-dark.scoped";
import github from "svelte-highlight/styles/github.scoped";
import blackMetalDarkFuneral from "svelte-highlight/styles/black-metal-dark-funeral.scoped";
const code = "const add = (a: number, b: number) => a + b;";
</script>

<svelte:head>
{@html github}
{@html atomOneDark}
{@html blackMetalDarkFuneral}
</svelte:head>

<Highlight class="github" language={typescript} {code} />

<Highlight class="atomOneDark" language={typescript} {code} />

<Highlight class="blackMetalDarkFuneral" language={typescript} {code} />
3 changes: 3 additions & 0 deletions examples/sveltekit/src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import typescript from "svelte-highlight/languages/typescript";
import atomOneDark from "svelte-highlight/styles/atom-one-dark";
import DynamicImport from "$lib/DynamicImport.svelte";
import ScopedStyles from "$lib/ScopedStyles.svelte";
const code = "const add = (a: number, b: number) => a + b;";
</script>
Expand All @@ -14,3 +15,5 @@
<Highlight language={typescript} {code} />

<DynamicImport />

<ScopedStyles />
3 changes: 3 additions & 0 deletions examples/vite/src/App.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import typescript from "svelte-highlight/languages/typescript";
import atomOneDark from "svelte-highlight/styles/atom-one-dark";
import DynamicImport from "./DynamicImport.svelte";
import ScopedStyles from "./ScopedStyles.svelte";
const code = "const add = (a: number, b: number) => a + b;";
</script>
Expand All @@ -14,3 +15,5 @@
<Highlight language={typescript} {code} />

<DynamicImport />

<ScopedStyles />
21 changes: 21 additions & 0 deletions examples/vite/src/ScopedStyles.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<script lang="ts">
import { Highlight } from "svelte-highlight";
import typescript from "svelte-highlight/languages/typescript";
import atomOneDark from "svelte-highlight/styles/atom-one-dark.scoped";
import github from "svelte-highlight/styles/github.scoped";
import blackMetalDarkFuneral from "svelte-highlight/styles/black-metal-dark-funeral.scoped";
const code = "const add = (a: number, b: number) => a + b;";
</script>

<svelte:head>
{@html github}
{@html atomOneDark}
{@html blackMetalDarkFuneral}
</svelte:head>

<Highlight class="github" language={typescript} {code} />

<Highlight class="atomOneDark" language={typescript} {code} />

<Highlight class="blackMetalDarkFuneral" language={typescript} {code} />
3 changes: 3 additions & 0 deletions examples/vite@svelte-5/src/App.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import typescript from "svelte-highlight/languages/typescript";
import atomOneDark from "svelte-highlight/styles/atom-one-dark";
import DynamicImport from "./DynamicImport.svelte";
import ScopedStyles from "./ScopedStyles.svelte";
const code = "const add = (a: number, b: number) => a + b;";
</script>
Expand All @@ -14,3 +15,5 @@
<Highlight language={typescript} {code} />

<DynamicImport />

<ScopedStyles />
21 changes: 21 additions & 0 deletions examples/vite@svelte-5/src/ScopedStyles.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<script lang="ts">
import { Highlight } from "svelte-highlight";
import typescript from "svelte-highlight/languages/typescript";
import atomOneDark from "svelte-highlight/styles/atom-one-dark.scoped";
import github from "svelte-highlight/styles/github.scoped";
import blackMetalDarkFuneral from "svelte-highlight/styles/black-metal-dark-funeral.scoped";
const code = "const add = (a: number, b: number) => a + b;";
</script>

<svelte:head>
{@html github}
{@html atomOneDark}
{@html blackMetalDarkFuneral}
</svelte:head>

<Highlight class="github" language={typescript} {code} />

<Highlight class="atomOneDark" language={typescript} {code} />

<Highlight class="blackMetalDarkFuneral" language={typescript} {code} />
3 changes: 3 additions & 0 deletions examples/webpack/src/App.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import typescript from "svelte-highlight/languages/typescript";
import atomOneDark from "svelte-highlight/styles/atom-one-dark";
import DynamicImport from "./DynamicImport.svelte";
import ScopedStyles from "./ScopedStyles.svelte";
const code = "const add = (a: number, b: number) => a + b;";
</script>
Expand All @@ -14,3 +15,5 @@
<Highlight language={typescript} {code} />

<DynamicImport />

<ScopedStyles />
21 changes: 21 additions & 0 deletions examples/webpack/src/ScopedStyles.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<script lang="ts">
import { Highlight } from "svelte-highlight";
import typescript from "svelte-highlight/languages/typescript";
import atomOneDark from "svelte-highlight/styles/atom-one-dark.scoped";
import github from "svelte-highlight/styles/github.scoped";
import blackMetalDarkFuneral from "svelte-highlight/styles/black-metal-dark-funeral.scoped";
const code = "const add = (a: number, b: number) => a + b;";
</script>

<svelte:head>
{@html github}
{@html atomOneDark}
{@html blackMetalDarkFuneral}
</svelte:head>

<Highlight class="github" language={typescript} {code} />

<Highlight class="atomOneDark" language={typescript} {code} />

<Highlight class="blackMetalDarkFuneral" language={typescript} {code} />

0 comments on commit 140df06

Please sign in to comment.