Skip to main content Svelte Highlight v7.7.0

Svelte Highlight

Svelte component library for highlighting code using highlight.js.

Installation

npm i svelte-highlight

pnpm i svelte-highlight highlight.js

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 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.