|
pencile code 是马黑整站系统开发的在线HTML代码编辑器，分普通版和代码着色版两个版本，二者的主要区别是：前者使用 textarea 后者使用 contenteditable div 做编辑控件。 409 一、主要功能及使用方法 410 1. 集成几个常用工具，主要是： 411 412 - 合并行：将选中的代码合并成一行；
413 - CSS代码分行：将选中的单行 CSS 代码按规则分行；
414 - HTML代码分行：将选中的单行 HTML代码按规则分行；
415 - JS代码分行：将选中的单行 JS 代码按规则分行（不成熟）；
416 - 复制：将文本框内容完整复制到剪切板。
417 418 2. 自动添加行号 419 任何形式的输入都会实时给代码行添加行号，同一单位的软折行视为一行（pencil code 行的概念相当于段落）。点击行号，编辑框中对应代码行会被选中。 420 选中一行代码的另一种方式是：按 ALT 键。 421 还有一种方法是：三击行。 422 3. 代码智能着色（普通版不支持） 423 编写代码过程中，代码会实时着色。此功能并不完美，着色规则和效果受限于多种因素停留在较为粗浅的层面，聊胜于无而已。 424 4. 智能缩进处理 425 主要作用于： 426 427 - 回车：自动继承上一行的缩进状态；
428 - Tab：在输入光标前加四个空格，支持单行、多行操作；
429 - Back：针对单行，普通版删除光标前面的四个空格或制表符（如有），着色版不批量删除空格。
430 431 5. 智能补全键盘成对符号 432 以下键盘键位符号，`{[("'，输入后会自动补全对应符号的右侧符号，有选中文本的成对符号包裹原先选中的文本，光标移到右侧符号的后面，无选中文本的光标移到右侧符号的前面。 433 6. 智能选中括号内的文本 434 支持的括号为键盘键位括号，{}、[]、()、<>。此功能旨在帮助使用者识别代码归属区域，例如一对匹配的花括号里的代码。使用方法：在紧挨着括号的前面双击，两个匹配括号之间的文本会被选中。 435 7.移动行 436 点击要上下移动的行，或选择需要移动的多行（头尾行可以只选择部分），按下 ALT 键不放，再按向上、向下箭头移动单行或多行。 437 8. 智能撤销与重做 438 按 Ctrl+Z 撤销、Ctrl+Y 重做。撤销指撤销前面的输入，重做指恢复刚撤销的内容。编辑器维护最近50次的撤销、重做状态。 439 9. 保存编辑内容 440 编辑器在预览的时候顺带将当前的编辑内容保存在浏览器缓冲内，下次使用相同浏览器访问相同的编辑器所在页面，内容会自动加载，除非清空了浏览器缓存。 441 10. 效果预览 442 在 pencil code 中所编辑的HTML代码，均可通过“运行代码”按钮查看使用者编写的HTML代码的运行效果。 443 二、其它 444 pencil code 地址： 445 450 【注】简易版基于 mhta 插件，核心功能和普通版一致。 | 
发表于