如何实现HTML pre与code区块的可编辑功能？

当然可以把pre或code区块设为可编辑状态，核心是利用HTML的contenteditable属性，再配合highlight.js的API解决编辑后重新高亮的问题，具体步骤如下：

1. 基础可编辑设置 #

直接给目标元素加上contenteditable="true"属性即可。如果是pre包裹code的结构，推荐给code标签加这个属性（避免pre的换行等样式干扰），示例：

<pre><code contenteditable="true" class="language-javascript">function hello() {
  console.log("Hello World!");
}
</code></pre>

如果需要整个pre区块可编辑，也可以直接给pre加contenteditable="true"。

2. 配合highlight.js实现实时高亮 #

highlight.js默认只会在页面加载时初始化高亮，编辑内容后不会自动更新，所以需要监听编辑事件，手动触发重新高亮：

// 获取可编辑的code元素
const editableCode = document.querySelector('code[contenteditable="true"]');

// 监听输入事件（包括键盘输入、粘贴等）
editableCode.addEventListener('input', () => {
  // 手动触发高亮更新
  hljs.highlightElement(editableCode);
});

// 页面加载时先初始化高亮
hljs.highlightElement(editableCode);

3. 优化编辑体验 #

可编辑的code区块默认会有浏览器自带的outline，光标位置也可能不够友好，可以加一点CSS优化：

code[contenteditable="true"] {
  outline: none; /* 去掉默认聚焦边框 */
  min-height: 150px; /* 给个最小高度，避免内容过少时太窄 */
  display: block; /* 让code块占满pre的宽度 */
}

需要注意：contenteditable元素的编辑行为可能因浏览器略有差异，比如换行、缩进的处理，如果需要更精准的控制（比如自动缩进、语法校验），可能需要额外的JS逻辑补充，但基础的可编辑+高亮需求用上面的方法就能实现。

内容的提问来源于stack exchange，提问作者Craze XD