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.

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

Themes target global .hljs selectors, so the last one injected wins. That is fine when every block shares one theme.

Use HighlightStyle when blocks on the same page need different themes, like a style gallery or a light snippet next to a dark one.

<script>
  import { Highlight, HighlightStyle } from "svelte-highlight";
  import typescript from "svelte-highlight/languages/typescript";
  import a11yDark from "svelte-highlight/styles/a11y-dark";
  import github from "svelte-highlight/styles/github";

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

<HighlightStyle theme={a11yDark}>
  <Highlight language={typescript} {code} />
</HighlightStyle>

<HighlightStyle theme={github}>
  <Highlight language={typescript} {code} />
</HighlightStyle>

Both themes render on the same page, scoped to each block:

const add = (a: number, b: number) => a + b;

const add = (a: number, b: number) => a + b;

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

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

Optionally, you can restrict language detection to a specific subset using the languageNames prop. This can improve performance and accuracy.

<script>
  import { HighlightAuto } from "svelte-highlight";
  import atomOneDark from "svelte-highlight/styles/atom-one-dark";

  const code = "const x = 42;";
</script>

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

<HighlightAuto {code} languageNames={["javascript", "typescript"]} />

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

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

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.

Use --style-props to customize visual properties.

Use container-level variables like --border-radius, --width, and --max-width to style the outer container without :global overrides.

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

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

Use --unhighlighted-opacity or --unhighlighted-filter to de-emphasize the remaining lines and focus attention on the highlighted ones.

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

When using a custom slot, forward langtag and languageName from Highlight to LineNumbers.

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

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. With LineNumbers, forward langtag and languageName from the parent slot (see Line Numbers above).

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