The Code Svelte component supports syntax styling originally based on Prism by Lea Verou.

To use it, import the default theme or your own:

// +layout.svelte
import '@ryanatkn/fuz_code/theme.css'; // add this

then use Code:

<script>
	// Something.svelte
	import Code from '@ryanatkn/fuz_code/Code.svelte';
</script>

<Code content="<header>hello world</header>" />

outputs:

<header>hello world</header>

Code styles Svelte by default, originally based on prism-svelte by @pngwn:

<Code content="<scr..." />

styled:

<script lang="ts">
	import Card from '@fuz.dev/fuz-library/Card.svelte';
	console.log('hello Card', Card);
</script>

<Card>
	<div class="greeting">hi {friend}</div>
</Card>

Code supports TypeScript with lang="ts":

<Code lang="ts" content="export type A<T> = ('b' | 3) & T;" />

export type A<T> = ('b' | 3) & T;

Passing lang={null} disables syntax styling:

<Code lang={null} content="<aside>all is gray</aside>" />

Code is a block by default:

c

<div>ab<Code content="c" /></div>

Code can be inlined with <Code inline content="..." />