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 'svelte-5-ui-lib';
	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