svelte-highlight

svelte-highlight

Syntax highlighting for Svelte using highlight.js.

Try it in the Svelte REPL.

Demo

Installation

Yarn

yarn add -D svelte-highlight

NPM

npm i -D svelte-highlight

SvelteKit set-up

To use this library with SvelteKit, instruct vite to optimize highlight.js/lib/core in your svelte.config.js:

# svelte.config.js
export default {
  kit: {
    target: "#svelte",
+   vite: {
+     optimizeDeps: {
+       include: ["highlight.js/lib/core"],
+     },
+   },
  },
};

Refer to examples/sveltekit for an example set-up.

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

Language Targeting

All Highlight components apply a data-language attribute on the codeblock containing the language name.

This is also compatible with custom languages.

See the Languages page for a list of supported languages.

pre.hljs[data-language="css"] {
  /* custom style rules */
}

Language Tags

All Highlight components allow for a tag to be added at the top-right of the codeblock displaying the language name.

The language tag can be given a custom background, color, and border-radius through the custom properties shown.

This is also compatible with custom languages.

See the Languages page for a list of supported languages.

<script>
  import { HighlightAuto } from "svelte-highlight";

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

<HighlightAuto {code} langtag="{true}" />

pre.hljs[data-language="css"] {
  --hljs-background: linear-gradient(135deg, #2996cf, 80%, white);
  --hljs-foreground: #fff;
  --hljs-radius: 8px;
}

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.

TypeScript definitions are located in the types folder.

Supported Languages

Supported Styles

Examples

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

Changelog

License

MIT

Changelog

3.4.0 - 2021-09-12

Features

• add data-language attribute to pre element to allow targeted styling
• add langtag prop that displays the highlighted language if enabled