Skip to main content Svelte Highlight v7.7.0

Svelte Highlight

Svelte component library for highlighting code using highlight.js.

Installation

npm i -D svelte-highlight

pnpm i -D svelte-highlight highlight.js

bun add -D svelte-highlight

yarn add -D 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 ashes from "svelte-highlight/styles/ashes";

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

<svelte:head>
  {@html ashes}
</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 ashes from "svelte-highlight/styles/ashes";
  
  const code = `<button on:click={() => { console.log(0); }}>Click me</button>`;
</script>

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

<HighlightSvelte {code} />

Auto-highlighting

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

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

<svelte:head>
  {@html ashes}
</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 ashes from "svelte-highlight/styles/ashes";
5
6 
  const code = "const add = (a: number, b: number) => a + b";
7 
</script>
8
9 
<svelte:head>
10 
  {@html ashes}
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 ashes from "svelte-highlight/styles/ashes";
5
6 
  const code = "const add = (a: number, b: number) => a + b";
7 
</script>
8
9 
<svelte:head>
10 
  {@html ashes}
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 ashes from "svelte-highlight/styles/ashes";
5
6 
  const code = "const add = (a: number, b: number) => a + b";
7 
</script>
8
9 
<svelte:head>
10 
  {@html ashes}
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 ashes from "svelte-highlight/styles/ashes";
5
6 
  const code = "const add = (a: number, b: number) => a + b";
7 
</script>
8
9 
<svelte:head>
10 
  {@html ashes}
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 ashes from "svelte-highlight/styles/ashes";
46
47 
  const code = "const add = (a: number, b: number) => a + b";
48 
</script>
49
50 
<svelte:head>
51 
  {@html ashes}
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 ashes from "svelte-highlight/styles/ashes";
5
6 
  const code = "const add = (a: number, b: number) => a + b";
7 
</script>
8
9 
<svelte:head>
10 
  {@html ashes}
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 ashes from "svelte-highlight/styles/ashes";
5
6 
  const code = "const add = (a: number, b: number) => a + b";
7 
</script>
8
9 
<svelte:head>
10 
  {@html ashes}
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>

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.