svelte-highlight

Syntax highlighting for Svelte using highlight.js.

Documentation

Installation

Yarn

yarn add -D svelte-highlight

NPM

npm i -D svelte-highlight

pnpm

pnpm i -D svelte-highlight highlight.js

SvelteKit Set-up

To use this library with SvelteKit or vite, instruct vite to optimize highlight.js and highlight.js/lib/core:

# svelte.config.js
export default {
  kit: {
+   vite: {
+     optimizeDeps: {
+       include: ["highlight.js", "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/languages/typescript";
  import github from "svelte-highlight/styles/github";

  const 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/languages/typescript";
  import "svelte-highlight/styles/github.css";

  const 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/styles/github";

  $: code = `<button on:click={() => { console.log(0); }}>Increment {count}</button>`;
</script>

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

<HighlightSvelte {code} />

Auto-highlighting

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

Note that auto-highlighting will result in a larger bundle size in order to infer a language.

Prefer to specify a language if possible.

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

  $: code = `body {\n  padding: 0;\n  color: red;\n}`;
</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[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.

It is recommended that you set values for --hljs-background and --hljs-foreground to ensure the langtags remain readable on any theme.

See the Languages page for a list of supported languages.

Defaults:

--hljs-background: inherit
--hljs-foreground: inherit
--hljs-border-radius: 0

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

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

<HighlightAuto {code} langtag />

pre[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 */
      };
    },
  };
</script>

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

API

Props

Name	Type	Default value
code	`string`	`""`
language (only for `Highlight`)	{ name: `string`; register: hljs => `object` }	{ name: undefined, register: undefined }
langtag	`boolean`	`false`

$$restProps are forwarded to the pre element

Dispatched Events

on:highlight: fired after code syntax is highlighted

<Highlight
  language={typescript}
  {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.

daison12006013/svelte-highlight