feat(styles): support scoped styles

[metonym]

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]

Another approach...

• Where ScopedStyle is responsible for injecting the module style.
• Props are type-safe.

// githubLight.scoped.js const githubLightScoped = { name: "githubLight", content: "<style>.xcode ...</style>" }; export default githubLightScoped;

ScopedStyle.svelte

<script>  export let moduleName;  export let content; </script> <svelte:head> {@html content} </svelte:head> <div style="contents" class={moduleName}> <slot /> </div>

App.svelte

<script>  import githubLight from "svelte-highlight/styles/githubLight.scoped"; </script> <ScopedStyle {...githubLight}> <Highlight language={typescript} {code} /> </ScopedStyle>