@fuzdev/fuz_code

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

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
• 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 Fuz CSS for colors that adapt to the user's runtime color-scheme preference. Non-Fuz CSS 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 @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.js';

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

// Get raw tokens for custom processing
import {tokenize_syntax} from '@fuzdev/fuz_code/tokenize_syntax.js';
const tokens = tokenize_syntax(code, syntax_styler_global.get_lang('ts'));

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

With SvelteKit:

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

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

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.js - pre-configured instance with all grammars
• @fuzdev/fuz_code/syntax_styler.js - base class for custom grammars
• @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 highlighting with HTML generation

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
• markdown
• 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.

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.

This feature is experimental, browser support is limited, and there can be subtle differences because some CSS like bold/italics are not supported. (nor are font sizes and other layout-affecting styles, in case your theme uses those) 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/highlight_manager.js - manages browser Highlight and Range APIs
• @fuzdev/fuz_code/theme_highlight.css - theme with ::highlight() pseudo-elements for CSS Custom Highlight API

License 🐦

based on Prism by Lea Verou

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

MIT