# @fuzdev/fuz\_code 中文文档

规范地址：https://npmcn.com/package/%40fuzdev/fuz_code/

版本：0\.59\.0
npm 元数据更新时间：2026-11-09T15:10:02.659Z
中文译文更新时间：2026-11-15T21:53:57.983Z
软件包许可：0BSD

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40fuzdev/fuz_code
原文对照：https://npmcn.com/package/%40fuzdev/fuz_code/?lang=original
项目主页：https://code.fuz.dev/
源码仓库：https://github.com/fuzdev/fuz_code

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：568 kB，83 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=24\.14
- 运行依赖：2 个
- peer 依赖：svelte ^5，esm-env ^1，@fuzdev/fuz\_css \>=0\.81\.0，@fuzdev/fuz\_util \>=0\.81\.0
- 首次发布：2025-12-07T14:59:22.558Z
- 最新版本发布：2026-11-09T15:10:02.220Z
- 近 30 天下载量：2255（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：31（近 12 个月 31 个）

## 中文简介

typeScript、 Svelte、 Markdown 等的语法样式器

## 安装

```sh
npm install @fuzdev/fuz_code
```

也可以使用：`pnpm add @fuzdev/fuz_code`、`yarn add @fuzdev/fuz_code`、`bun add @fuzdev/fuz_code`

## README

# @fuzdev/fuz code (中文(简体) )

