# @duskmoon-dev/el-markdown 中文文档 规范地址：https://npmcn.com/package/%40duskmoon-dev/el-markdown/ 版本：1\.10\.3 npm 元数据更新时间：2026-11-11T10:53:24.337Z 中文译文更新时间：2026-11-13T00:45:16.316Z 软件包许可：未声明 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40duskmoon-dev/el-markdown 原文对照：https://npmcn.com/package/%40duskmoon-dev/el-markdown/?lang=original 项目主页：https://github.com/duskmoon-dev/duskmoon-elements#readme 源码仓库：https://github.com/duskmoon-dev/duskmoon-elements ## 关键信息（来自 npm 元数据） - 包体积（解压后）：17.3 MB，25 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：6 个 - peer 依赖：mermaid \>=10\.0\.0 - 首次发布：2026-01-04T07:17:35.113Z - 最新版本发布：2026-11-11T10:53:23.926Z - 近 30 天下载量：2914（2026-10-13 至 2026-11-11，npm 官方下载统计） - 已发布版本数：54（近 12 个月 54 个） ## 中文简介 标记下渲染器组件,使用语法加亮、人鱼图支持和LLM输出的流出模式. ## 安装 ```sh npm install @duskmoon-dev/el-markdown ``` 也可以使用：`pnpm add @duskmoon-dev/el-markdown`、`yarn add @duskmoon-dev/el-markdown`、`bun add @duskmoon-dev/el-markdown` ## README # @duskmoon-dev/el-markdown (日语) 标记下渲染器组件,使用语法加亮、人鱼图支持和LLM输出的流出模式. ## 安装 ```bash bun add @duskmoon-dev/el-markdown ``` 对于人鱼图支持( 可选) : ```bash bun add mermaid ``` ## 使用量 ### 自动注册( 建议) 使用组件的最简单方式 - 只需导入即可: ```html # Hello World This is **markdown** content. ``` 或与一捆子: ```ts import '@duskmoon-dev/el-markdown/register'; ``` ### 手工登记 ```html # Hello World ``` ### 从 URL 中 ```html ``` ### 有美人鱼图 ```html # Flowchart Example ```mermaid graph TD A[Start] --> B{Is it?} B -->|Yes| C[OK] B -->|No| D[End] ``` \`\`\` ## 特征 - **GitHub 平面标记**: 表格、任务列表、切换、自动链接 - **软线断开**: 单行新线默认为换行 - **颜色芯片**: 支持的 HEX, RGB, 和内置代码中的 HSL 值显示颜色预览 - **前题**:领先的 YAML 前置物质作为突出的 YAML 代码块 - **语法突出显示**: 由亮点驱动.js通过rehype-highlight - **美人鱼图**: 流程图,序列图等的可选支持. - **多个主题**: GitHub, 原子一暗, 原子一亮 - **自动主题**: 尊重 `prefers-color-scheme` 媒体查询 - **删除缩进**: 自动从内线内容中删除常见缩进 - **流线模式**: LLM 输出的实时渲染,并自动恢复语法错误 ## 主题 | 主题 | 说明 | | --- | --- | | `auto` | 遵循系统偏好( 默认) | | `github` | GitHub 风格的灯光主题 | | `atom-one-dark` | 原子一暗主题 | | `atom-one-light` | 原子一光主题 | ```html ```js const dark = true; ``` \`\`\` ## 属性 | 属性 | 类型 | 默认 | 说明 | | --- | --- | --- | --- | | `src` | 字符串 | | 获取标记的 URL | | `theme` | 字符串 | `auto` | 代码语法突出显示主题 | | `debug` | 布尔 | `false` | 启用调试日志 | | `no-mermaid` | 布尔 | `false` | 禁用人鱼渲染 | | `streaming` | 布尔 | `false` | 只读, 反映流流状态 | ## 属性 | 财产 | 类型 | 说明 | | --- | --- | --- | | `content` | 字符串 | 直接获取/设置下标内容 | ## 方法 | 方法 | 说明 | | --- | --- | | `startStreaming()` | 开始流出模式, 清除缓冲, 显示光标 | | `appendContent(chunk)` | 串流时追加一块内容 | | `setContent(content)` | 替换内容( 流中的工作和正常) | | `endStreaming()` | 结束流出, 进行最后的纯净渲染 | ## CSS 组件 | 编 | 说明 | | --- | --- | | `container` | 外容器 | | `content` | 显示的下限内容 | ## 活动 | 活动 | 细节 | 说明 | | --- | --- | --- | | `dm-rendered` | `{ html: string }` | 减速后发射 | | `dm-error` | `{ error: string }` | 发生错误时已开火 | | `dm-stream-chunk` | `{ content: string, chunk: string }` | 当块被附加时被解除 | | `dm-stream-end` | `{ content: string }` | 流出结束时被解除 | ## CSS 自定义属性 | 财产 | 说明 | | --- | --- | | `--dm-markdown-font-family` | 内容字体家族 | | `--dm-markdown-code-font-family` | 代码字体家族 | | `--dm-markdown-line-height` | 线高 | ## 支持的 Markdown 特性 - 标题(h1-h6) - 段 次 页 次 - 粗体,斜体,击出 - 链接和图像 - 有序和无有序清单 - 任务列表(GFM) - 块名 - 代码(内含和块) - 语法突出显示 - 表格(GFM) - 水平规则 - 美人鱼图 (可选) - 内置 HEX、 RGB 和 HSL 值的颜色芯片 - YAML 前题 ## 实例 ### 任务列表 ```html ## Todo - [x] Complete task - [ ] Pending task - [ ] Another task ``` ### 图表 ```html | Feature | Status | |---------|--------| | Tables | Supported | | Strikethrough | ~~Yes~~ | ``` ### 正在装入远程内容 ```html ``` ## 流线模式 流出模式旨在实时渲染LLM输出. 它在流出时会自动处理不完整的标记下语法并显示闪烁光标. ### 基本流线 ```typescript const md = document.querySelector('el-dm-markdown'); // Start streaming mode md.startStreaming(); // Append chunks as they arrive from LLM for await (const chunk of llmStream) { md.appendContent(chunk); } // End streaming (performs final clean render) md.endStreaming(); ``` ### 使用内容属性 ```typescript const md = document.querySelector('el-dm-markdown'); md.streaming = true; // Or call startStreaming() let content = ''; for await (const chunk of llmStream) { content += chunk; md.content = content; } md.streaming = false; // Or call endStreaming() ``` ### 聆听流出事件 ```typescript const md = document.querySelector('el-dm-markdown'); md.addEventListener('dm-stream-chunk', (e) => { console.log('Received chunk:', e.detail.chunk); console.log('Total content:', e.detail.content); }); md.addEventListener('dm-stream-end', (e) => { console.log('Streaming complete:', e.detail.content); }); ``` ### 语法自动恢复 在流出过程中,不完全的标记下语法会自动被固定: | 不完全模式 | 自动Fix 动作 | | --- | --- | | ` ``` ` 未关闭 | 关闭代码块 | | `` ` `` 未关闭 | 关闭内行代码 | | `**text` 未关闭 | 关闭粗体 | | `*text` 未关闭 | 关闭斜体 | | `~~text` 未关闭 | 关闭切换 | | `[text](url` | 关闭链接 | | `![alt](url` | 关闭图像 | 这确保了减值即使部分内容也正确. ## 许可证 麻省理工学院 ## 常见问题 ### @duskmoon-dev/el-markdown 是什么？ 标记下渲染器组件,使用语法加亮、人鱼图支持和LLM输出的流出模式\. ### 如何安装 @duskmoon-dev/el-markdown？ 在项目目录运行 npm install @duskmoon-dev/el-markdown，或使用 pnpm add / yarn add / bun add。 ### @duskmoon-dev/el-markdown 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @duskmoon-dev/el-markdown 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @duskmoon-dev/el-markdown 可以商用吗？ @duskmoon-dev/el-markdown 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。 ### @duskmoon-dev/el-markdown 的下载量有多少？ 根据 npm 官方下载统计，@duskmoon-dev/el-markdown 在 2026/10/13 – 2026/11/11 这 30 天内被下载 2,914 次，日均约 97 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @duskmoon-dev/el-markdown 还在维护吗？ 最新版本 1\.10\.3 发布于 2026/11/11（2 天前）；至今共发布 54 个版本，其中过去 12 个月发布了 54 个；首次发布于 2026/01/04。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。