可编辑HTML演示文档生成器

要解决的问题

把一份文档变成"能演示"的东西，常见路径是复制进 PPT 或找一个 MD 转 HTML 的脚本。前者意味着改一行错别字也要重新拖拽排版；后者产出的静态页面只能看、不能改。这份技能针对的是第三种状态：演示形态的文档，本身仍然可编辑。

它是如何工作的

输入是一份 Markdown 文档（支持 h1–h4、表格、代码块、引用、列表、图片）和一个图片目录。脚本完成三件事：

• MD → HTML 转换：解析结构化语法，图片经 base64 内嵌，输出单个自包含的 .html 文件，无外部文件依赖。
• 框架组装：按模式套用对应的 CSS 设计系统、工具栏和脚本。Editorial 模式用侧边栏目录配合 IntersectionObserver 做滚动高亮追踪；Slide 模式把每个 h1/h2 章节切成一页幻灯片，支持方向键、◀▶ 按钮、进度条、F 键全屏，打印时所有页堆叠输出；Minimal 模式是苹果风极简排版加毛玻璃工具栏。
• 可编辑与保存：主要文本节点带 data-editable 标记，工具栏的编辑按钮切换 contentEditable，保存时通过 outerHTML 把当前 DOM 原样导出。

Slide 模式另有 5 套主题（default、anthropic、apple、douyin、tencent），浅底深字、深底亮字，满足 WCAG AA 对比度。生成后脚本自动验证：目录链接与内容 id 是否匹配、图片嵌入计数、可编辑元素数量、最终文件大小。

适用边界与注意点

• 它是文档展示页面，不是 Web 应用：没有表单、没有后端、没有 API 调用，内容在生成时固定。
• 不适合需要 SEO 的公开页面：contentEditable 和 base64 图片都不利于搜索引擎抓取。
• contentEditable 允许输入任意 HTML，XSS 风险在本地编辑场景下可控；若要发布，建议编辑后另存为纯文本重新生成。
• SVG 需先用 Pillow 转成 PNG；图片经 base64 内嵌后体积会明显膨胀，建议预先压缩。
• 离线环境下 Playfair Display 会回退到系统衬线体，功能不受影响。
• 仅依赖 Python 标准库，无需安装第三方包。