svelte-highlight

> Syntax highlighting for Svelte using highlight.js.

Try it in StackBlitz.

Documentation

The Changelog is available on GitHub.

Installation

# npm
npm i -D svelte-highlight

# pnpm
pnpm i -D svelte-highlight highlight.js

# Bun
bun i -D svelte-highlight

# Yarn
yarn add -D svelte-highlight

Note that pnpm users must also install highlight.js.

Basic Usage

The Highlight component requires two props:

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

Import languages from svelte-highlight/languages.

See SUPPORTED_LANGUAGES.md for a list of supported languages.

Styling

Import styles from svelte-highlight/styles. See SUPPORTED_STYLES.md for a list of supported styles.

There are two ways to apply highlight.js styles.

1. Injected styles through svelte:head
2. CSS StyleSheets

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.

  {@html github}

CSS StyleSheet

Depending on your set-up, importing a CSS StyleSheet in Svelte may require a CSS file loader. SvelteKit/Vite automatically supports this. For Webpack, refer to examples/webpack.

Linking from a CDN

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

> [!WARNING] > Using a CDN is best suited for prototyping and not recommended for production use.

HTML

svelte:head

Svelte Syntax Highlighting

Use the HighlightSvelte component for Svelte syntax highlighting.

  {@html github}

Auto-highlighting

The HighlightAuto component uses the highlightAuto API and attempts to guess what grammar to use based on the provided code.

> [!WARNING] > Auto-highlighting will result in a larger bundle size. Specify a language if possible.

  {@html github}

Line Numbers

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

  {@html atomOneDark}



  

Hidden Border

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

Wrapped Lines

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

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

Custom Starting Line Number

The line number starts at 1. Customize this via the startingLineNumber prop.

Highlighted Lines

Specify the lines to highlight using the highlightedLines prop. Indices start at zero.

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

Custom Styles

Use --style-props to customize styles.

Style prop	Description	Default value
--line-number-color	Text color of the line numbers	currentColor
--border-color	Border color of the column of line numbers	currentColor
--padding-left	Left padding for td elements	1em
--padding-right	Right padding for td elements	1em
--highlighted-background	Background color of highlighted lines	rgba(254, 241, 96, 0.2)

Language Targeting

All Highlight components apply a data-language attribute on the codeblock containing the language name.

See SUPPORTED_LANGUAGES.md for a list of supported languages.

[data-language="css"] {
  /* custom style rules */
}

Language Tags

Set langtag to true to display the language name in the top right corner of the code block.

Customize the language tag background, color, and border-radius using style props.

See the Languages page for a list of supported languages.

Style prop	Description	Default value
--langtag-top	Top position of the langtag	0
--langtag-right	Right position of the langtag	0
--langtag-background	Background color of the langtag	inherit
--langtag-color	Text color of the langtag	inherit
--langtag-border-radius	Border radius of the langtag	0
--langtag-padding	Padding of the langtag	1em

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.

Code-splitting

You can use the await import syntax for code-splitting.

In the example below, the HighlightAuto component and injected styles are dynamically loaded.

  {#if styles}
    {@html styles}
  {/if}

Component API

Highlight

Props

Name	Type	Default value
code	any	N/A (required)
language	{ name: string; register: hljs => object }	N/A (required)
langtag	boolean	false

$$restProps are forwarded to the top-level pre element.

Dispatched Events

• on:highlight: fired after code is highlighted

 {
    /**
     * The highlighted HTML as a string.
     * @example "<span>...</span>"
     */
    console.log(e.detail.highlighted);
  }}
/&gt;

LineNumbers

Props

Name	Type	Default value
highlighted	string	N/A (required)
hideBorder	boolean	false
wrapLines	boolean	false
startingLineNumber	number	1
highlightedLines	number[]	[]

$$restProps are forwarded to the top-level div element.

HighlightSvelte

Props

Name	Type	Default value
code	any	N/A (required)
langtag	boolean	false

$$restProps are forwarded to the top-level pre element.

Dispatched Events

• on:highlight: fired after code is highlighted

 {
    /**
     * The highlighted HTML as a string.
     * @example "<span>...</span>"
     */
    console.log(e.detail.highlighted);
  }}
/&gt;

HighlightAuto

Props

Name	Type	Default value
code	any	N/A (required)
langtag	boolean	false

$$restProps are forwarded to the top-level pre element.

Dispatched Events

• on:highlight: fired after code is highlighted

 {
    /**
     * The highlighted HTML as a string.
     * @example "<span>...</span>"
     */
    console.log(e.detail.highlighted);

    /**
     * The inferred language name
     * @example "css"
     */
    console.log(e.detail.language);
  }}
/&gt;

Supported Languages

Supported Styles

Examples

• examples/rollup
• examples/routify
• examples/sveltekit
• examples/vite
• examples/webpack

Changelog

License

MIT