马黑黑老师《pencil code代码着色版更新说明 》
<style>.artBox { margin: 20px auto; font: normal 18px/26px sans-serif; }
.artBox p { margin: 10px 0; }
.artBox mark { padding: 2px 6px; background: #ccc; }
</style>
<div class="artBox">
<p>pencil-code 是一个在线Web编辑器，相较于后来开发的简易Web编辑器，它提供更多的辅助性功能，代码着色版使用体验更为接近现代代码编辑器。此次更新代码着色版pencil code，主要是：</p>
<p>一、<strong>修正业已发现的问题</strong>，包括使用标准、现代的机制平替已被明确废弃的相关属性和方法、更正算法上的瑕疵、优化部分功能的实现机制。</p>
<p>二、<strong>加入键盘成对符号的自动补全功能</strong>，这些符号前导部分是 <mark>`"'{[(< </mark></>，输入其中任意一个，对应符号的后续符号会自动补上，支持空输入和选词后的输入。
<p>三、<strong>加入行移动</strong>。支持单行移动、连续多行移动，操作方法是：点击任意行或选择任意行（多行）的任意字符，按下 alt 键，此时光标所在行或连续多行会被全行选中，保持 alt 键按下状态，再按向上或向下箭头键，选中行会上下逐行移动、直至移动到编辑框的最开头或最末尾处。alt 键单独按下也是选中光标所在行或选区连续行的操作方法。针对单行，alt 按下操作等效于点击编辑框左侧的行号数字。</p>
<p>其它相关说明——</p>
<p><strong>关于编辑器</strong>：使用 contenteditable="plaintext-only" 的 div 模拟。contenteditable 为 H5 属性，自 2015年7月起被主流浏览器所支持，其值之一 plaintext-only 用于规范可编辑 HTML 标签只支持纯文本输入，Chrome 51+、Edge 12+、Firefox 136+、Opera 36+、Safari 5+ 均已支持。</p>
<p>div模拟的编辑器，可控难度要比纯文本标签大得多，但其内文本节点的可操作性要比纯文本标签的 value 有显著优势。</p>
<p><strong>关于代码着色</strong>：使用 JS Highlight 接口配合 CSS 高亮伪元素 ::highlight 实现代码实时高亮，对代码容器内部DOM结构不产生任何影响。该高亮机制自2025年被现代浏览器广泛支持。</p>
<p>对不支持 Highlight 高亮的浏览器，pencil code 没有做兼容处理。</p>
<p><strong>访问地址：</strong><a href="http://mhh.52qingyin.cn/api/pccc/" target="_blank">pencil code</a>（注意：若近期访问过该页面，打开之后需要硬刷新才能使用最新版本，方法是按 Ctrl + F5）</p>
</div></td></tr></table>
好用，好像有新更新~
页:
[1]