Usage

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>

Dependencies

By default fuz_code depends on my CSS framework Moss. If you're not using it, import theme_variables.css:

// +layout.svelte
import '@ryanatkn/fuz_code/theme.css';
import '@ryanatkn/fuz_code/theme_variables.css'; // also this if not using Moss

Svelte support

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>

TypeScript support

Code supports TypeScript with lang="ts":

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

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

Markdown support

Code supports Markdown with lang="md":

<Code lang="md" content="# hello **world**" />

# hello **world**

Fallback to no styling

Passing lang={null} disables syntax styling:

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

<aside>all is gray</aside>

Layout

Code is a block by default:

c

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

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