HTML怎样实现在线代码编辑器_HTML网页代码高亮

textarea不能直接高亮，必须用独立视图层渲染，否则光标跳动、样式失控、复制粘贴错乱；因contentEditable不暴露光标位置且innerHTML覆盖重置光标，iframe designMode已被弃用；稳定编辑器均采用模型-视图分离架构。

textarea 不能直接高亮，必须用独立视图层渲染，否则光标会跳、样式不可控、复制粘贴错乱。

为什么不能直接在 contentEditable 或 iframe 里写高亮逻辑

浏览器原生的 contentEditable 编辑行为不暴露光标位置和字符偏移，每次 innerHTML 覆盖都会重置光标到开头；iframe 的 designMode 在 Chrome 120+ 已被弃用，Firefox 也限制了 script 执行权限。真实项目中，所有稳定在线编辑器（CodePen、StackBlitz）都采用「模型-视图分离」：原始代码存在 textarea，高亮 HTML 存在另一个 div，靠 JS 同步。

Prism.highlight() 怎么配合输入实时更新

每次 input 事件触发后，必须做三件事：

• 从 textarea.value 提取最新文本，避免读取被高亮污染的视图层
• 调用 Prism.highlight(code, Prism.languages.html, 'html')，注意第三个参数必须是语言别名字符串，不是对象
• 把生成的 HTML 字符串赋给高亮 div.innerHTML，但要提前保存光标位置，用 getSelection().getRangeAt(0) + range.startOffset 记录，更新后再用 setSelectionRange() 恢复

漏掉光标同步，用户每敲一个字光标就跳回开头——这是最常被忽略的硬伤。

切换语言时 Prism.plugins.autoloader 加载失败怎么办

autoloader 是异步加载语言插件的，Prism.highlight() 调用时若对应语言模块还没 loaded，会静默返回原始文本，导致高亮失效。解决方法只有两个：

立即学习“前端免费学习笔记（深入）”；

• 监听 Prism.plugins.autoloader.loaded 自定义事件，在回调里重新触发高亮
• 改用预加载：把常用语言（html、css、javascript）打包进主 bundle，绕过 autoloader

不要依赖 setTimeout 等待，加载延迟受网络影响，不可控。

实时预览 iframe 的 srcdoc 为什么有时不刷新

srcdoc 更新失败通常是因为内容含非法字符或未闭合标签。比如用户输入了 <script>alert(</script> 就会导致整个 iframe 渲染中断。安全做法是：

• 拼接前对 CSS 和 JS 内容做 HTML 实体转义：cssContent.replace(/, '<').replace(/>/g, '>')
• 不用 <style></style> 和 <script></script> 标签包裹，改用 <style type="text/css"> + textContent 方式注入，避免解析冲突
• 捕获 iframe 的 onerror 事件，打印 console.error('preview failed:', e)，方便定位哪段代码崩了

高亮和预览是两套独立流程，别指望一次更新同时搞定——它们的触发时机、错误路径、恢复策略完全不同。