@ryanatkn/fuz

fuz_code

syntax styling utilities and components for TypeScript, Svelte, and Markdown 🎨

code.fuz.dev

repo 0.36.0 npm

npm i -D @ryanatkn/fuz_code

🎨

docs

samples benchmark about

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 to provide color-schema-aware color variables. If you're not using it, import theme_variables.css or bring your own:

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

Caveats

The Code component generates HTML with CSS classes for text highlighting. It also includes experimental support for the CSS Custom Highlight API with CodeHighlight, see the samples for more.

Performing syntax styling at runtime like this is often wasteful. The plan is to provide a Vite plugin to optimize static cases. For now you can use lang={null} with pre-highligted HTML.

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", and fenced blocks for all languages:

# hello `world`

```ts
	const a = 1;
```

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:

abc

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

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