醉美水芙蓉 发表于 2026-6-23 22:47:00

马黑黑《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></td></tr></table>

醉美水芙蓉 发表于 2026-6-23 22:49:20

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

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

klxf 发表于 2026-6-24 14:15:45

很实用的工具，谢谢分享
页: [1]
查看完整版本: 马黑黑《pencil code文档（20260623更新）》