Svelte-highlight-switcher NPM

svelte-highlight-switcher

📍 Safe svelte-highlight dynamic style switching

Demo

Hides the use of @html and reduces the risk of XSS.

Installation

npm i svelte-highlight-switcher

Example

<script>
  import { HighlightSwitcher } from 'svelte-highlight-switcher'

  let isDarkMode = false
</script>

<HighlightSwitcher name={isDarkMode ? 'githubDark' : 'github'} />

↓ This is equivalent to the following code

<script>
  import * as styles from 'svelte-highlight/styles'

  let isDarkMode = false
</script>

<svelte:head>
  {@html isDarkMode ? styles['githubDark'] : styles['github']}
</svelte:head>

As long as the contents of svelte-highlight/styles are secure, there is no risk of XSS.