{"id":15162168,"url":"https://github.com/ryanatkn/fuz_code","last_synced_at":"2025-10-25T00:30:26.545Z","repository":{"id":222774472,"uuid":"694971003","full_name":"ryanatkn/fuz_code","owner":"ryanatkn","description":"syntax highlighting using PrismJS for Svelte, SvelteKit, and Fuz","archived":false,"fork":false,"pushed_at":"2024-09-23T17:02:00.000Z","size":971,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-09-29T11:51:49.481Z","etag":null,"topics":["prism","prismjs","svelte","sveltejs","syntax-highlighting","syntax-highlighting-theme","typescript"],"latest_commit_sha":null,"homepage":"https://code.fuz.dev/","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ryanatkn.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"ryanatkn","patreon":"ryanatkn"}},"created_at":"2023-09-22T04:37:46.000Z","updated_at":"2024-09-23T17:01:53.000Z","dependencies_parsed_at":"2024-08-15T03:55:58.775Z","dependency_job_id":null,"html_url":"https://github.com/ryanatkn/fuz_code","commit_stats":null,"previous_names":["ryanatkn/fuz_code"],"tags_count":27,"template":false,"template_full_name":"ryanatkn/fuz_template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanatkn%2Ffuz_code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanatkn%2Ffuz_code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanatkn%2Ffuz_code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanatkn%2Ffuz_code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanatkn","download_url":"https://codeload.github.com/ryanatkn/fuz_code/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219867385,"owners_count":16555891,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["prism","prismjs","svelte","sveltejs","syntax-highlighting","syntax-highlighting-theme","typescript"],"created_at":"2024-09-27T01:20:16.136Z","updated_at":"2025-10-25T00:30:26.537Z","avatar_url":"https://github.com/ryanatkn.png","language":"Svelte","funding_links":["https://github.com/sponsors/ryanatkn","https://patreon.com/ryanatkn"],"categories":[],"sub_categories":[],"readme":"# @ryanatkn/fuz_code\n\n[\u003cimg src=\"static/logo.svg\" alt=\"a friendly pink spider facing you\" align=\"right\" width=\"192\" height=\"192\"\u003e](https://code.fuz.dev/)\n\n\u003e syntax styling utilities and components for TypeScript, Svelte, SvelteKit 🎨\n\n**[code.fuz.dev](https://code.fuz.dev/)**\n\nfuz_code is a rework of [Prism](https://github.com/PrismJS/prism)\n([prismjs.com](https://prismjs.com/)).\nThe main changes:\n\n- has a minimal and explicit API to generate stylized HTML, and knows nothing about the DOM\n- uses stateless ES modules, instead of globals with side effects and pseudo-module behaviors\n- integrates with the\n  [CSS Custom Highlight API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API)\n  when available\n- has various incompatible changes, so using Prism grammars requires some tweaks\n- smaller (by 7kB minified and 3kB gzipped, ~1/3 less)\n- written in TypeScript\n- is a fork, see the [MIT license](https://github.com/ryanatkn/fuz_code/blob/main/LICENSE)\n\nLike Prism, there are zero dependencies (unless you count Prism's `@types/prismjs`),\nbut there are two optional dependencies:\n\n- fuz_code provides optional builtin [Svelte](https://svelte.dev/) support\n  with a [Svelte grammar](src/lib/grammar_svelte.ts)\n  based on [`prism-svelte`](https://github.com/pngwn/prism-svelte)\n  and a [Svelte component](src/lib/Code.svelte) for convenient usage.\n- The [default theme](src/lib/theme.css) integrates\n  with my CSS library [Moss](https://github.com/ryanatkn/moss) for colors that adapt to the user's runtime `color-scheme` preference.\n  Non-Moss users should import [theme_variables.css](src/lib/theme_variables.css)\n  or otherwise define those variables.\n\nCompared to [Shiki](https://github.com/shikijs/shiki),\nthis library is much lighter\n(with its faster `shiki/engine/javascript`, 503kB minified to 16kB, 63kb gzipped to 5.6kB),\nand [vastly faster](./benchmark/compare/results.md)\nfor runtime usage because it uses JS regexps instead of\nthe [Onigurama regexp engine](https://shiki.matsu.io/guide/regex-engines)\nused by TextMate grammars.\nShiki also has 38 dependencies instead of 0.\nHowever this is not a fair comparison because\nPrism grammars are much simpler and less powerful than TextMate's,\nand Shiki is designed mainly for buildtime usage.\n\n## Usage\n\n```bash\nnpm i -D @ryanatkn/fuz_code\n```\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport Code from '$lib/Code.svelte';\n\u003c/script\u003e\n\n\u003c!-- auto-detects and uses CSS Highlight API when available, defaults to Svelte --\u003e\n\u003cCode content={svelte_code} /\u003e\n\u003c!-- select a lang --\u003e\n\u003cCode content={ts_code} lang=\"ts\" /\u003e\n\n\u003c!-- force specific rendering mode --\u003e\n\u003cCode content={code} mode=\"html\" /\u003e\n\u003cCode content={code} mode=\"ranges\" /\u003e\n```\n\n```ts\nimport {syntax_styler_global} from '$lib/syntax_styler_global.js';\n\n// Direct usage\nconst html = syntax_styler_global.stylize(code, 'ts');\n\n// Get raw tokens\nimport {tokenize_syntax} from '$lib/tokenize_syntax.js';\nconst tokens = tokenize_syntax(code, syntax_styler_global.get_lang('ts'));\n```\n\nBy default the `Code` component automatically uses the\n[CSS Custom Highlight API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API)\nwhen available for improved performance,\nfalling back to HTML generation for non-browser runtimes and older browsers.\n\nThemes are just CSS files, so they work with any JS framework.\n\nWith SvelteKit:\n\n```ts\n// +layout.svelte\nimport '@ryanatkn/fuz_code/theme.css';\n```\n\nThe primary themes (currently just [one](src/lib/theme.css)) have a dependency\non my CSS library [Moss](https://github.com/ryanatkn/moss)\nfor [color-scheme](https://moss.ryanatkn.com/docs/themes) awareness.\nSee the [Moss docs](https://moss.ryanatkn.com/) for its usage.\n\nIf you're not using Moss, import `theme_variables.css` alongside `theme.css`:\n\n```ts\n// Without Moss:\nimport '@ryanatkn/fuz_code/theme.css';\nimport '@ryanatkn/fuz_code/theme_variables.css';\n```\n\n### Modules\n\n- [@ryanatkn/fuz_code/syntax_styler_global.js](src/lib/syntax_styler_global.ts) - pre-configured instance with all grammars\n- [@ryanatkn/fuz_code/syntax_styler.js](src/lib/syntax_styler.ts) - base class for custom grammars\n- [@ryanatkn/fuz_code/theme.css](src/lib/theme.css) -\n  default theme that depends on [Moss](https://github.com/ryanatkn/moss)\n- [@ryanatkn/fuz_code/theme_variables.css](src/lib/theme_variables.css) -\n  CSS variables for non-Moss users\n- [@ryanatkn/fuz_code/Code.svelte](src/lib/Code.svelte) -\n  Svelte component supporting both HTML generation and native browser highlights\n- [@ryanatkn/fuz_code/highlight_manager.js](src/lib/highlight_manager.ts) -\n  uses the browser [`Highlight`](https://developer.mozilla.org/en-US/docs/Web/API/Highlight)\n  and [`Range`](https://developer.mozilla.org/en-US/docs/Web/API/Range) APIs\n  as a faster alternative to generating spans with classes\n\nI encourage you to poke around [`src/lib`](src/lib) if you're interested in using fuz_code.\n\n### Grammars\n\nEnabled by default in `syntax_styler_global`:\n\n- [`markup`](src/lib/grammar_markup.ts) (html, xml, etc)\n- [`svelte`](src/lib/grammar_svelte.ts)\n- [`ts`](src/lib/grammar_ts.ts)\n- [`css`](src/lib/grammar_css.ts)\n- [`js`](src/lib/grammar_js.ts)\n- [`json`](src/lib/grammar_json.ts)\n- [`clike`](src/lib/grammar_clike.ts)\n\n### More\n\nDocs are a work in progress:\n\n- this readme has basic usage instructions\n- [CLAUDE.md](./CLAUDE.md) has more high-level docs including benchmarks\n- [code.fuz.dev](https://code.fuz.dev/) has usage examples with the Svelte component\n- [samples](https://code.fuz.dev/samples) on the website\n  (also see the [sample files](src/lib/samples/))\n- [tests](src/lib/syntax_styler.test.ts)\n\nPlease open issues if you need any help.\n\n## Todo\n\n- add builtin grammars for `markdown` and `regexp`\n- lazy load the builtin grammars in `Code.svelte`\n- improve the default theme colors\n- add more themes\n- add a Vite plugin to do syntax styling at build-time for static cases\n- add a worker helper module\n- add some useful plugins, flesh out the API (start with line emphasis)\n- improve the TypeScript grammar to tokenize types\n- improve the grammars in subtle ways\n\n## License [🐦](https://wikipedia.org/wiki/Free_and_open-source_software)\n\nbased on [Prism](https://github.com/PrismJS/prism)\nby [Lea Verou](https://lea.verou.me/)\n\nthe [Svelte grammar](src/lib/grammar_svelte.ts)\nis based on [`prism-svelte`](https://github.com/pngwn/prism-svelte)\nby [@pngwn](https://github.com/pngwn)\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanatkn%2Ffuz_code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanatkn%2Ffuz_code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanatkn%2Ffuz_code/lists"}