# comark-ui 中文文档

规范地址：https://npmcn.com/package/comark-ui/

版本：0\.9\.0
npm 元数据更新时间：2026-11-03T06:22:38.556Z
中文译文更新时间：2026-11-03T09:06:57.412Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/comark-ui
原文对照：https://npmcn.com/package/comark-ui/?lang=original
项目主页：https://comark-ui.onmax.me/
源码仓库：https://github.com/onmax/comark-ui

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

- 包体积（解压后）：594 kB，105 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.12\.0
- 运行依赖：45 个
- peer 依赖：vue \>=3\.5，react \>=18，comark ^0\.8\.0，svelte \>=5\.20，@tiptap/pm ^3\.31\.0，@comark/html ^0\.8\.0，@tiptap/core ^3\.31\.0，@tiptap/vue-3 ^3\.31\.0，@tiptap/starter-kit ^3\.31\.0，@tiptap/extension-list ^3\.31\.0，@tiptap/extension-image ^3\.31\.0，@tiptap/extension-table ^3\.31\.0
- 首次发布：2026-10-27T08:02:06.058Z
- 最新版本发布：2026-11-03T06:22:38.236Z
- 已发布版本数：11（近 12 个月 11 个）

## 中文简介

一个安装中的每个标记-ui块：注释的屏幕截图，图表，差异，选项卡，缩放等，按照共享图标所需的顺序注册。关闭它们中的任何一个或传递其选项。

## 安装

```sh
npm install comark-ui
```

也可以使用：`pnpm add comark-ui`、`yarn add comark-ui`、`bun add comark-ui`

## README

# comark-ui

