pencil code文档（20260623更新）
<style>.artBox { margin: 20px auto; font: normal 18px/26px sans-serif; }
.artBox mark { padding: 2px 6px; background: #ccc; }
.artBox p { margin: 10px 0; }
</style>
<div class="artBox">
<p>pencile code 是马黑整站系统开发的在线HTML代码编辑器，分普通版和代码着色版两个版本，二者的主要区别是：前者使用 textarea 后者使用 contenteditable div 做编辑控件。</p>
<h2>一、主要功能及使用方法</h2>
<h3>1. 集成几个常用工具，主要是：</h3>
<ul>
<li>合并行：将选中的代码合并成一行；</li>
<li>CSS代码分行：将选中的单行 CSS 代码按规则分行；</li>
<li>HTML代码分行：将选中的单行 HTML代码按规则分行；</li>
<li>JS代码分行：将选中的单行 JS 代码按规则分行（不成熟）；</li>
<li>复制：将文本框内容完整复制到剪切板。</li>
</ul>
<h3>2. 自动添加行号</h3>
<p>任何形式的输入都会实时给代码行添加行号，同一单位的软折行视为一行（pencil code 行的概念相当于段落）。点击行号，编辑框中对应代码行会被选中。</p>
<p>选中一行代码的另一种方式是：按 ALT 键。</p>
<p>还有一种方法是：三击行。</p>
<h3>3. 代码智能着色（普通版不支持）</h3>
<p>编写代码过程中，代码会实时着色。此功能并不完美，着色规则和效果受限于多种因素停留在较为粗浅的层面，聊胜于无而已。</p>
<h3>4. 智能缩进处理</h3>
<p>主要作用于：</p>
<ul>
<li>回车：自动继承上一行的缩进状态；</li>
<li>Tab：在输入光标前加四个空格，支持单行、多行操作；</li>
<li>Back：针对单行，普通版删除光标前面的四个空格或制表符（如有），着色版不批量删除空格。</li>
</ul>
<h3>5. 智能补全键盘成对符号</h3>
<p>以下键盘键位符号，<mark>`{[("'</mark>，输入后会自动补全对应符号的右侧符号，有选中文本的成对符号包裹原先选中的文本，光标移到右侧符号的后面，无选中文本的光标移到右侧符号的前面。</p>
<h3>6. 智能选中括号内的文本</h3>
<p>支持的括号为键盘键位括号，<mark>{}、[]、()、<></mark>。此功能旨在帮助使用者识别代码归属区域，例如一对匹配的花括号里的代码。使用方法：在紧挨着括号的前面双击，两个匹配括号之间的文本会被选中。</p>
<h3>7.移动行</h3>
<p>点击要上下移动的行，或选择需要移动的多行（头尾行可以只选择部分），按下 ALT 键不放，再按向上、向下箭头移动单行或多行。</p>
<h3>8. 智能撤销与重做</h3>
<p>按 Ctrl+Z 撤销、Ctrl+Y 重做。撤销指撤销前面的输入，重做指恢复刚撤销的内容。编辑器维护最近50次的撤销、重做状态。</p>
<h3>9. 保存编辑内容</h3>
<p>编辑器在预览的时候顺带将当前的编辑内容保存在浏览器缓冲内，下次使用相同浏览器访问相同的编辑器所在页面，内容会自动加载，除非清空了浏览器缓存。</p>
<h3>10. 效果预览</h3>
<p>在 pencil code 中所编辑的HTML代码，均可通过“运行代码”按钮查看使用者编写的HTML代码的运行效果。</p>
<h2>二、其它</h2>
<p>pencil code 地址：</p>
<ul>
<li><a href="http://mhh.52qingyin.cn/api/pcode/" target="_blank">普通版</a></li>
<li><a href="http://mhh.52qingyin.cn/api/pccc/" target="_blank">代码着色版</a></li>
<li><a href="http://mhh.52qingyin.cn/api/pencilcode/simple-editor.html" target="_blank">简易版</a></li>
</ul>
<p>【注】简易版基于 mhta 插件，核心功能和普通版一致。</p>
</div> 沙发{:4_174:}来的巧了 介绍好详细。{:4_180:} 黑黑老师，我一直在用的是帖宝，也好用，它还可以保存代码。刚才用锅庄舞的代码试了三版，也好用的。 谢谢黑黑老师辛苦，收藏彩色版。{:4_180:} 本帖最后由 杨帆 于 2026-6-23 18:55 编辑 <br /><br />热烈祝贺马老师顺利推出升级版pencil code（20260623更新）,欣喜地发现您为其增加了许多实用功能，赋能广大音画爱好者极大便利，马老师您辛苦了{:4_190:} <br><br>
同时，也发现着色版的选中功能尚需进一步完善，目前发现:一是全选后，右键复制，选中状态丢失，无法实现复制；二是鼠标放在<>前点击，比如</style></head><body>，会强制选中内部的内容/style，无法实现换行。三是在 } 前点击，会强制选中{}内的内容，影响体验感。<br><br>
请马老师百忙中进一步完善~由衷感谢{:4_180:}
杨帆 发表于 2026-6-23 18:05
本帖最后由 杨帆 于 2026-6-23 18:55 编辑 热烈祝贺马老师顺利推出升级版pencil code（20260623更新）,欣 ...
问题一：全选后右击问题，下一步处理。当前，复制全部内容建议点击编辑框左上角第一个图标按钮，它是复制按钮；
问题二和三：请硬刷新一至两次，更新资源。硬刷新后，只有双击才会选中括号内的文本。
感谢反馈！ 梦江南 发表于 2026-6-23 15:08
谢谢黑黑老师辛苦，收藏彩色版。
感谢支持 梦江南 发表于 2026-6-23 15:06
黑黑老师，我一直在用的是帖宝，也好用，它还可以保存代码。刚才用锅庄舞的代码试了三版，也好用的。
帖宝已经做了更新：基本功能不变，核心编辑功能使用 mhta 插件。硬刷新启用新功能：Ctrl + F5 玫瑰 发表于 2026-6-23 14:14
介绍好详细。
{:4_180:} 玫瑰 发表于 2026-6-23 14:13
沙发来的巧了
{:4_190:} 马黑黑 发表于 2026-6-23 20:33
问题一：全选后右击问题，下一步处理。当前，复制全部内容建议点击编辑框左上角第一个图标按钮，它是复制 ...
知道了，由衷感谢老师{:4_180:} 杨帆 发表于 2026-6-23 20:37
知道了，由衷感谢老师
我去测试了一下，关于全选->右击=>复制 表现正常，没有出现你所反馈的问题。估计是资源更新后没有硬刷新导致的混乱让你发现这类现象。
如有问题，请继续反馈。谢谢。 本帖最后由 杨帆 于 2026-6-23 20:51 编辑
马黑黑 发表于 2026-6-23 20:43
我去测试了一下，关于全选->右击=>复制 表现正常，没有出现你所反馈的问题。估计是资源更新后没有硬刷新 ...
谢谢马老师~也许是我电脑的问题？可在更新前并没遇到过类似情况呀
现在硬刷新后，问题一、二和三依旧，但编辑框左上角第一个图标复制按钮挺好用呢{:4_190:}
我喜欢这个框很大，看代码方便。谢谢马老师的分享，都好用！抱走了，赞佩！！{:4_204:}{:4_190:}{:4_178:}{:4_199:}
pencile code 特别好用，一直用来试帖的，现在又有最新的更新版，真的太好了。
黑黑辛苦了{:4_190:}{:4_187:} 红影 发表于 2026-6-23 22:20
pencile code 特别好用，一直用来试帖的，现在又有最新的更新版，真的太好了。
黑黑辛苦了{:4_18 ...
{:4_180:} 霜染枫丹 发表于 2026-6-23 22:06
我喜欢这个框很大，看代码方便。谢谢马老师的分享，都好用！抱走了，赞佩！！{ ...
{:4_190:} 杨帆 发表于 2026-6-23 20:47
谢谢马老师~也许是我电脑的问题？可在更新前并没遇到过类似情况呀
现在硬刷新后，问题一、二和三依旧， ...
以第一个问题为例，早期起对鼠标事件的处理就已经判断是否为左键，共两个地方：
// 鼠标弹起
pencil_inputbox.onmouseup = (e) => {
if(e.button === 0) findStr(pencil_inputbox, window.getSelection().toString());
saveState();
};
// 鼠标按下 : 释放选区
pencil_inputbox.onmousedown = (e) => {
if(e.button === 0) window.getSelection().removeAllRanges();
};
而新增的是双击事件，与上面的不冲突。所以，理论上不存在选中文本后右击失去选区的问题 马黑黑 发表于 2026-6-23 23:30
以第一个问题为例，早期起对鼠标事件的处理就已经判断是否为左键，共两个地方：
// 鼠标弹起
是，现在正常了，之前应是我电脑的原因，谢谢马老师~您辛苦了{:4_176:}