pencil code文档（20260623更新）

马黑黑

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 插件，核心功能和普通版一致。

玫瑰

沙发来的巧了

玫瑰

介绍好详细。

梦江南

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

梦江南

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