@ryanatkn/fuz_code

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

code.fuz.dev

fuz_code is a rework of Prism (prismjs.com). The main changes:

• has a minimal and explicit API to generate stylized HTML, and knows nothing about the DOM
• uses stateless ES modules, instead of globals with side effects and pseudo-module behaviors
• integrates with the CSS Custom Highlight API when available
• has various incompatible changes, so using Prism grammars requires some tweaks
• smaller (by 7kB minified and 3kB gzipped, ~1/3 less)
• written in TypeScript
• is a fork, see the MIT license

Like Prism, there are zero dependencies (unless you count Prism's @types/prismjs), but there are two optional dependencies:

• fuz_code provides optional builtin Svelte support with a Svelte grammar based on prism-svelte and a Svelte component for convenient usage.
• The default theme integrates with my CSS library Moss for colors that adapt to the user's runtime color-scheme preference. Non-Moss users should import theme_variables.css or otherwise define those variables.

Compared to Shiki, this library is much lighter (with its faster shiki/engine/javascript, 503kB minified to 16kB, 63kb gzipped to 5.6kB), and vastly faster for runtime usage because it uses JS regexps instead of the Onigurama regexp engine used by TextMate grammars. Shiki also has 38 dependencies instead of 0. However this is not a fair comparison because Prism grammars are much simpler and less powerful than TextMate's, and Shiki is designed mainly for buildtime usage.

Usage

npm i -D @ryanatkn/fuz_code

<script lang="ts">
    import Code from '$lib/Code.svelte';
</script>

<!-- auto-detects and uses CSS Highlight API when available, defaults to Svelte -->
<Code content={svelte_code} />
<!-- select a lang -->
<Code content={ts_code} lang="ts" />

<!-- force specific rendering mode -->
<Code content={code} mode="html" />
<Code content={code} mode="ranges" />

import {syntax_styler_global} from '$lib/syntax_styler_global.js';

// Direct usage
const html = syntax_styler_global.stylize(code, 'ts');

// Get raw tokens
import {tokenize_syntax} from '$lib/tokenize_syntax.js';
const tokens = tokenize_syntax(code, syntax_styler_global.get_lang('ts'));

By default the Code component automatically uses the CSS Custom Highlight API when available for improved performance, falling back to HTML generation for non-browser runtimes and older browsers.

Themes are just CSS files, so they work with any JS framework.

With SvelteKit:

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

The primary themes (currently just one) have a dependency on my CSS library Moss for color-scheme awareness. See the Moss docs for its usage.

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

// Without Moss:
import '@ryanatkn/fuz_code/theme.css';
import '@ryanatkn/fuz_code/theme_variables.css';

Modules

• @ryanatkn/fuz_code/syntax_styler_global.js - pre-configured instance with all grammars
• @ryanatkn/fuz_code/syntax_styler.js - base class for custom grammars
• @ryanatkn/fuz_code/theme.css - default theme that depends on Moss
• @ryanatkn/fuz_code/theme_variables.css - CSS variables for non-Moss users
• @ryanatkn/fuz_code/Code.svelte - Svelte component supporting both HTML generation and native browser highlights
• @ryanatkn/fuz_code/highlight_manager.js - uses the browser Highlight and Range APIs as a faster alternative to generating spans with classes

I encourage you to poke around src/lib if you're interested in using fuz_code.

Grammars

Enabled by default in syntax_styler_global:

• markup (html, xml, etc)
• svelte
• ts
• css
• js
• json
• clike

More

Docs are a work in progress:

• this readme has basic usage instructions
• CLAUDE.md has more high-level docs including benchmarks
• code.fuz.dev has usage examples with the Svelte component
• samples on the website (also see the sample files)
• tests

Please open issues if you need any help.

Todo

• add builtin grammars for markdown and regexp
• lazy load the builtin grammars in Code.svelte
• improve the default theme colors
• add more themes
• add a Vite plugin to do syntax styling at build-time for static cases
• add a worker helper module
• add some useful plugins, flesh out the API (start with line emphasis)
• improve the TypeScript grammar to tokenize types
• improve the grammars in subtle ways

License 🐦

based on Prism by Lea Verou

the Svelte grammar is based on prism-svelte by @pngwn

MIT