@duskmoon-dev/el-markdown (日语)

标记下渲染器组件,使用语法加亮、人鱼图支持和LLM输出的流出模式.

安装

bun add @duskmoon-dev/el-markdown

对于人鱼图支持( 可选) :

bun add mermaid

使用量

自动注册( 建议)

使用组件的最简单方式 - 只需导入即可:

<!-- Via CDN -->
<script type="module" src="https://esm.sh/@duskmoon-dev/el-markdown/register"></script>

<!-- Now use the element -->
<el-dm-markdown> # Hello World This is **markdown** content. </el-dm-markdown>

或与一捆子:

import '@duskmoon-dev/el-markdown/register';

手工登记

<script type="module">
  import { register } from '@duskmoon-dev/el-markdown';
  register();
</script>

<el-dm-markdown> # Hello World </el-dm-markdown>

从 URL 中

<el-dm-markdown src="/docs/readme.md"></el-dm-markdown>

有美人鱼图

<el-dm-markdown>
  # Flowchart Example ```mermaid graph TD A[Start] --> B{Is it?} B -->|Yes| C[OK] B -->|No|
  D[End]</el-dm-markdown
>

特征

• GitHub 平面标记: 表格、任务列表、切换、自动链接
• 软线断开: 单行新线默认为换行
• 颜色芯片: 支持的 HEX, RGB, 和内置代码中的 HSL 值显示颜色预览
• 前题:领先的 YAML 前置物质作为突出的 YAML 代码块
• 语法突出显示: 由亮点驱动.js通过rehype-highlight
• 美人鱼图: 流程图,序列图等的可选支持.
• 多个主题: GitHub, 原子一暗, 原子一亮
• 自动主题: 尊重 prefers-color-scheme 媒体查询
• 删除缩进: 自动从内线内容中删除常见缩进
• 流线模式: LLM 输出的实时渲染,并自动恢复语法错误

主题

<el-dm-markdown theme="atom-one-dark"> ```js const dark = true;</el-dm-markdown>

属性

属性

方法

CSS 组件

活动

CSS 自定义属性

支持的 Markdown 特性

• 标题(h1-h6)
• 段 次 页 次
• 粗体,斜体,击出
• 链接和图像
• 有序和无有序清单
• 任务列表(GFM)
• 块名
• 代码(内含和块)
• 语法突出显示
• 表格(GFM)
• 水平规则
• 美人鱼图 (可选)
• 内置 HEX、 RGB 和 HSL 值的颜色芯片
• YAML 前题

实例

任务列表

<el-dm-markdown> ## Todo - [x] Complete task - [ ] Pending task - [ ] Another task </el-dm-markdown>

图表

<el-dm-markdown>
  | Feature | Status | |---------|--------| | Tables | Supported | | Strikethrough | ~~Yes~~ |
</el-dm-markdown>

正在装入远程内容

<el-dm-markdown src="https://raw.githubusercontent.com/user/repo/main/README.md"></el-dm-markdown>

流线模式

流出模式旨在实时渲染LLM输出. 它在流出时会自动处理不完整的标记下语法并显示闪烁光标.

基本流线

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();

使用内容属性

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()

聆听流出事件

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);
});

语法自动恢复

在流出过程中,不完全的标记下语法会自动被固定:

这确保了减值即使部分内容也正确.

许可证

麻省理工学院