Marked Markdown(marked)
灵感:能力工具箱 marked(pkg: marked)。
> 小四原创:MD → HTML 预览;不可信内容必须消毒(如 DOMPurify),禁止 v-html 裸渲用户输入。
何时使用
- AI 日报 / 跟进纪要 Markdown 预览
- 帮助文档、存档说明渲染
- 轻量预览,不上完整富文本编辑器
硬约束
- 使用
marked;配置breaks等按产品需要。 - XSS:用户/模型产出 HTML 经消毒再插入 DOM。
- 大文档可截断预览并提示「完整内容请下载」。
- 实现要点注释标 小四原创。
- 与「一键同步文章」区分:本包只管渲染,不做网页抽取。
推荐实现
import { marked } from 'marked'
// 可选:import DOMPurify from 'dompurify'
// 小四原创:安全渲染
export function mdToSafeHtml(md: string): string {
const raw = marked.parse(String(md || ''), { async: false }) as string
// 生产环境务必消毒,例如:
// return DOMPurify.sanitize(raw)
return raw
}
<!-- 小四原创:示意;html 须已消毒 -->
<div class="md-body" v-html="safeHtml" />
Agent 步骤
- 接入 marked;封装
mdToSafeHtml。 - 接上消毒库或等价白名单。
- 样式:标题/列表/代码块基础 CSS。
- 自测:标题列表代码;含
<script>的恶意 MD 被剥除。
不要做
- 对不可信 Markdown 关闭消毒。
- 把完整 Word/PDF 管线塞进本轻量 Skill。
附加
- README.md · reference.md · templates/usage.md