[![npm version](https://comark-ui.onmax.me/badge.svg?source=npm-version&package=comark-ui&icon=npm)](https://npmx.dev/package/comark-ui) [![npm downloads](https://comark-ui.onmax.me/badge.svg?source=npm-downloads&package=comark-ui&period=month&icon=npm)](https://npmx.dev/package/comark-ui) [![license](https://comark-ui.onmax.me/badge.svg?label=license&value=MIT)](https://npmx.dev/package/comark-ui) [![docs](https://comark-ui.onmax.me/badge.svg?label=docs&value=comark-ui.onmax.me)](https://comark-ui.onmax.me/getting-started/)

每一个 [Comark](https://comark.dev/) 块从 [comark-ui](https://comark-ui.onmax.me/) 在一次安装中，按照他们需要的顺序注册，并共享一个图标解析器 `:icon`、卡片、详细信息、文件树、选项卡和代码操作。

```sh
pnpm add comark @comark/html comark-ui
```

```ts
import { createHtmlRenderer } from "@comark/html";
import comarkUi from "comark-ui/html";

const render = createHtmlRenderer(comarkUi());
```

`comarkUi()` 返回 `{ plugins, components }`． 每个插件都是打开但是 `include`。通过 `false` 要关闭一个，它也会丢弃它的组件，或者一个对象传递给它选项：

```ts
comarkUi({
  zoom: false,
  code: { actions: [{ id: "run", label: "Run" }] },
  github: { references: { repo: "owner/name" } },
  include: { root: "content" },
});
```

`include` 关闭，因为它从磁盘读取文件；将其打开以将文件粘贴到文档中。 `cast`， `table`, `tests` 打开但不读取文件，直到你通过 `{ root }` 或 `{ read }`． 在浏览器中进行解析时，传递 `chips: { download: false }`，因为浏览器可能无法下载其他网站的图像。commark -critic没有它的样式组件，所以把它导出 `criticCss` 在页面上。块周围的文本（标题，段落，列表，表格，代码和引号）也被样式化，从shadcn/typeset在相同的令牌和范围内的文档；通过 `typeset: false` 当你的网站已经设置了Markdown样式。对于文档外部的内容，例如编辑器，请导入 `comark-ui/typeset.css` 然后加上 `comark-typeset` 类。看到 [排版](https://comark-ui.onmax.me/guide/typeset/)。

它也会返回 `tags` 和 `blocks`。 `tags` 是解析文档中除了组件之外可以包含的所有元素；对于组件的名称，它是Comark的允许列表 `security` 插件。 `blocks` 插件在解析时替换的块，例如 `::code-group`，筛选器需要在组件名称旁边显示。

## 渲染器

| 渲染器 | 进口 |
| --- | --- |
| `@comark/html` | `comark-ui/html` |
| `@comark/vue` | `comark-ui/vue` |
| `@comark/react` | `comark-ui/react` |
| `@comark/svelte` | `comark-ui/svelte` |

Vue、React和Svelte省略了annotate和diff，它们只渲染到HTML。

## 编辑器

[编辑文档](https://comark-ui.onmax.me/guide/editor/) 覆盖设置，Vue绑定，文件上传和协作房间。

`comark-ui/editor` 是一个 [Tiptap](https://tiptap.dev/) 没有DOM和框架，所以服务器也可以用它来转换文档。安装 `@tiptap/core`， `@tiptap/pm`， `@tiptap/starter-kit`， `@tiptap/extension-list`， `@tiptap/extension-image`, `@tiptap/extension-table`。

| 出口 | 它是做什么的 |
| --- | --- |
| `ComarkKit` | 模式：StarterKit、任务列表、内联图像（作为视频和音频的播放器绘制）、表格、脚注、定义列表、CriticMarkup以及Comark的组件、插槽和注释，每个组件都保留了它没有字段的属性。 |
| `fromMarkdown`， `toMarkdown` | 使用Comark自己的解析器和编写器在Markdown和编辑器的JSON之间进行转换。正面文字留在文档旁边。 |
| `checkMarkdown(markdown, { plugins })` | 编辑器是否可以保存文档而不改变读者看到的内容，这取决于页面呈现时使用的插件。无法保持为只读状态的文档。 |
| `Upload` | 上传粘贴和删除的文件。每个都显示了一个占位符，其进度直到 `upload(file, progress)` 返回它的URL。 |
| `createEditorCodec({ plugins })` | `{ extensions, split, join, fromMarkdown, toMarkdown, verify }` 用于协作房间，比如ViteHub Realtime的房间 `editor` 选择。一个房间将正文作为编辑器的文档，并将正文作为其字段，因此文本编辑永远不会覆盖元数据。 |

`comark-ui/editor/vue` 将编辑器绑定到带有的Markdown字符串 `useComarkEditor(markdown)` 或 `<ComarkEditor v-model="markdown" />`。运行 `pnpm playground` 在这个包里试试吧。

## 代理

包裹运送 [commark -ui代理技能](https://github.com/onmax/comark-ui/tree/main/skills/comark-ui):一个 `SKILL.md` 说明如何安装插件，哪个块显示什么，以及如何检查结果，以及每个包的参考。安装时使用 `vp dlx skills add onmax/comark-ui`，链接至 `node_modules` 与 `vp dlx skills experimental_sync` （实验性的），或者将它捆绑到你自己的应用程序中 `comark-ui/skills/comark-ui/`，它总是与它安装的插件匹配。 `vp` 附带 [轻快地+](https://viteplus.dev/guide/global-cli);没有它, `pnpm dlx` 采用相同的参数。

## 产品毛羽

[comark-linter](https://comark-ui.onmax.me/lint/) 发现 `comark-ui` 当它安装和检查文档与它的插件和组件。

## 许可证

麻省理工学院

## 常见问题

### comark-ui 是什么？

一个安装中的每个标记-ui块：注释的屏幕截图，图表，差异，选项卡，缩放等，按照共享图标所需的顺序注册。关闭它们中的任何一个或传递其选项。

### 如何安装 comark-ui？

在项目目录运行 npm install comark-ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：comark（^0\.8\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### comark-ui 支持 TypeScript 吗？

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

### comark-ui 支持 ESM 还是 CommonJS？

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

### comark-ui 需要什么版本的 Node\.js？

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

### comark-ui 可以商用吗？

comark-ui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### comark-ui 还在维护吗？

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