svelte-highlight

svelte-highlight

Syntax Highlighting for Svelte using highlight.js.

This component wraps highlight.js to provide syntax highlighting in Svelte 3.

Demo

Install

yarn add svelte-highlight

Usage

There are two ways to use highlight.js styles: through a CSS stylesheet loader or the svelte:head API.

CSS Stylesheet

Importing a CSS stylesheet in Svelte requires a CSS loader. Refer to the rollup and webpack examples for sample set-ups.

<script>
  import Highlight from 'svelte-highlight';
  import { typescript } from 'svelte-highlight/languages';
  import 'svelte-highlight/styles/github.css';
</script>

<Highlight language={typescript}>
  {`function add(a: number, b: number) {
  return a + b;
}

const sum = add(1, 2);`}
</Highlight>

svelte:head

This component exports highlight.js themes in JavaScript. Simply import the theme as JavaScript and inject it using the svelte:head API.

<script>
  import Highlight from 'svelte-highlight';
  import { typescript } from 'svelte-highlight/languages';
  import { github } from 'svelte-highlight/styles';
</script>

<svelte:head>
  {@html github}
</svelte:head>

<Highlight language={typescript}>
  {`function add(a: number, b: number) {
  return a + b;
}

const sum = add(1, 2);`}
</Highlight>

The code Prop

Code passed to the slot (like in the above examples) will not dynamically update. Use the code prop for code that changes.

<script>
  import Highlight from 'svelte-highlight';
  import { typescript } from 'svelte-highlight/languages';
  import 'svelte-highlight/styles/github.css';

  let count = 0;

  function increment() {
    count += 1;
  }

  $: code = `let count = ${count};`;
</script>

<button on:click={increment}>Increment</button>

<Highlight language={typescript} {code} />

Custom Language

For custom language highlighting, pass a name and register function to the language prop.

Refer to the highlight.js language definition guide for more info.

<script>
  import Highlight from 'svelte-highlight';
  import hljs from 'highlight.js';

  const language = {
    name: 'custom-lang',
    register: (hljs) => {
      return {
        // ...
      }
    }
  }

  const code = 'custom language';
</script>

<Highlight {language} {code} />

Supported Languages

Supported Styles

Examples

Changelog

License

MIT

Changelog

0.3.2 - 2019-12-12

• Upgrade highlight.js to v9.17.0