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.
<script>
import { page } from "$app/state";
import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from "flowbite-svelte";
let activeUrl = $derived(page.url.pathname);
</script>
<Navbar>
<NavBrand href="/">
<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Svelte Rune Highlight</span>
</NavBrand>
<NavHamburger />
<NavUl {activeUrl}>
<NavLi href="/">Home</NavLi>
<NavLi href="/docs/components/navbar">Navbar</NavLi>
<NavLi href="/docs/components/accordion">Accordion</NavLi>
<NavLi href="/docs/components/alert">Alert</NavLi>
<NavLi href="/docs/components/avatar">Avatar</NavLi>
</NavUl>
</Navbar><script lang="ts">
import { HighlightSvelte } from 'svelte-rune-highlight';
const exampleModules = import.meta.glob('./*.*', {
query: '?raw',
import: 'default',
eager: true
}) as Record<string, string>;
</script>
<HighlightSvelte code={exampleModules['./sample-2.md'] as string} langtag --langtag-color="green" />
HighlightSvelte component has the following props:
code?: string;
langtag?: boolean;
preClass?: string;
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