HighlightSvelte Component

Example 1

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

<HighlightSvelte code={modules['./samples/sample-1.svelte'] as string} langtag --langtag-color="aqua" />

Here's the resulting output from the code:

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

<HighlightSvelte code={code2} />

Example 2

Using different --langtag-color .

<HighlightSvelte code={modules['./samples/sample-2.svelte'] as string} langtag --langtag-color="red" />

The code creates this output:

<script>
	import { Navbar, NavLi, NavBrand, NavUl, uiHelpers } from 'flowbite-svelte';
	let nav = uiHelpers();

	let navStatus = $state(false);
	let toggleNav = nav.toggle;
	let closeNav = nav.close;

	$effect(() => {
		// this can be done adding nav.navStatus directly to DOM element
		// without using effect
		navStatus = nav.isOpen;
	});
</script>


<Navbar {toggleNav} {closeNav} {navStatus} breakPoint="md">
	{#snippet brand()}
		<NavBrand siteName="Svelte 5">
			<img width="30" src="/images/svelte-icon.png" alt="svelte icon" />
		</NavBrand>
	{/snippet}

	<NavUl>
		<NavLi href="/">Home</NavLi>
		<NavLi href="/components/navbar">Navbar</NavLi>
		<NavLi href="/components/footer">Footer</NavLi>
	</NavUl>
</Navbar>

Props

HighlightSvelte component has the following props:

code?: string;
langtag?: boolean;
preClass?: string;

Language tag style

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

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