https://mahei.ccccocccc.cc/art/?st=2&id=1773061643
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 插件，核心功能和普通版一致。
| 
发表于