svelte-highlight

[![NPM][npm]][npm-url]
!npm

> Syntax highlighting for Svelte using highlight.js.

Try it in the Svelte REPL or StackBlitz.

Documentation

The Changelog is available on GitHub.

Installation

``bash


npm

npm i svelte-highlight

pnpm

pnpm i svelte-highlight

Bun

bun i svelte-highlight

Yarn

yarn add svelte-highlight
`

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.

`svelte



`

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

$3

This component exports highlight.js themes in JavaScript. Import the theme from svelte-highlight/styles and inject it using the svelte:head API.

`svelte



{@html github}



`

$3

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.

`svelte



`

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

`html

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

`

svelte:head

`svelte

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

`

Svelte Syntax Highlighting

Use the HighlightSvelte component for Svelte syntax highlighting.

`svelte



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

`svelte



{@html github}



`

$3

You can restrict language auto-detection to a subset using the languageNames prop. This can improve performance and accuracy.

`svelte



{@html github}



`

Line Numbers

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

`svelte



{@html atomOneDark}





`

$3

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

`svelte



`

$3

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

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

`svelte



`

$3

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

`svelte



`

$3

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

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

`svelte

{highlighted}
highlightedLines={[0, 2, 3, 14]}
--highlighted-background="#000"
/>

`

$3

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

`svelte

{highlighted}
--line-number-color="pink"
--border-color="rgba(255, 255, 255, 0.2)"
--padding-left={0}
--padding-right="3em"
--highlighted-background="#000"
/>

`

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.

`css
[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 |

`svelte



`

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

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.

`svelte



`

If you're using TypeScript, use the LanguageType interface to type the language.

`ts
import type { LanguageType } from "svelte-highlight";

const language: LanguageType<"custom-language"> = {
name: "custom-language",
register: (hljs) => {
return {
/* custom language rules /
contains: [],
};
},
};
`

Custom Plugin

Additional plugin languages can be installed and used separately.

This example uses the cURL language plugin.

`svelte



{@html github}



`

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.

`svelte



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


this={component}
langtag
code={body {\n padding: 0;\n color: red;\n}}
/>
`

Component API

$3

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

`svelte
language={typescript}
{code}
on:highlight={(e) => {
/**
* The highlighted HTML as a string.
* @example "..."
*/
console.log(e.detail.highlighted);
}}
/>
`

$3

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

$3

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

`svelte
{code}
on:highlight={(e) => {
/**
* The highlighted HTML as a string.
* @example "..."
*/
console.log(e.detail.highlighted);
}}
/>
`

$3

#### Props

| Name | Type | Default value |
| :-------- | :--------------- | :------------- |
| code | any | N/A (required) |
| languages | LanguageName[] | undefined |
| langtag | boolean | false |

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

Note: LanguageName is a union type of all supported language names, providing autocomplete and type safety. You can import it from svelte-highlight:

`ts
import type { LanguageName } from "svelte-highlight";
`

#### Dispatched Events

- on:highlight: fired after code is highlighted

`svelte
{code}
on:highlight={(e) => {
/**
* The highlighted HTML as a string.
* @example "..."
*/
console.log(e.detail.highlighted);

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

Supported Languages

Supported Styles

Examples

By default, example set-ups use Svelte 5. The exception is examples/vite@svelte-4`, which uses Svelte 4.

- examples/rollup
- examples/routify
- examples/sveltekit
- examples/vite
- examples/vite@svelte-4
- examples/webpack

Changelog

License

MIT

[npm]: https://img.shields.io/npm/v/svelte-highlight.svg?style=for-the-badge&color=%23ff3e00
[npm-url]: https://npmjs.com/package/svelte-highlight