comark-ui
每一个 Comark 块从 comark-ui 在一次安装中，按照他们需要的顺序注册，并共享一个图标解析器 :icon、卡片、详细信息、文件树、选项卡和代码操作。
pnpm add comark @comark/html comark-ui
import { createHtmlRenderer } from "@comark/html";
import comarkUi from "comark-ui/html";
const render = createHtmlRenderer(comarkUi());
comarkUi() 返回 { plugins, components }． 每个插件都是打开但是 include。通过 false 要关闭一个，它也会丢弃它的组件，或者一个对象传递给它选项：
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 类。看到 排版。
它也会返回 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。
编辑器
编辑文档 覆盖设置，Vue绑定，文件上传和协作房间。
comark-ui/editor 是一个 Tiptap 没有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代理技能:一个 SKILL.md 说明如何安装插件，哪个块显示什么，以及如何检查结果，以及每个包的参考。安装时使用 vp dlx skills add onmax/comark-ui，链接至 node_modules 与 vp dlx skills experimental_sync （实验性的），或者将它捆绑到你自己的应用程序中 comark-ui/skills/comark-ui/，它总是与它安装的插件匹配。 vp 附带 轻快地+;没有它, pnpm dlx 采用相同的参数。
产品毛羽
comark-linter 发现 comark-ui 当它安装和检查文档与它的插件和组件。
许可证
麻省理工学院