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 highlightlanguage
: 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 APICSS 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 | |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 | |
10 | |
11 | |
12 | |
13 | |
14 | |
15 | |
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.
1 | |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 | |
10 | |
11 | |
12 | |
13 | |
14 | |
15 | |
Use --style-props
to customize visual properties.
1 | |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 | |
10 | |
11 | |
12 | |
13 | |
14 | |
15 | |
16 | |
17 | |
18 | |
19 | |
20 | |
21 | |
Use startingLineNumber
to customize the starting
line number. By default, line numbers start at
1
.
42 | |
43 | |
44 | |
45 | |
46 | |
47 | |
48 | |
49 | |
50 | |
51 | |
52 | |
53 | |
54 | |
55 | |
56 | |
Use highlightedLines
to highlight specific lines.
Indices start at zero.
1 | |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 | |
10 | |
11 | |
12 | |
13 | |
14 | |
15 | |
Use --highlighted-background
to customize the background
color of highlighted lines.
1 | |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 | |
10 | |
11 | |
12 | |
13 | |
14 | |
15 | |
16 | |
17 | |
18 | |
19 | |
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.