最轻量方案是用marked.js+原生DOM监听实现即时预览，需组合keyup/paste/cut事件、防抖、调用marked.parse()并启用sanitizer，预览用innerHTML，导出时包裹HTML结构并内联样式。
直接用 marked.js + 原生 DOM 监听就能跑起来，不需要框架、不依赖后端，所有解析都在浏览器里完成——这是最轻量、最可控的方案。
怎么让 textarea 输入立刻变成 HTML 预览
核心是监听输入事件并调用解析函数。注意别用 input 事件监听整个 textarea，它对粘贴、撤销、光标移动等操作响应不够稳定；改用 keyup + paste + cut 三事件组合更可靠：
-
keyup覆盖键盘输入（含中文输入法上屏后） -
paste和cut显式捕获剪贴板操作，避免中文输入法未触发input的坑 - 每次触发都取
textarea.value，传给marked()，再写入preview.innerHTML - 加个防抖（比如 300ms），否则快速打字时频繁重绘会影响体验
为什么 marked.parse() 比 marked() 更安全
新版 marked（v4+）默认启用 XSS 防护，但直接调用 marked(md) 会走 legacy 兼容路径，可能绕过 sanitizer；必须用 marked.parse() 并显式配置：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 设置
marked.setOptions({ sanitizer: true })才真正过滤危险标签 - 若需保留
<iframe></iframe>或<script></script>（极不推荐），得自己写renderer，但会放大风险 - 不设
sanitizer时，用户粘贴[xss](javascript:alert(1))会直接执行 - 预览区务必用
innerHTML，别用textContent——后者不渲染 HTML，预览就失效了
导出 HTML 时要注意换行和样式隔离
直接把 preview.innerHTML 写进 a.download 会丢样式，且换行符在 HTML 中不生效：
立即学习“前端免费学习笔记（深入）”；
- 导出前要包裹一层
...，再内联基础样式（如pre { white-space: pre-wrap; }） - Markdown 解析后生成的
<code>标签默认无换行处理，需加 CSS：code { white-space: pre; } - 避免用
document.body.innerHTML导出——它包含脚本、工具栏等无关内容，只取preview.innerHTML - 文件名建议固定为
export.html，不要用用户输入的标题，防止非法字符或路径遍历
最易被忽略的是中文输入法场景：用户按空格选词时，input 事件可能早于实际文本上屏，导致预览滞后或错乱。坚持用 keyup + paste 组合，再加 300ms 防抖，基本覆盖所有输入路径。
