usage #

fuz_code tokenizes code with one lexer per language, without regular expressions, and generates HTML with .token_* classes for a theme to style. The Code Svelte component is the typical entry point.

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
#

The default theme reads color-scheme-aware color variables from fuz_css; see its usage docs for setup. Without fuz_css, import theme_variables.css or define the variables yourself:

// +layout.svelte
import '@fuzdev/fuz_code/theme.css';
// if not using fuz_css, add this too:
import '@fuzdev/fuz_code/theme_variables.css';

Preprocessor
#

The svelte_preprocess_fuz_code preprocessor styles static Code content at build time:

// vite.config.ts
import {defineConfig} from 'vite';
import {sveltekit} from '@sveltejs/kit/vite';
import {vitePreprocess} from '@sveltejs/vite-plugin-svelte';
import {svelte_preprocess_fuz_code} from '@fuzdev/fuz_code/svelte_preprocess_fuz_code.ts';

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

A content that is statically known (a string, a module-level constant, or a ternary of those) is replaced with pre-rendered HTML. Anything else is left for runtime styling.

Svelte support
#

The Svelte lexer was originally based on prism-svelte by @pngwn (pngwn.at). Code styles Svelte by default:

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

styled:

<script lang="ts">
	import Card from '@fuzdev/fuz_ui/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;
```

Disabling styling
#

Passing lang={null} disables syntax styling:

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

The plaintext language does the same by name. Every SyntaxStyler registers it, so it also works with stylize:

<Code lang="plaintext" content="<aside>all is gray</aside>" /> <aside>all is gray</aside>

A lang that isn't registered also renders as plain text in Code, and logs an error in development. Called directly, stylize and lex throw on an unregistered language, so check with has_lang first or fall back to plaintext:

const html = syntax_styler_global.stylize(
	text,
	syntax_styler_global.has_lang(lang) ? lang : 'plaintext'
);

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 languages:

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

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

returns an 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>

renders:

const x: number = 42;

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

import {SyntaxStyler} from '@fuzdev/fuz_code/syntax_styler.ts';
import {lexer_markup} from '@fuzdev/fuz_code/lexer_markup.ts';
import {lexer_css} from '@fuzdev/fuz_code/lexer_css.ts';

const styler = new SyntaxStyler();
styler.add_lang(lexer_markup);
styler.add_lang(lexer_css);

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

Experimental highlighting API
#

fuz_code also has experimental support for the CSS Custom Highlight API with CodeHighlight — see the samples and textarea.