Skip to main content Svelte Highlight v7.8.4

Svelte Highlight

Svelte component library for highlighting code using highlight.js.

Installation

npm i svelte-highlight

pnpm i svelte-highlight

bun add svelte-highlight

yarn add svelte-highlight

Usage

The default Highlight component requires two props:

  • code: text to highlight
  • language: language grammar used to highlight the text

Import languages from svelte-highlight/languages.

See the Languages page for a list of supported languages.

<script>
  import Highlight from "svelte-highlight";
  import typescript from "svelte-highlight/languages/typescript";
  import horizonDark from "svelte-highlight/styles/horizon-dark";

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

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

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

Import styles from svelte-highlight/styles.

There are two ways to add styles:

  • Injected styles: JavaScript styles injected using the svelte:head API
  • CSS StyleSheet: CSS file that may require an appropriate file loader

Refer to the Styles page for a list of supported styles.

CSS StyleSheets can also be externally linked from a Content Delivery Network (CDN) like unpkg.com .

<link
  rel="stylesheet"
  href="https://unpkg.com/svelte-highlight/styles/github.css"
/>

Svelte Syntax Highlighting

Use the HighlightSvelte component for Svelte syntax highlighting.

<script>
  import { HighlightSvelte } from "svelte-highlight";
  import horizonDark from "svelte-highlight/styles/horizon-dark";
  
  const code = `<button on:click={() => { console.log(0); }}>Click me</button>`;
</script>

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

<HighlightSvelte {code} />

Auto-highlighting

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

<script>
  import { HighlightAuto } from "svelte-highlight";
  import horizonDark from "svelte-highlight/styles/horizon-dark";
  
  const code = ".body { padding: 0; margin: 0; }";
</script>

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

<HighlightAuto {code} />

Line Numbers

Use the LineNumbers component to render the highlighted code with line numbers.

1 
<script>
2 
  import Highlight, { LineNumbers } from "svelte-highlight";
3 
  import typescript from "svelte-highlight/languages/typescript";
4 
  import horizonDark from "svelte-highlight/styles/horizon-dark";
5
6 
  const code = "const add = (a: number, b: number) => a + b";
7 
</script>
8
9 
<svelte:head>
10 
  {@html horizonDark}
11 
</svelte:head>
12
13 
<Highlight language={typescript} {code} let:highlighted>
14 
  <LineNumbers {highlighted} />
15 
</Highlight>

Set hideBorder to true to hide the border of the line numbers column.

1 
<script>
2 
  import Highlight, { LineNumbers } from "svelte-highlight";
3 
  import typescript from "svelte-highlight/languages/typescript";
4 
  import horizonDark from "svelte-highlight/styles/horizon-dark";
5
6 
  const code = "const add = (a: number, b: number) => a + b";
7 
</script>
8
9 
<svelte:head>
10 
  {@html horizonDark}
11 
</svelte:head>
12
13 
<Highlight language={typescript} {code} let:highlighted>
14 
  <LineNumbers {highlighted} hideBorder />
15 
</Highlight>

By default, overflowing horizontal content is contained by a scrollbar.

Set wrapLines to true to apply a white-space: pre-wrap rule to the pre element.

1 
<script>
2 
  import Highlight, { LineNumbers } from "svelte-highlight";
3 
  import typescript from "svelte-highlight/languages/typescript";
4 
  import horizonDark from "svelte-highlight/styles/horizon-dark";
5
6 
  const code = "const add = (a: number, b: number) => a + b";
7 
</script>
8
9 
<svelte:head>
10 
  {@html horizonDark}
11 
</svelte:head>
12
13 
<Highlight language={typescript} {code} let:highlighted>
14 
  <LineNumbers {highlighted} wrapLines />
15 
</Highlight>

Use --style-props to customize visual properties.

1 
<script>
2 
  import Highlight, { LineNumbers } from "svelte-highlight";
3 
  import typescript from "svelte-highlight/languages/typescript";
