prism-svelte-renderer

A port of prism-react-renderer to svelte.

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>