pencil code文档（20260623更新）

马黑黑 · 发表于 2026-6-23 13:20

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

pencile code 是马黑整站系统开发的在线HTML代码编辑器，分普通版和代码着色版两个版本，二者的主要区别是：前者使用 textarea 后者使用 contenteditable div 做编辑控件。

一、主要功能及使用方法

1. 集成几个常用工具，主要是：

合并行：将选中的代码合并成一行；
CSS代码分行：将选中的单行 CSS 代码按规则分行；
HTML代码分行：将选中的单行 HTML代码按规则分行；
JS代码分行：将选中的单行 JS 代码按规则分行（不成熟）；
复制：将文本框内容完整复制到剪切板。

2. 自动添加行号

任何形式的输入都会实时给代码行添加行号，同一单位的软折行视为一行（pencil code 行的概念相当于段落）。点击行号，编辑框中对应代码行会被选中。

选中一行代码的另一种方式是：按 ALT 键。

还有一种方法是：三击行。

3. 代码智能着色（普通版不支持）

编写代码过程中，代码会实时着色。此功能并不完美，着色规则和效果受限于多种因素停留在较为粗浅的层面，聊胜于无而已。

4. 智能缩进处理

主要作用于：

回车：自动继承上一行的缩进状态；
Tab：在输入光标前加四个空格，支持单行、多行操作；
Back：针对单行，普通版删除光标前面的四个空格或制表符（如有），着色版不批量删除空格。

5. 智能补全键盘成对符号

