HighlightSvelte Component

Specialized syntax highlighting for Svelte code using XML, JavaScript, and CSS parsers. Intelligently detects the best highlighting approach based on relevance scores. Features line numbers, language tags, and line highlighting.

Key Features

Specialized parser for Svelte's XML, JavaScript, and CSS syntax
Compares relevance scores to choose the best highlighting approach
Combines XML, JavaScript, and CSS highlighting
Optional line numbering with customizable starting number
Display "svelte" tag in top-right corner
Highlight specific lines or ranges with custom background
Validates line ranges and warns about invalid inputs
Line numbers stay visible while scrolling horizontally
Optional line wrapping for long lines
Gracefully falls back to plain code if highlighting fails
Configurable colors, borders, and backgrounds via CSS variables
Horizontal scroll for wide code blocks

Props

Prop	Type	Default	Description
code	string	""	Svelte code to highlight
langtag	boolean	false	Show "svelte" language tag in top-right corner
numberLine	boolean	undefined	Show line numbers
hideBorder	boolean	undefined	Hide border between line numbers and code
wrapLines	boolean	undefined	Enable line wrapping
startingLineNumber	number	1	Starting line number for display
highlightedLines	number[]	[]	Array of line numbers to highlight
highlightedRanges	[number, number][]	[]	Array of line ranges to highlight [start, end]
backgroundColor	string	undefined	Background color for line numbers column
position	"static" \| "relative" \| "absolute" \| "sticky"	"sticky"	CSS position for line numbers column
class	string	undefined	CSS class for the component

Types

HighlightSvelte component has the following types:

code?: string;
langtag?: boolean;
numberLine?: boolean;
hideBorder?: boolean;
wrapLines?: boolean;
startingLineNumber?: number;
highlightedLines?: number[];
highlightedRanges?: [number, number][];
backgroundColor?: string;
replaceLib?: string | false;
position?: 'static' | 'relative' | 'absolute' | 'sticky' | undefined;
class?: string;

Style

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

// language tag
--langtag-top = 0: Top position of the langtag
--langtag-right = 0: Right position of the langtag
--langtag-background = inherit: Background color of the langtag
--langtag-color = inherit: Text color of the langtag
--langtag-border-radius = 0: Border radius of the langtag
--langtag-padding = 1em: Padding of the langtag
// line number
--line-number-color
--highlighted-background
--border-color
--padding-left
--padding-right

Examples

Use the HighlightSvelte component to highlight your Svelte code. The HighlightSvelte component requires code props. langtag and --langtag-color are optional.

<button onclick={() => { console.log(0); }}>Increment {count}</button>

<script lang="ts">
  import { HighlightSvelte } from 'svelte-rune-highlight';
  const code = `<button onclick={() => { console.log(0); }}>Increment {count}</button>`;
</script>

<HighlightSvelte {code} langtag />

Using different --langtag-color.

<button onclick={() => { console.log(0); }}>Increment {count}</button>

<script lang="ts">
  import { HighlightSvelte } from 'svelte-rune-highlight';
  const code = `<button onclick={() => { console.log(0); }}>Increment {count}</button>`;
</script>

<HighlightSvelte {code} langtag --langtag-color="green" />

Numberline for Svelte file

<script lang="ts"> 
 function greet() { 
3
    alert('Welcome to Svelte!');
 } 
</script> 

 
7
<button onclick={greet}>click me</button>

 
<style> 
 button { 
   font-size: 2em; 
 } 
</style> 

 

<script lang="ts">
  import { HighlightSvelte } from 'svelte-rune-highlight';
  const examples = import.meta.glob('../../examples/*.svelte', {
    query: '?raw',
    import: 'default',
    eager: true
  });
</script>

<HighlightSvelte code={examples['../../examples/Numberline.svelte'] as string} numberLine highlightedLines={[3, 7]} --highlighted-background="#be46d4" />

Using highlightedRanges

Use highlightedLines and/or highlightedRanges props to highlight lines as the following example.

1 <script lang="ts"> 
2
  function greet() {
3
    alert('Welcome to Svelte!');
4
  }
5 </script> 
6 
 
7
<button onclick={greet}>click me</button>
8 
 
9 <style> 
10
  button {
11
    font-size: 2em;
12
  }
13 </style> 
14 
 

<script lang="ts">
  import { HighlightSvelte } from 'svelte-rune-highlight';
  const examples = import.meta.glob('./*.svelte', {
    query: '?raw',
    import: 'default',
    eager: true
  });
</script>

<HighlightSvelte
  code={examples['./Numberline.svelte'] as string}
  numberLine
  highlightedRanges={[
    [2, 4],
    [10, 12]
  ]}
  highlightedLines={[7]}
  --highlighted-background="#be46d4"
/>

`1`	`<script lang="ts">`
`2`	`function greet() {`
`3`	`alert('Welcome to Svelte!');`
`4`	`}`
`5`	`</script>`
`6`
`7`	`<button onclick={greet}>click me</button>`
`8`
`9`	`<style>`
`10`	`button {`
`11`	`font-size: 2em;`
`12`	`}`
`13`	`</style>`
`14`

`1`	`<script lang="ts">`
`2`	`function greet() {`
`3`	`alert('Welcome to Svelte!');`
`4`	`}`
`5`	`</script>`
`6`
`7`	`<button onclick={greet}>click me</button>`
`8`
`9`	`<style>`
`10`	`button {`
`11`	`font-size: 2em;`
`12`	`}`
`13`	`</style>`
`14`