svelte-highlight

svelte-highlight

Syntax Highlighting for Svelte using highlight.js.

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

Try it in the Svelte REPL.

Live Demo

Installation

yarn add -D svelte-highlight
# OR
npm i -D svelte-highlight

Usage

There are two ways to apply highlight.js styles:

• JavaScript styles injected into the DOM through svelte:head
• CSS StyleSheets imported using a file loader

Injected Styles

This component exports highlight.js themes in JavaScript. Import the theme from svelte-highlight/styles and inject it using the svelte:head API.

<script>
  import Highlight from "svelte-highlight";
  import typescript from "svelte-highlight/src/languages/typescript";
  import github from "svelte-highlight/src/styles/github";

  $: code = `const add = (a: number, b: number) => a + b;`;
</script>

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

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

CSS StyleSheet

Depending on your set-up, importing a CSS StyleSheet in Svelte may require a CSS file loader. Refer to examples/webpack for a sample set-up.

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

  $: code = `const add = (a: number, b: number) => a + b;`;
</script>

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

Svelte Syntax Highlighting

Use the HighlightSvelte component for Svelte syntax highlighting.

<script>
  import { HighlightSvelte } from "svelte-highlight";
  import github from "svelte-highlight/src/styles/github";

  $: code = `<script>
  let count = 0;
<\/script>

<button on:click="{() => (count += 1)}">Increment {count}<\/button>`;
</script>

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

<HighlightSvelte {code} />

Auto-highlighting

The HighlightAuto component invokes the highlightAuto API from highlight.js.

<script>
  import { HighlightAuto } from "svelte-highlight";
  import github from "svelte-highlight/src/styles/github";

  $: code = `<style>
  .body { margin: 0; padding: 0; }
<\/style>`;
</script>

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

<HighlightAuto {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 guidance.

<script>
  import { Highlight } from "svelte-highlight";
  import hljs from "highlight.js";

  const language = {
    name: "custom-language",
    register: (hljs) => {
      return {
        /** custom language rules */
      };
    },
  };

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

<Highlight {language} {code} />

API

Props

Prop name	Value
code	string
language (only for Highlight)	object { name: string; register: hljs => object }
...$$restProps	(forwarded to the pre element)

Dispatched Events

• on:highlight

<Highlight
  language="{typescript}"
  code="{code}"
  on:highlight="{(e) => {
    console.log(e.detail.highlighted); // "<span>...</span>"
  }}"
/>

TypeScript

Svelte version 3.31 or greater is required to use this component with TypeScript.

Supported Languages

Supported Styles

Examples

• examples/rollup
• examples/rollup-typescript
• examples/snowpack
• examples/sveltekit
• examples/svite
• examples/webpack

Changelog

License

MIT

Changelog

2.0.0-rc.0 - 2021-04-30

Breaking Changes

• upgrade highlight.js to the next major version (v11), which supports ESM
  • removed languages: c-like, htmlbars, sql_more

Features

• added languages: nestedtext, wasm
• 143 new styles