以下键盘键位符号，`{[("'，输入后会自动补全对应符号的右侧符号，有选中文本的成对符号包裹原先选中的文本，光标移到右侧符号的后面，无选中文本的光标移到右侧符号的前面。

6. 智能选中括号内的文本

支持的括号为键盘键位括号，{}、[]、()、<>。此功能旨在帮助使用者识别代码归属区域，例如一对匹配的花括号里的代码。使用方法：在紧挨着括号的前面双击，两个匹配括号之间的文本会被选中。

7.移动行

点击要上下移动的行，或选择需要移动的多行（头尾行可以只选择部分），按下 ALT 键不放，再按向上、向下箭头移动单行或多行。

8. 智能撤销与重做

按 Ctrl+Z 撤销、Ctrl+Y 重做。撤销指撤销前面的输入，重做指恢复刚撤销的内容。编辑器维护最近50次的撤销、重做状态。

9. 保存编辑内容

编辑器在预览的时候顺带将当前的编辑内容保存在浏览器缓冲内，下次使用相同浏览器访问相同的编辑器所在页面，内容会自动加载，除非清空了浏览器缓存。

10. 效果预览

在 pencil code 中所编辑的HTML代码，均可通过“运行代码”按钮查看使用者编写的HTML代码的运行效果。

二、其它

pencil code 地址：

【注】简易版基于 mhta 插件，核心功能和普通版一致。

玫瑰 · 发表于 2026-6-23 14:13

沙发

来的巧了

玫瑰 · 发表于 2026-6-23 14:14

介绍好详细。

梦江南 · 发表于 2026-6-23 15:06

黑黑老师，我一直在用的是帖宝，也好用，它还可以保存代码。刚才用锅庄舞的代码试了三版，也好用的。

梦江南 · 发表于 2026-6-23 15:08

谢谢黑黑老师辛苦，收藏彩色版。

杨帆 · 发表于 2026-6-23 18:05

本帖最后由杨帆于 2026-6-23 18:55 编辑

热烈祝贺马老师顺利推出升级版pencil code（20260623更新）,欣喜地发现您为其增加了许多实用功能，赋能广大音画爱好者极大便利，马老师您辛苦了

同时，也发现着色版的选中功能尚需进一步完善，目前发现:一是全选后，右键复制，选中状态丢失，无法实现复制；二是鼠标放在<>前点击，比如</style></head><body>，会强制选中内部的内容/style，无法实现换行。三是在 } 前点击，会强制选中{}内的内容，影响体验感。

请马老师百忙中进一步完善~由衷感谢

马黑黑 · 发表于 2026-6-23 20:33

杨帆发表于 2026-6-23 18:05
本帖最后由杨帆于 2026-6-23 18:55 编辑热烈祝贺马老师顺利推出升级版pencil code（20260623更新）,欣 ...

问题一：全选后右击问题，下一步处理。当前，复制全部内容建议点击编辑框左上角第一个图标按钮，它是复制按钮；

问题二和三：请硬刷新一至两次，更新资源。硬刷新后，只有双击才会选中括号内的文本。

感谢反馈！

马黑黑 · 发表于 2026-6-23 20:33

梦江南发表于 2026-6-23 15:08
谢谢黑黑老师辛苦，收藏彩色版。

感谢支持

马黑黑 · 发表于 2026-6-23 20:34

梦江南发表于 2026-6-23 15:06
黑黑老师，我一直在用的是帖宝，也好用，它还可以保存代码。刚才用锅庄舞的代码试了三版，也好用的。

帖宝已经做了更新：基本功能不变，核心编辑功能使用 mhta 插件。硬刷新启用新功能：Ctrl + F5

马黑黑 · 发表于 2026-6-23 20:35

玫瑰发表于 2026-6-23 14:14
介绍好详细。

马黑黑 · 发表于 2026-6-23 20:35

玫瑰发表于 2026-6-23 14:13
沙发来的巧了

杨帆 · 发表于 2026-6-23 20:37

马黑黑发表于 2026-6-23 20:33
问题一：全选后右击问题，下一步处理。当前，复制全部内容建议点击编辑框左上角第一个图标按钮，它是复制 ...

知道了，由衷感谢老师

马黑黑 · 发表于 2026-6-23 20:43

杨帆发表于 2026-6-23 20:37
知道了，由衷感谢老师

我去测试了一下，关于全选->右击=>复制表现正常，没有出现你所反馈的问题。估计是资源更新后没有硬刷新导致的混乱让你发现这类现象。

如有问题，请继续反馈。谢谢。

杨帆 · 发表于 2026-6-23 20:47

本帖最后由杨帆于 2026-6-23 20:51 编辑

马黑黑发表于 2026-6-23 20:43
我去测试了一下，关于全选->右击=>复制表现正常，没有出现你所反馈的问题。估计是资源更新后没有硬刷新 ...

谢谢马老师~也许是我电脑的问题？可在更新前并没遇到过类似情况呀
现在硬刷新后，问题一、二和三依旧，但编辑框左上角第一个图标复制按钮挺好用呢

霜染枫丹 · 发表于 2026-6-23 22:06

我喜欢这个框很大，看代码方便。谢谢马老师的分享，都好用！抱走了，赞佩！！

红影 · 发表于 2026-6-23 22:20

pencile code 特别好用，一直用来试帖的，现在又有最新的更新版，真的太好了。
黑黑辛苦了

马黑黑 · 发表于 2026-6-23 23:25

红影发表于 2026-6-23 22:20
pencile code 特别好用，一直用来试帖的，现在又有最新的更新版，真的太好了。
黑黑辛苦了{:4_18 ...

马黑黑 · 发表于 2026-6-23 23:25

霜染枫丹发表于 2026-6-23 22:06
我喜欢这个框很大，看代码方便。谢谢马老师的分享，都好用！抱走了，赞佩！！{ ...

马黑黑 · 发表于 2026-6-23 23:30

杨帆发表于 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-24 13:13

马黑黑发表于 2026-6-23 23:30
以第一个问题为例，早期起对鼠标事件的处理就已经判断是否为左键，共两个地方：

// 鼠标弹起

是，现在正常了，之前应是我电脑的原因，谢谢马老师~您辛苦了

pencil code文档（20260623更新）

请马上登录，朋友们都在花潮里等着你哦：）

一、主要功能及使用方法

1. 集成几个常用工具，主要是：

2. 自动添加行号

3. 代码智能着色（普通版不支持）

4. 智能缩进处理

5. 智能补全键盘成对符号

6. 智能选中括号内的文本

7.移动行

8. 智能撤销与重做

9. 保存编辑内容

10. 效果预览

二、其它

评分

浏览过的版块

花潮帅哥

鼠

牛

虎

兔

龙

蛇

马

羊

猴

鸡

狗

猪

多彩人生

星月交辉

奔放热烈

海样胸怀

春风拂面

火热情怀

优雅迷人

神秘浪漫

相遇之美

鹰傲苍穹

花好月圆

紫色情节

飞龙在天

王者至尊

大将风范

音画大师

天籁妙音

共看流星

风雨同行

我心永远

幸福快乐

喜乐安康

侠骨柔肠

心想事成

开朗大方

花潮管理

花潮美女

缤纷心情

心曲飞扬

花潮贵宾

花潮版主

七彩绚丽

金剪刀

草莓情怀

蝴蝶情怀

星星情怀

活泼开朗

女儿情怀

一往情深

心香一瓣

妙笔生花

天长地久

绚丽缤纷

中秋征文

周年庆

指尖上的流年

舞会之星

分析（喊冤）章

总结章

杀人王

小强章