@fuzdev/fuz_code

syntax styler for TypeScript, Svelte, Markdown, and more 🎨

code.fuz.dev

fuz_code is a syntax styler: it turns source code into HTML with token CSS classes, or ranges for the CSS Custom Highlight API. It originated as a fork of Prism by Lea Verou and has since been rewritten: each language has a lexer that scans without regular expressions and emits tokens as a flat stream in a typed array, for high performance. The flat token stream is an idea borrowed from pngwn, the author of Twinkleplop (a featureful alternative to fuz_code).

Twinkleplop is the broader project: it compiles declarative grammars, covers more languages, and ships themes, annotations, and markdown integrations. fuz_code is narrower, with a lexer written as ordinary code for each of a small set of languages, and a few Svelte components.

Features:

• a small, explicit API — stylize(code, lang) returns HTML, lex(code, lang) returns the flat token stream
• two outputs: HTML with .token_* classes for any framework, or ranges for the CSS Custom Highlight API (experimental)
• the lexers and styler have no dependencies
• lexers accept any input, including incomplete code mid-edit, and run in linear time
• built-in languages listed below, extensible by writing a lexer

Optional integrations:

• Svelte support:
  • a Svelte lexer
  • Svelte components: Code renders HTML; the experimental CodeHighlight and CodeTextarea use the CSS Custom Highlight API
  • a build-time preprocessor that pre-renders static Code content
• the default theme uses fuz_css variables for colors that adapt to the user's color-scheme — without fuz_css, import theme_variables.css

Compared to Shiki, fuz_code is one to two orders of magnitude faster for runtime usage, about 60x at the geometric mean across languages in syntax-highlighter-bench (repo), which also covers Prism and Twinkleplop. fuz_code runs one single-pass lexer per language rather than the Oniguruma regexp engine that TextMate grammars require. Shiki targets build-time use and supports far more languages and themes.

Usage

npm i -D @fuzdev/fuz_code

<script lang="ts">
    import Code from '@fuzdev/fuz_code/Code.svelte';
</script>

<!-- defaults to Svelte -->
<Code content={svelte_code} />
<!-- select a lang -->
<Code content={ts_code} lang="ts" />

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

// Generate HTML with syntax styling
const html = syntax_styler_global.stylize(code, 'ts');

// Get the flat event stream for custom processing
const lexed = syntax_styler_global.lex(code, 'ts');

Themes are CSS files and work with any framework.

With SvelteKit:

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

The default theme depends on fuz_css for color-scheme awareness. See the fuz_css usage docs for setup.

If you're not using fuz_css, import theme_variables.css alongside theme.css:

// Without fuz_css:
import '@fuzdev/fuz_code/theme.css';
import '@fuzdev/fuz_code/theme_variables.css';

Modules

• @fuzdev/fuz_code/syntax_styler_global.ts - pre-configured instance with all built-in languages
• @fuzdev/fuz_code/syntax_styler.ts - the SyntaxStyler class (register your own lexers)
• @fuzdev/fuz_code/lexer.ts - the lexer substrate: Lexer, token types, scanning helpers, HTML rendering
• @fuzdev/fuz_code/theme.css - default theme that depends on fuz_css
• @fuzdev/fuz_code/theme_variables.css - CSS variables for non-fuz_css users
• @fuzdev/fuz_code/Code.svelte - Svelte component for syntax styling with HTML generation
• @fuzdev/fuz_code/svelte_preprocess_fuz_code.ts - build-time preprocessor for static Code content

See src/lib for the full set of modules.

Languages

Registered by default in syntax_styler_global:

• markup (html, svg, mathml)
• xml (rss, atom, ssml)
• svelte
• md (markdown)
• ts (typescript, js, javascript — JS is a syntactic subset)
• css
• json — accepts comments (JSONC)
• sh (bash, shell — the POSIX/bash family)
• rust (rs)

Add a language by writing a SyntaxLang lexer and registering it with add_lang — see the existing lexer_*.ts modules.

Docs

• code.fuz.dev/docs - usage, samples, textarea, benchmark, and API
• CLAUDE.md - architecture and development guidelines
• fuz-stack skill - coding conventions shared across the Fuz stack
• sample files and tests

Issues and questions are welcome.

Experimental highlight support

For browsers that support the CSS Custom Highlight API, fuz_code provides an experimental component that can use native browser highlighting as an alternative to HTML generation.

Browser support is limited, and the API can't apply layout-affecting styles — bold, italics, font sizes — so themes that use them render differently. The standard Code.svelte component using HTML generation is recommended for most use cases.

<script lang="ts">
    import CodeHighlight from '@fuzdev/fuz_code/CodeHighlight.svelte';
</script>

<!-- auto-detect and use CSS Highlight API when available -->
<CodeHighlight content={code} mode="auto" />
<!-- force HTML mode -->
<CodeHighlight content={code} mode="html" />
<!-- force ranges mode (requires browser support) -->
<CodeHighlight content={code} mode="ranges" />

When using the experimental highlight component, import the corresponding theme:

// instead of theme.css, import theme_highlight.css in +layout.svelte:
import '@fuzdev/fuz_code/theme_highlight.css';

Experimental modules:

• @fuzdev/fuz_code/CodeHighlight.svelte - component supporting both HTML generation and CSS Custom Highlight API
• @fuzdev/fuz_code/CodeTextarea.svelte - editable <textarea> with live range highlighting
• @fuzdev/fuz_code/highlight_manager.ts - manages browser Highlight and Range APIs
• @fuzdev/fuz_code/theme_highlight.css - theme with ::highlight() pseudo-elements for CSS Custom Highlight API

Contributing

fuz.dev/contributing

License 🐦

Originally forked from Prism (prismjs.com) by Lea Verou — with the Svelte support originally based on prism-svelte by @pngwn.

0BSD