pencil code代码实时着色版的开发告一段落

马黑黑

pencil code代码实时着色版 和 pencil code黑白版 功能基本一致，都是在线编写帖子代码、试运行帖子代码的小工具。不同的是，着色版由于开发在后，除代码着色外，其他功能可能会因为不同的原因增删。

着色版有一个工具菜单，取代了黑白版的代码下载按钮。该工具：

（一）可以压缩代码，其实就是将选中的多行压缩为一行。这对CSS代码尤其有用，CSS代码一般都会繁杂冗余，做帖时一行一行代码写便于修改，代码量若很大，弄好后可以简单压缩一下，将相同属性的代码合并成一行。

（二）可以简单格式化代码。对于小体量的 pencil code，要做出功能完美的代码美化工作要求实在是太高了，若非得这样，实现这部分所用的代码量会大于现在的 pencil code 的整体代码量，所以制作非常简单的分行功能，能相应兼顾代码的美化工作。例如：压缩成一行的CSS属性代码，可以在选中之后做做逆操作，一个退缩层级的代码会得到完美还原，多个层级的没有考虑到；JS和CSS的差不多，事实上JS和CSS共用一个分行函数；HTML代码的分行操作相对完美一些，但离专业格式化代码还相差甚远。

（三）着色版因为用的是 div 模拟仅支持文本的编辑框，很多特性不同于 textarea 控件，对选区、范围的操作极其复杂，因而一些在 textarea 下非常简单的功能在 div 这里变得极难操纵。举个简单例子：单击行号选中对应行，静态情况下 div 只有一个子节点，但动态时会有三个文本子节点，这会给选中行的选区和范围确认带来很多困惑。虽然问题最终都得以一一解决，但总感觉不太满意。

（四）着色版的实时着色，会给编辑帖子带来更多的好处。比方说查找，黑白版每次只能查找一个，着色版可以通过伪元素高亮接口，将查找的关键词全部标识出来，甚至，划选编辑框中的某些字符，就已经激活了查找功能。

当然，着色版 pencil code 并不壮硕，也不完美，不过通过测试，它还是可以一用的，也许将来它会得到持续的维护。

红影

这个太厉害了，不但能着色，还有压缩和格式化等功能。
恭喜黑黑研发成功

红影

黑黑在代码方面的投入真的很大，非常赞

红影

这个讲解也很到位，毕竟是作者亲身讲解的第一手资料

马黑黑

红影 发表于 2024-7-21 10:57
这个太厉害了，不但能着色，还有压缩和格式化等功能。
恭喜黑黑研发成功

这个不算成功，将就用用

马黑黑

红影 发表于 2024-7-21 11:00
黑黑在代码方面的投入真的很大，非常赞

马黑黑

红影 发表于 2024-7-21 11:01
这个讲解也很到位，毕竟是作者亲身讲解的第一手资料

南无月

仔细看了一下，新完成的着色版增加"工具“项。。
可以选中一批代码，将其合并起来成为一行，
同样可以选中合并的代码，将它们分行。。且分行后每一级都很清晰，更有利于看清代码属性，这个对于跟贴者来说比较实用。

马黑黑

南无月 发表于 2024-7-21 12:29
仔细看了一下，新完成的着色版增加"工具“项。。
可以选中一批代码，将其合并起来成为一行，
同样可以选 ...

JS和CSS，层级缩进只针对第一层

南无月

特别选了一个css-doodle的贴子代码，中间那部分<css-doodle></css-doodle>混杂，一直采用手工分行，眼都要看花了，用这个工具一下子就可以分开了。超级实用。。

南无月

另外还有增加CSS常用标签，hover的，伪元素:before，:after，哈哈。。这个最友好了。。超级好用。。
html:图片，音乐，视频，文字等都可以点击插入。。代码前后成对给好了~~填入地址就行。。
js里面可以插入随机颜色，箭头函数。。常用文档。。这些代码看着都面熟~~
哈哈，感觉一路点下来就能构建出一个贴子框架了。。

马黑黑

南无月 发表于 2024-7-21 12:42
另外还有增加CSS常用标签，hover的，伪元素:before，:after，哈哈。。这个最友好了。。超级好用。。
html: ...

南无月

白老师你这个开发真是实用又贴心，这是音画人的福音，最顺手的小工具。。
关于查找，选中一个单词之后，所有相同的都会被高亮。。一目了然。。
怎么说呢，瞬间一网打尽。。过瘾

南无月

马黑黑 发表于 2024-7-21 12:31
JS和CSS，层级缩进只针对第一层

我觉得吧，把第一层分清楚，很厉害了已经是。。实用。
很多层好象也不多。。

南无月

马黑黑 发表于 2024-7-21 12:43

香气四溢，口感醇厚，哈哈，赚杯老师的咖啡也是不错

马黑黑

南无月 发表于 2024-7-21 12:51
香气四溢，口感醇厚，哈哈，赚杯老师的咖啡也是不错

马黑黑

南无月 发表于 2024-7-21 12:49
我觉得吧，把第一层分清楚，很厉害了已经是。。实用。
很多层好象也不多。。

现在CSS、JS已经支持多层缩进了，刚更新

马黑黑

南无月 发表于 2024-7-21 12:46
白老师你这个开发真是实用又贴心，这是音画人的福音，最顺手的小工具。。
关于查找，选中一个单词之后，所 ...

南无月

马黑黑 发表于 2024-7-21 12:57
现在CSS、JS已经支持多层缩进了，刚更新

这也太快啦，灌水间隙就整出来了。
那我再去试一试~~

南无月

马黑黑 发表于 2024-7-21 12:57

掐。。。多掐两下