[![a friendly pink spider facing you](https://npmcn.com/package/%40fuzdev/fuz_code/static/logo.svg)](https://code.fuz.dev/)

> typeScript、Svelte、Markdown 和更多QQ的语法样式器

**[代码.fuz.dev](https://code.fuz.dev/)**

`fuz_code` 是语法样式器: 它将源代码变为 HTML 符号 CSS 类或区域 [CSS 自定义突出显示 API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API)。 。 。 . 它起源于一个叉子 [棱镜](https://prismjs.com/) 以 [莉娅·维鲁](https://lea.verou.me/) 并自此被重写: 每种语言都有一个可以扫描的语法,而不 正则表达式和发报符作为平流在打入的数组中,用于高性能. 平平的象征流是一个想法 从 [弹出](https://pngwn.at/), (中文(简体) ), 来文人: [双脚](https://twinkleplop.pngwn.at/) (fuz code的特有替代品).

Twinkleplop是更广泛的项目:它汇编了声明语法,覆盖更多 以及船舶主题、说明和减值整合. fuz code 范围更窄,每个小字都写作普通代码 组合语言,以及一些 Svelte 组件.

特征 :

-   一个小的,明确的API—— `stylize(code, lang)` 返回 HTML,请返回, `lex(code, lang)` 返回平面符号流
-   两种输出: HTML 与 `.token_*` 区域 CSS 自定义高亮 API ([实验](https://npmcn.com/package/%40fuzdev/fuz_code/#readme-experimental-highlight-support)(中文(简体) )
-   词典和样式没有依赖关系
-   lexers 接受任何输入, 包括不完整的代码中间编辑, 并在线性时间内运行
-   内建语言 [名单如下:](https://npmcn.com/package/%40fuzdev/fuz_code/#readme-languages),可以通过写出出一个出自

可选融合:

-   [丝绒](https://svelte.dev/) 支持:
    -   (单位:千美元) [斯维尔特语汇法](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/lexer_svelte.ts)
    -   Svelte 组件 : [`Code`](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/Code.svelte) 使 HTML; 实验 [`CodeHighlight`](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/CodeHighlight.svelte) 财务报告和审定财务报表 [`CodeTextarea`](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/CodeTextarea.svelte) 使用 CSS 自定义突出显示 API
    -   (单位:千美元) [构建时间预处理器](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/svelte_preprocess_fuz_code.ts) 之前放弃静态 `Code` 内容
-   页:1 [默认主题](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/theme.css) 用途 [furz css (中文(简体) )](https://github.com/fuzdev/fuz_css) 适应颜色的变量 到用户的 `color-scheme` — 不包含 fuz css, 导入 [主题( v).css](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/theme_variables.css)

比较 [志纪](https://github.com/shikijs/shiki), fuz code 是 1 到 2 对运行时间使用速度更快, 几何平均值约为 60x 语文 [语法 - 高亮语句](https://syntax-highlighter-bench.ryanatkn.com/) (单位:千美元)[还原](https://github.com/ryanatkn/syntax-highlighter-bench)))),该词也 涵盖棱镜和 [双脚](https://twinkleplop.pngwn.at/). fuz code 运行一个 按语文而不是按 [Oniguruma regexp 引擎](https://shiki.matsu.io/guide/regex-engines) 那个 TextMate语法需要. 史基瞄准建设时间的使用,支持的要多得多 语言和主题.

## 使用量

```bash
npm i -D @fuzdev/fuz_code
```

```svelte
<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" />
```

```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');
```

主题为CSS文件并使用任何框架.

与斯维尔特基特:

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

这个 [默认主题](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/theme.css) 取决于 [furz css (中文(简体) )](https://github.com/fuzdev/fuz_css) 页:1 [颜色方案](https://css.fuz.dev/docs/themes) 认识. 见 [fuz cs 使用文件](https://css.fuz.dev/docs/introduction#Usage) 为设置.

如果您没有使用fuz css,请导入 `theme_variables.css` 并行 `theme.css`数字 :

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

### 模块

-   [@fuzdev/fuz code/syntax styler global.ts (中文(简体) )](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/syntax_styler_global.ts) - 说吧 所有内置语言的预配置实例
-   [@fuzdev/fuz code/ syntax styler.ts](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/syntax_styler.ts) - 说吧 页:1 `SyntaxStyler` 类( 注册您自己的入册)
-   [@fuzdev/fuz code/lexer.ts](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/lexer.ts) - 说吧 语法下方 : `Lexer`、 符号类型、 扫描助手、 HTML 渲染
-   [@fuzdev/fuz code/them.css](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/theme.css) - 说吧 依赖的默认主题 [furz css (中文(简体) )](https://github.com/fuzdev/fuz_css)
-   [@fuzdev/fuz code/them 可变.css](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/theme_variables.css) - 说吧 非fuz cs用户的 CSS 变量
-   [@fuzdev/fuz code/Code. svelte (英语)](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/Code.svelte) - 说吧 用于 HTML 生成语法样式的 Svelte 组件
-   [@fuzdev/fuz code/svelte preprocess fuz code.ts (中文(简体) )](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/svelte_preprocess_fuz_code.ts) - 说吧 静态构建时预处理器 `Code` 内容

见 [`src/lib`](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib) 用于全套模块.

### 语文

默认注册于 `syntax_styler_global`数字 :

-   [`markup`](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/lexer_markup.ts) (单位:千美元)`html`, (中文(简体) ), `svg`, (中文(简体) ), `mathml`(中文(简体) )
-   [`xml`](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/lexer_markup.ts) (单位:千美元)`rss`, (中文(简体) ), `atom`, (中文(简体) ), `ssml`(中文(简体) )
-   [`svelte`](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/lexer_svelte.ts)
-   [`md`](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/lexer_md.ts) (单位:千美元)`markdown`(中文(简体) )
-   [`ts`](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/lexer_ts.ts) (单位:千美元)`typescript`, (中文(简体) ), `js`, (中文(简体) ), `javascript` ——JS是一个综合子集)
-   [`css`](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/lexer_css.ts)
-   [`json`](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/lexer_json.ts) 接受评论(JSONC)
-   [`sh`](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/lexer_bash.ts) (单位:千美元)`bash`, (中文(简体) ), `shell` - POSIX/Bash家庭)
-   [`rust`](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/lexer_rust.ts) (单位:千美元)`rs`(中文(简体) )

通过写入添加语言 `SyntaxLang` 税法和登记 `add_lang` - 见现有的 `lexer_*.ts` 模块.

### 文档

-   [代码.fuz.dev/docs](https://code.fuz.dev/docs) - 说吧 [使用量](https://code.fuz.dev/docs/usage), (中文(简体) ), [样本](https://code.fuz.dev/docs/samples), (中文(简体) ), [文本区域](https://code.fuz.dev/docs/textarea), (中文(简体) ), [基准](https://code.fuz.dev/docs/benchmark),以及 [API 密码](https://code.fuz.dev/docs/api)
-   [克劳德·姆德](https://npmcn.com/package/%40fuzdev/fuz_code/CLAUDE.md) - 建筑和发展准则
-   [高科技 高科技](https://docs.fuz.dev/skills/fuz-stack) - Fuz 堆栈共享编码惯例
-   [样本文件](https://npmcn.com/package/%40fuzdev/fuz_code/src/test/fixtures/samples/) 财务报告和审定财务报表 [测试](https://npmcn.com/package/%40fuzdev/fuz_code/src/test/)

欢迎提出问题.

## 实验突出显示支持

用于支持 [CSS 自定义突出显示 API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API), (中文(简体) ), fuz code 提供了一个可以使用本地浏览器突出显示的实验组件 作为HTML生成的替代.

浏览器支持有限,API不能应用布局-影响样式- 粗体,斜体,字体大小——所以使用它们的主题会产生不同的效果. 标准 [密码 丝绒](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/Code.svelte) 使用 HTML 生成组件 建议大多数情况下使用.

```svelte
<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" />
```

在使用实验突出显示组件时,导入相应的主题:

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

实验模块:

-   [校对:Soup](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/CodeHighlight.svelte) - 说吧 支持 HTML 生成和 CSS 自定义突出 API 组件
-   [@fuzdev/fuz code/CodeTextarea. svelte (英语)](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/CodeTextarea.svelte) - 说吧 可编辑 `<textarea>` 显示活动区域
-   [@fuzdev/fuz code/highlight manager.ts (中文(简体) )](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/highlight_manager.ts) - 说吧 管理浏览器 [`Highlight`](https://developer.mozilla.org/en-US/docs/Web/API/Highlight) 财务报告和审定财务报表 [`Range`](https://developer.mozilla.org/en-US/docs/Web/API/Range) APIs 密码
-   [@fuzdev/fuz code/them highlight.css](https://npmcn.com/package/%40fuzdev/fuz_code/src/lib/theme_highlight.css) - 说吧 主题为 `::highlight()` cSS 自定义高亮 API 的伪元素

## 捐款

[fuz.dev/贡献者](https://www.fuz.dev/contributing)

## 许可证 [🐦](https://wikipedia.org/wiki/Free_and_open-source_software)

最初从 [棱镜](https://github.com/PrismJS/prism) (单位:千美元)[棱镜.com](https://prismjs.com/)作者: [莉娅·维鲁](https://lea.verou.me/) —— 说 与 Svelte 支持原基于 [`prism-svelte`](https://github.com/pngwn/prism-svelte) 以 [翻译:](https://github.com/pngwn)。 。 。 .

[0BSD 数据](https://npmcn.com/package/%40fuzdev/fuz_code/LICENSE)

## 常见问题

### @fuzdev/fuz\_code 是什么？

typeScript、 Svelte、 Markdown 等的语法样式器

### 如何安装 @fuzdev/fuz\_code？

在项目目录运行 npm install @fuzdev/fuz\_code，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：esm-env（^1）、@fuzdev/fuz\_util（\>=0\.81\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @fuzdev/fuz\_code 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @fuzdev/fuz\_code 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @fuzdev/fuz\_code 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=24\.14。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @fuzdev/fuz\_code 可以商用吗？

@fuzdev/fuz\_code 使用 0BSD 许可。几乎没有限制：可自由使用、修改和分发，连保留版权声明也不要求。以上为概括，不构成法律意见，请以许可原文为准。

### @fuzdev/fuz\_code 的下载量有多少？

根据 npm 官方下载统计，@fuzdev/fuz\_code 在 2026/10/16 – 2026/11/14 这 30 天内被下载 2,255 次，日均约 75 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @fuzdev/fuz\_code 还在维护吗？

最新版本 0\.59\.0 发布于 2026/11/09（6 天前）；至今共发布 31 个版本，其中过去 12 个月发布了 31 个；首次发布于 2025/12/07。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。