Using fuz_code

The Code Svelte component supports syntax styling, originally based on Prism (prismjs.com) by Lea Verou.

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

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

then use Code:

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

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

outputs:

<header>hello world</header>

Dependencies
#

By default fuz_code depends on fuz_css to provide color-schema-aware color variables. If you're not using it, import theme_variables.css or bring your own:

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

Static compilation
#

The svelte_preprocess_fuz_code preprocessor compiles static Code content at build time, eliminating runtime syntax highlighting:

// svelte.config.js
import {svelte_preprocess_fuz_code} from '@fuzdev/fuz_code/svelte_preprocess_fuz_code.js';

export default {
  preprocess: [
    svelte_preprocess_fuz_code(),
    vitePreprocess(),
  ],
};

Static string content props are highlighted at build time and replaced with pre-rendered HTML. Dynamic content is left unchanged for runtime highlighting.

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="..." />

Programmatic usage
#

fuz_code can be used directly from TypeScript without Svelte. Import syntax_styler_global for a pre-configured instance with all built-in grammars:

import {syntax_styler_global} from '@fuzdev/fuz_code/syntax_styler_global.js';

const html = syntax_styler_global.stylize('const x: number = 42;', 'ts');

returns HTML string:

<span class="token_keyword">const</span> x<span class="token_type_annotation"><span class="token_:">:</span><span class="token_type"> <span class="token_builtin">number</span> </span></span><span class="token_operator">=</span> <span class="token_number">42</span><span class="token_punctuation">;</span>

then rendered with:

<code data-lang="ts">{@html programmatic_result}</code>

we get:

const x: number = 42;

For a custom configuration, create your own SyntaxStyler and register only the grammars you need:

import {SyntaxStyler} from '@fuzdev/fuz_code/syntax_styler.js';
import {add_grammar_css} from '@fuzdev/fuz_code/grammar_css.js';
import {add_grammar_markup} from '@fuzdev/fuz_code/grammar_markup.js';

const styler = new SyntaxStyler();
add_grammar_markup(styler);
add_grammar_css(styler);

const html = styler.stylize('<div class="example">hello</div>', 'html');

Experimental highlighting API
#

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.