The Code component supports syntax highlighting with Prism (repo).

It depends on two packages that you must install yourself:

npm i -D prismjs prism-svelte

Then import the styles:

// +layout.svelte
import '@ryanatkn/moss/style.css';
import '@ryanatkn/moss/theme.css'; // or your own
// add this:
import '@ryanatkn/fuz_code/prism.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 highlights Svelte by default:

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

highlighted:

<script>
	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 highlighting:

<aside>all is gray</aside>

<Code lang={null} content="..." />

Code is a block by default:

c

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

The remove_prism_css Vite plugin is an optimization that excludes the builtin Prism theme, letting you use a minimal theme that doesn't need selectors for overrides like @ryanatkn/fuz_code/prism.css, while also avoiding waste:

import type {UserConfig} from 'vite';
import {sveltekit} from '@sveltejs/kit/vite';
import {remove_prism_css} from '@ryanatkn/fuz_code/remove_prism_css_vite_plugin.js';

const config: UserConfig = {
	plugins: [sveltekit(), remove_prism_css()],
};

export default config;