pencilcode蓝兔版文档

马黑黑 · 发表于 2023-1-18 08:30

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

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

x

pencilcode ver3在蓝兔年即将到来之际发布，故称蓝兔版。比之之前的版本，蓝兔版有诸多不同：

其一，代码编辑框不再分开CSS、HTML和JS，三者合在一处。

其二，代码即写即运行方式针对所有代码，当勾选了“输入时同步”复选框，则输入代码过程中，CSS、HTML、JS会实时运行，并在代码完整时实时在预览框呈现效果。

其三，加入了诸多小功能，诸如：复制代码、保存代码、插入程序预备代码、在代码编辑框中查找&替换、播放背景音乐等等。

其四，构成程序的CSS、HTML、JS文件各自独立，彼此分开。

其五，代码编辑框加入了代码行号，行号智能识别自动折行（自动折行行为不视为新行）。

pencilcode蓝兔版在本地机器运行，因代码量等问题，目前暂时不考虑发布论坛版本。

pencilcode已经可以胜任编写CSS、HTML、JS基础代码和制作论坛帖子等工作，已然是一个小巧的生产力工具，近期本人在论坛发布的一些代码和帖子，均使用pencilcode工具编写。程序极其简单，现将相关内容简单说明如下：

程序分左右两部分，左边是代码编辑框，确保编辑框获得输入焦点后，即可输入代码。

编写代码原则上请遵循这样的代码结构，即，CSS代码 → HTML代码 → JS代码，举例如下：

<style>
/* 这里是CSS代码 */
</style>


<div id="mydiv">OK</div>

<script>
/* 这里是JS代码 */
</script>

其中，非常重要的：

① CSS、HTML和JS代码均需要有相应的标签（如上面例子所示）；

② JS代码只允许存在一个 <script></script> 标签，当存在多个时，程序只运行最先出现的那一个。

编辑框上方的工具栏放着一些功能性下拉菜单、按钮，自左向右依次是：

① 程序Logo图标，同时也是复制代码的按钮，点击它会将当前的代码复制到剪贴板；

② 保存，即保存当前编辑框中的代码为文本文件，实际上是下载，保存的地方是浏览器上一次下载文件时保存到的目录，文件名命名规则是“年-月-日-时-分-秒.txt”，例如：2023-1-18-7-45.txt ；

③css菜单，通过该菜单可插入CSS标签和少量其他CSS盒子标签代码；

④ +html菜单，可插入一些常用标签代码；

⑤ +js菜单，可插入囧标签和几个相关JS代码；

⑥ “输入时同步”复选按钮，勾选它则会实时预览代码效果，一般不建议，应尽量将代码写到局部完整再去点击运行代码按钮，但若需要也可以勾选，如勾选，编写JS代码时由于代码不完整会在控制台报错但不影响程序的运行；⑥ 运行代码按钮，功能是运行业已写好的代码，点击后预览区会（重新）渲染编辑框现有的代码。运行代码可以是局部的，只要代码可以运行，工程未完成时也可以点击它运行当前代码。

编辑框的底部工具条，有查找&替换操作入口，针对的是编辑框的代码。其中，查找结果仅高亮显示代码框中的一个匹配字串，可再点击查找按钮继续往下查找，程序会往下涂抹找到的字串，直到最后一个，重新查找请将输入光标移到编辑框的最前头；替换，程序会将代码编辑框中的匹配查找文本框内的字串一次性全部替换为替换文本框内的字串，查找和替换文本框字串为空时不做任何操作。

替换文本框还担任背景音乐地址的输入任务：如果在写代码过程中需要播放音乐，可以在替换文本框输入音乐地址然后点击右边的音乐图标。背景音乐支持来自网络的音乐和本地磁盘上的音乐，如果播放本地音乐，请输入正确的文档路径。以下本地文档路径，基于chromium开发的浏览下下程序都可以接受：
① D:\music\mp3\阿衣莫.mp3
② /music/mp3/阿衣莫.mp3
③ ../mp3/阿衣莫.mp3
④ ./mp3/阿衣莫.mp3

第①个路径示例，程序放在什么地方都可以。但火狐对此支持度不好，需要改为地址为 file:///D:/music/mp3/阿衣莫.mp3；第②个路径，程序和music目录放在同一个磁盘（比如放在D盘），music目录是磁盘中的第一层目录；第③个路径，mp3目录和程序目录放在同一个目录且同级，因此倒退一级 ../ 才能访问到音乐；第④个路径，mp3目录是程序的一个子目录，因此程序访问它不需要退级，./ 表示程序文件和mp3目录同级，也可以直接写成 mp3/阿衣莫.mp3。

歌曲地址输入完毕，如果一切正常，程序会马上播放音乐，三秒后替换框内的文本自动消失，此后点击底部右边的音乐按钮，是在暂停&播放间切换，直至在替换框输入了新地址后再单击音乐图标。

二、扩展使用

如果对程序不满意或有其他需求，可以修改程序，程序共三个文档：

① pencilcode.htm - 程序主文件，代码结构简单清晰，修改容易入手；
② pencilcode.css - 程序CSS文件，负责主程序样式描述。代码中有相应注释，可通过注释快速找到修改入口。
③ pencilcode.js - 程序JS文件，程序基本功能通过它实现，代码中也同样提供有注释，简单说明各代码块的作用。

以添加插入代码功能为例，可在JS文件中修改 pencilCode 变量，里面分三个键值对，各键值使用数组存储待插入的代码，简单研究一下已有键值的书写格式便能掌握如何编写自己需要的待插入代码。新添加的键值代码，如果一切正常，在程序刷新后会出现在对应的下拉菜单。

三、其他说明

pencilcode理论上不支持运行第三方JS，其开发预期仅为一个编写基础前端代码的小工具。

程序在Chrome、edge及Firefox下测试通过。