svelte-highlight

svelte-highlight

Syntax Highlighting for Svelte using highlight.js.

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

Install

yarn add svelte-highlight

Usage

<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>

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

In case you do not want to include a CSS loader, this component exports highlight.js themes in JavaScript. You can 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>

Examples

Changelog

License

MIT

Changelog

0.2.0 - 2019-11-10

• Export highlight.js theme CSS files as JavaScript