4 
  import horizonDark from "svelte-highlight/styles/horizon-dark";
5
6 
  const code = "const add = (a: number, b: number) => a + b";
7 
</script>
8
9 
<svelte:head>
10 
  {@html horizonDark}
11 
</svelte:head>
12
13 
<Highlight language={typescript} {code} let:highlighted>
14 
  <LineNumbers
15 
    {highlighted}
16 
    --line-number-color="rgba(255, 255, 255, 0.3)"
17 
    --border-color="rgba(255, 255, 255, 0.1)"
18 
    --padding-left="2em"
19 
    --padding-right="1em"
20 
  />
21 
</Highlight>

Use startingLineNumber to customize the starting line number. By default, line numbers start at 1.

42 
<script>
43 
  import Highlight, { LineNumbers } from "svelte-highlight";
44 
  import typescript from "svelte-highlight/languages/typescript";
45 
  import horizonDark from "svelte-highlight/styles/horizon-dark";
46
47 
  const code = "const add = (a: number, b: number) => a + b";
48 
</script>
49
50 
<svelte:head>
51 
  {@html horizonDark}
52 
</svelte:head>
53
54 
<Highlight language={typescript} {code} let:highlighted>
55 
  <LineNumbers {highlighted} startingLineNumber={42} />
56 
</Highlight>

Use highlightedLines to highlight specific lines. Indices start at zero.

1 
<script>
2 
  import Highlight, { LineNumbers } from "svelte-highlight";
3 
  import typescript from "svelte-highlight/languages/typescript";
4 
  import horizonDark from "svelte-highlight/styles/horizon-dark";
5
6 
  const code = "const add = (a: number, b: number) => a + b";
7 
</script>
8
9 
<svelte:head>
10 
  {@html horizonDark}
11 
</svelte:head>
12
13 
<Highlight language={typescript} {code} let:highlighted>
14 
  <LineNumbers {highlighted} highlightedLines={[0, 2, 3, 14]} />
15 
</Highlight>

Use --highlighted-background to customize the background color of highlighted lines.

1 
<script>
2 
  import Highlight, { LineNumbers } from "svelte-highlight";
3 
  import typescript from "svelte-highlight/languages/typescript";
4 
  import horizonDark from "svelte-highlight/styles/horizon-dark";
5
6 
  const code = "const add = (a: number, b: number) => a + b";
7 
</script>
8
9 
<svelte:head>
10 
  {@html horizonDark}
11 
</svelte:head>
12
13 
<Highlight language={typescript} {code} let:highlighted>
14 
  <LineNumbers
15 
    {highlighted}
16 
    highlightedLines={[16]}
17 
    --highlighted-background="rgba(150, 203, 254, 0.2)"
18 
  />
19 
</Highlight>

Copy Button

Use the CopyButton component to add copy-to-clipboard functionality to your highlighted code blocks.

The button is positioned at the top-right of the highlight component by default and shows visual feedback when copying.

You can provide custom content using the default slot, which receives an isCopied boolean to help customize the display.

Customize the button content using the default slot:

Provide a custom copy function to replace the default clipboard API:

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.

[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. Customize the language tag using style props.

Defaults:

  • --langtag-top: 0
  • --langtag-right: 0
  • --langtag-background: inherit
  • --langtag-color: inherit
  • --langtag-border-radius: 0
  • --langtag-padding: 1em

See the Languages page for a list of supported languages.

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

   $: code = `body {
  padding: 0;
  color: red;
}`;
</script>

<HighlightAuto {code} langtag />

<HighlightAuto
  {code}
  langtag
  --langtag-top="0.5rem"
  --langtag-right="0.5rem"
  --langtag-background="linear-gradient(135deg, #2996cf, 80%, white)"
  --langtag-color="#fff"
  --langtag-border-radius="6px"
  --langtag-padding="0.5rem"
/>

Examples

Get started with example set-ups , including SvelteKit, Vite, Rollup, Routify, and Webpack.