Svelte component library for highlighting code using highlight.js
npm install svelte-highlight[![NPM][npm]][npm-url]
!npm
> Syntax highlighting for Svelte using highlight.js.
Try it in the Svelte REPL or StackBlitz.
The Changelog is available on GitHub.
``bashnpm
npm i svelte-highlight
Basic Usage
The
Highlight component requires two props:-
code: text to highlight
- language: language grammar used to highlight the textImport 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.
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
[npm]: https://img.shields.io/npm/v/svelte-highlight.svg?style=for-the-badge&color=%23ff3e00
[npm-url]: https://npmjs.com/package/svelte-highlight