syntax styling utilities and components for TypeScript, Svelte, and Markdown 🎨
fuz_code is a rework of Prism (prismjs.com). The main changes:
Like Prism, there are zero dependencies (unless you count Prism's @types/prismjs),
but there are two optional dependencies:
prism-svelte
and a Svelte component for convenient usage.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.
npm i -D @ryanatkn/fuz_code
<script lang="ts">
import Code from '@ryanatkn/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 '@ryanatkn/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 '@ryanatkn/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 '@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';
I encourage you to poke around src/lib if you're interested in using fuz_code.
Enabled by default in syntax_styler_global:
Docs are a work in progress:
Please open issues if you need any help.
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 Code_Highlight from '@ryanatkn/fuz_code/Code_Highlight.svelte';
</script>
<!-- auto-detect and use CSS Highlight API when available -->
<Code_Highlight content={code} mode="auto" />
<!-- force HTML mode -->
<Code_Highlight content={code} mode="html" />
<!-- force ranges mode (requires browser support) -->
<Code_Highlight 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 '@ryanatkn/fuz_code/theme_highlight.css';
Experimental modules:
Highlight
and Range APIs::highlight() pseudo-elements for CSS Custom Highlight APIthe Svelte grammar
is based on prism-svelte
by @pngwn