马黑黑老师《pencil code代码着色版更新说明 》

醉美水芙蓉

pencil-code 是一个在线Web编辑器，相较于后来开发的简易Web编辑器，它提供更多的辅助性功能，代码着色版使用体验更为接近现代代码编辑器。此次更新代码着色版pencil code，主要是：

一、修正业已发现的问题，包括使用标准、现代的机制平替已被明确废弃的相关属性和方法、更正算法上的瑕疵、优化部分功能的实现机制。

二、加入键盘成对符号的自动补全功能，这些符号前导部分是 `"'{[(< ，输入其中任意一个，对应符号的后续符号会自动补上，支持空输入和选词后的输入。

三、加入行移动。支持单行移动、连续多行移动，操作方法是：点击任意行或选择任意行（多行）的任意字符，按下 alt 键，此时光标所在行或连续多行会被全行选中，保持 alt 键按下状态，再按向上或向下箭头键，选中行会上下逐行移动、直至移动到编辑框的最开头或最末尾处。alt 键单独按下也是选中光标所在行或选区连续行的操作方法。针对单行，alt 按下操作等效于点击编辑框左侧的行号数字。

其它相关说明——

关于编辑器：使用 contenteditable="plaintext-only" 的 div 模拟。contenteditable 为 H5 属性，自 2015年7月起被主流浏览器所支持，其值之一 plaintext-only 用于规范可编辑 HTML 标签只支持纯文本输入，Chrome 51+、Edge 12+、Firefox 136+、Opera 36+、Safari 5+ 均已支持。

div模拟的编辑器，可控难度要比纯文本标签大得多，但其内文本节点的可操作性要比纯文本标签的 value 有显著优势。

关于代码着色：使用 JS Highlight 接口配合 CSS 高亮伪元素 ::highlight 实现代码实时高亮，对代码容器内部DOM结构不产生任何影响。该高亮机制自2025年被现代浏览器广泛支持。

对不支持 Highlight 高亮的浏览器，pencil code 没有做兼容处理。

访问地址：pencil code（注意：若近期访问过该页面，打开之后需要硬刷新才能使用最新版本，方法是按 Ctrl + F5）