svelte-highlight icon indicating copy to clipboard operation
svelte-highlight copied to clipboard

feat(styles): support scoped styles

Open metonym opened this issue 5 months ago • 1 comments

Closes #233

TODO

  • [ ] Update docs (README)
  • [ ] Update demo docs
  • [ ] Update demo option
<script>
  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} />

metonym avatar Sep 22 '24 00:09 metonym