pencil code实时着色版进入试用阶段
本帖最后由 马黑黑 于 2024-7-10 18:48 编辑pencil code 原是一个前端代码编写、运行的私用程序，由于的确合适用来做帖子，推荐给了大家。基于 textarea 控件的正式版推出至今也有一年多了，我做帖子基本上就用它。今天，代码实时着色版也杀青了，可以正式投入试用。
pencil code 代码实时着色版访问地址：
pencil code (52qingyin.cn)
相关说明：
（一）代码着色版对浏览器有要求，凡支持 CSS Custom Highlight API 以及 -webkit-user-modify: read-write-plaintext-only; 的现代浏览器均可使用，例如 Chromium 内核 ≥ 105 的Edge、Chrome、百分浏览器等等都能使用着色版 pencil code。特别说明：着色版不支持 Firefox 浏览器。
（二）着色版 pencil-code 基于可编辑的 div 元素进行开发，开发难度在于：① 操作 div 子节点（含文本节点），需要研究清楚 innerText 和 textContent 的区别；② 操作具体文本，需要对 dom 选区对象 selection 和范围对象 range 熟悉掌握，间接找到操纵输入光标的算法，这个没有像在纯文本控件中那么容易；③ 实时给代码着色需要熟悉掌握 ::highlight CSS伪元素以及JS CCHA 接口，并且，非常重要的，如何匹配要着色的关键字（纯关键字、正则规则）。
（三）程序的使用非常简单：打开页面后，就像使用记事本一样可以直接敲代码，也可以粘贴代码到编辑框进行修改、运行。程序也提供少量辅助性质的输入，可在工具条中找到，点点鼠标就可以输入相关代码。上一次运行过的代码会保留下来，内容保存在使用者的计算机浏览器缓存中。
（四）程序扔处于测试阶段，其健壮性有待提升，欢迎试用的朋友反馈试用心得、提出修改建议，谢谢！
本帖最后由 马黑黑 于 2024-7-10 20:58 编辑
关于CSS伪元素文本着色：
非入侵性着色。其意是，给代码着色的过程和结果都没有改变编辑器的文本结构。
着色的功劳归功于 ::highlight 伪元素，它将着色效果附加于编辑器文本节点之上，按匹配规则和预定着色设计去渲染编辑器的代码呈现。
开发过程中发现着色速度和传统的以改变文档结构的方式着色的方法比，具有极大的优势。事实上，如果要实时着色，传统代码着色方法有很大的局限性，绝大多数代码着色插件都不提供实时实时渲染代码功能，原因是，重构dom结构是非常消耗性能的。
CSS ::highlight 伪元素和 CSS Custom Highlight API 带来了新的曙光，实时代码着色不再是问题，问题仅在浏览器对之支持的滞后——比如火狐浏览器，坚定的前端标准执行者，目前尚未能够打通高亮接口（有意思的是，火狐官网前端文档对该接口的介绍确是非常完美的）。 这个特别棒，把今天做个一个放入进去，颜色自然泉出来了，看着特别清晰{:4_199:} 恭喜黑黑研究成功{:4_199:} 红影 发表于 2024-7-10 20:58
这个特别棒，把今天做个一个放入进去，颜色自然泉出来了，看着特别清晰
着色的规则道理上还有很多地方需要改进。不过我们不必亦步亦趋地跟着别人做，自己根据需要设计着色方案也是可行的。 发现一点小问题，当帖子高度超出展示框，下部无法往下翻了。
这个应该解决起来不难的{:4_187:} 红影 发表于 2024-7-10 20:58
恭喜黑黑研究成功
这个主要是得补些课，过去不太注重 session 和 range 对象，而这个东东也的确足够繁琐，好几百个属性方法先浏览一遍，然后，用到时在细看。 红影 发表于 2024-7-10 21:01
发现一点小问题，当帖子高度超出展示框，下部无法往下翻了。
这个应该解决起来不难的
这个，打两个回车。 红影 发表于 2024-7-10 21:01
发现一点小问题，当帖子高度超出展示框，下部无法往下翻了。
这个应该解决起来不难的
碰上的话是运气好，打两个回车就行。
问题的根源到底出在哪我现在弄不清楚，只知道个大概：与光标获取及处理有关。这个需要时间弄。 恭喜白老师做贴实时着色小程序杀青{:4_189:} 这个太先进了，尝鲜版已有感触～
代码类别一目了然～这个正式版更是期待～好酒不怕晚～
另外：还有幸好除了火狐我还有别的不少浏览器……{:4_189:} 南无月 发表于 2024-7-10 21:43
这个太先进了，尝鲜版已有感触～
代码类别一目了然～这个正式版更是期待～好酒不怕晚～
另外：还有幸好除 ...
这个还不能算是正式版，现在是找虫阶段 南无月 发表于 2024-7-10 21:38
恭喜白老师做贴实时着色小程序杀青
杀杀而已 这个纯加分，没有仔细看 代码实时着色版 小辣椒也是不懂 是不是打开就代码颜色自动出来了？如果是这样，那我服务器进去看代码就是这样的 马黑黑 发表于 2024-7-10 20:59
着色的规则道理上还有很多地方需要改进。不过我们不必亦步亦趋地跟着别人做，自己根据需要设计着色方案也 ...
只有黑黑才有这样本事{:4_199:} 马黑黑 发表于 2024-7-10 21:01
这个主要是得补些课，过去不太注重 session 和 range 对象，而这个东东也的确足够繁琐，好几百个属性方法 ...
原来做这个设计到内容这么多啊，真没想到呢。太不容易了{:4_184:} 马黑黑 发表于 2024-7-10 21:02
这个，打两个回车。
嗯嗯，我去试试{:4_187:} 马黑黑 发表于 2024-7-10 21:05
碰上的话是运气好，打两个回车就行。
问题的根源到底出在哪我现在弄不清楚，只知道个大概：与光标获取 ...
不急的，等下回拖地板的时候再想，先休息一下{:4_190:} 红影 发表于 2024-7-10 23:31
不急的，等下回拖地板的时候再想，先休息一下
你发现的问题已经处理好，JS已经更新，可能需要硬刷新：打开页面之后按 Ctrl+F5，在软刷新一次到两次（有些浏览器需要酱紫）