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

Using a CSS Loader

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>

Injected JavaScript Styles

In case you do not want to use a CSS loader, 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} />

Supported Languages

Supported Styles

Examples

Changelog

License

MIT

Changelog

0.3.0 - 2019-11-18

• Add code prop for dynamically updating code