Why?

In contrast to other svelte prismjs libraries this library doesn't generate HTML and inject it as raw HTML. As it tries to have an API similar to prism-react-renderer you can customize how your code is displayed using the default slot.

Installation

You have to install prismjs along with prism-svelte-renderer. You also have to make sure that the languages you want to use are registered as well.

Usage

Basic Example

Import PrismJS and prism-svelte-rnederer:

import Prism from "prismjs";
import Highlight from "prism-svelte-renderer";

Import a theme:

import theme from "prism-svelte-renderer/themes/dracula";

Add the following to your template code:

<div style="background-color: {theme.plain.backgroundColor}">
  <Highlight {theme} {Prism} text={simpleExample} language=html />
</div>

Advanced Usage

You can provide a slot along with the component if you want to customize how your code is rendered.

The following code will display line-numbers:

<div style="background-color: {theme.plain.backgroundColor}" class="wrapper">
  <Highlight
    {theme}
    {Prism}
    text={advancedExample}
    language=html
    let:lines
    let:getStyle>
    {#each lines as line, index}
      <div class="line">
        <div class="line-number">{index + 1}</div>

        {#each line as token}
          <span
            style="
              color: {getStyle(token, 'color')};
              font-style: {getStyle(token, 'fontStyle')};">
            {token.content}
          </span>
        {/each}

      </div>
    {/each}
  </Highlight>
</div>