Skip to content

Conversation

metonym
Copy link
Owner

@metonym metonym commented Sep 22, 2024

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 metonym force-pushed the feat-scoped-styles branch from 140df06 to d4b546e Compare October 2, 2024 01:38
@metonym
Copy link
Owner Author

metonym commented Oct 2, 2024

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Scoped styles
1 participant