启用live server实时预览：安装插件后右键html文件选“open with live server”，自动启动http://127.0.0.1:5500/xxx.html并保存即刷新；须确保地址栏为http://开头，非file://协议。

Live Server 插件在 VS Code 中怎么启用实时预览

VS Code 本身不带内置 HTML 预览服务，必须靠插件启动本地 HTTP 服务器才能触发真实渲染（比如 file:// 协议下 CSS/JS 可能失效）。Live Server 是最轻量、兼容性最好的选择。

安装后右键 HTML 文件 → 选 Open with Live Server，它会自动：启动 http://127.0.0.1:5500/xxx.html，监听文件变化，保存即刷新。不是“打开文件”，而是“启动服务后访问 URL”——这点常被忽略，导致误以为插件没生效。

• 端口冲突时会在终端报错 Port is already in use，改配置项 livePreview.portNumber 即可
• 如果页面空白，检查浏览器地址栏是否是 http:// 开头；file:// 路径下预览必然失败
• 多文件项目需设 livePreview.serverRoot 指向正确根目录，否则相对路径 CSS/图片 404

用 iframe + srcdoc 实现纯前端实时预览的限制

适合嵌入式编辑器（如在线 HTML 工具），但有硬伤：srcdoc 不支持外部资源加载，所有 CSS/JS 必须内联，且无法调试网络请求或跨域资源。

典型写法是拼接字符串再赋值：previewFrame.srcdoc = htmlContent + '<style>' + cssContent + '</style>' + '<script>' + jsContent + '</script>'。但要注意：

• <script></script> 内容含 或 <code>> 会破坏 HTML 结构，必须先做 HTML 实体转义
• 用户写的 console.log 不会出现在 DevTools 控制台里，得用 window.parent.console 中转
• iframe 内 JS 执行上下文隔离，document 指向的是 iframe 自身，不是主页面

contenteditable 元素为什么不能直接当预览区用

设 contenteditable="true" 的 div 是编辑容器，不是渲染器。它显示的是 DOM 树的编辑态快照，不是 HTML 字符串解析后的最终样式。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

常见翻车点：

• 粘贴 Word 文档后出现大量 <span class="Apple-tab-span"></span> 或 data-* 属性，这些不会被 CSS 识别
• 换行键生成 <div> 还是 <code><p></p> 完全取决于浏览器（Chrome 用 div，Firefox 用 p）
• 全局 CSS 泄漏进来，比如你页面写了 img { max-width: 100% }，编辑区里的图也会被强制缩放

真要预览，得另起一个 contenteditable="false" 的 <div>，用 <code>innerHTML 注入清洗后的 HTML，并重置所有样式（all: initial 或 scoped CSS）。

中文输入法下预览内容滞后或错乱

只监听 input 事件不够。中文输入法上屏前会先触发 compositionstart，中间打字过程是“合成状态”，此时取 innerHTML 会拿到不完整文本或占位符。

必须组合监听：

• input：覆盖删除、粘贴、快捷键格式化等操作
• compositionend：确保中文输入完成、候选词确定后再同步预览
• 避免监听 keyup —— 它在输入法未上屏时就触发，拿到的是拼音字母而非汉字

另外，compositionend 触发后应加个 setTimeout(..., 0) 延迟执行，防止某些浏览器中 DOM 尚未更新完毕。