html文本域本身不支持代码高亮，需借助codemirror或monaco等编辑器库将其作为隐藏数据容器，通过同步value实现语法高亮与表单兼容。
HTML文本域（<textarea></textarea>）本身不支持代码高亮，它只是一个纯文本输入控件。要让它“变身”为带语法高亮的代码编辑器底座，关键不是改造<textarea></textarea>，而是用它作数据容器，再用专业编辑器库接管视觉与交互。
把<textarea></textarea>当隐藏的数据通道
它不负责显示，只负责存储和提交——这是最稳妥的起点。表单提交时，后端拿到的仍是标准文本字段，兼容性零风险。
- 在表单中保留
<textarea id="code-input" name="source"></textarea>，可设style="display:none" - 不要直接在
<textarea></textarea>里写代码；它的内容将由编辑器实例自动同步更新 - 提交前，编辑器会调用
textarea.value = editor.getValue()确保数据落回表单字段
用CodeMirror或Monaco Editor“挂载”到同名元素上
这些库能识别<textarea></textarea>或<div>作为初始化锚点，然后在其上方绘制富交互编辑层，原生<code><textarea></textarea>退居后台。
- CodeMirror示例：
const editor = CodeMirror.fromTextArea(document.getElementById('code-input'), { mode: 'javascript', lineNumbers: true }) - Monaco需先创建容器
<div id="editor-container"></div>，再用monaco.editor.create(...)渲染，最后手动绑定onChange事件同步到隐藏<textarea></textarea> - 务必指定
mode（如'html'、'python'）或language参数，否则高亮不生效
避免常见失效陷阱
很多“高亮没反应”问题其实出在底座衔接环节，而非编辑器配置本身。
-
<textarea></textarea>必须在DOM加载完成后再初始化编辑器，否则fromTextArea找不到目标 - 若页面动态插入
<textarea></textarea>（如AJAX加载），需在插入后显式调用编辑器初始化，不能依赖DOMContentLoaded - 不要给
<textarea></textarea>加contenteditable="true"或额外样式干扰库的定位逻辑 - 表单验证时，检查的是
<textarea></textarea>值，不是编辑器DOM，所以同步时机必须在提交前或实时监听
轻量替代：用<pre class="brush:php;toolbar:false;"><code></code> + highlight.js做只读高亮</pre>
如果只需展示、无需编辑，完全不用碰<textarea></textarea>。把代码放进<pre class="brush:php;toolbar:false;"><code class="js">...</code></pre>，引入highlight.js即可自动着色。
- 注意class必须是
language-xxx（如language-css），写成js或javascript无效 - HTML特殊字符（
、<code>>）必须转义，或用<script type="text/plain"></script>包裹原始代码再JS注入 - 动态渲染后要手动调
hljs.highlightElement(codeEl)，highlightAll()不会重扫新节点
