pencil code实时着色版进入试用阶段

马黑黑 · 发表于 2024-7-10 18:45

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

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

x

本帖最后由马黑黑于 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:56

本帖最后由马黑黑于 2024-7-10 20:58 编辑

关于CSS伪元素文本着色：

非入侵性着色。其意是，给代码着色的过程和结果都没有改变编辑器的文本结构。

着色的功劳归功于 ::highlight 伪元素，它将着色效果附加于编辑器文本节点之上，按匹配规则和预定着色设计去渲染编辑器的代码呈现。

开发过程中发现着色速度和传统的以改变文档结构的方式着色的方法比，具有极大的优势。事实上，如果要实时着色，传统代码着色方法有很大的局限性，绝大多数代码着色插件都不提供实时实时渲染代码功能，原因是，重构dom结构是非常消耗性能的。

CSS ::highlight 伪元素和 CSS Custom Highlight API 带来了新的曙光，实时代码着色不再是问题，问题仅在浏览器对之支持的滞后——比如火狐浏览器，坚定的前端标准执行者，目前尚未能够打通高亮接口（有意思的是，火狐官网前端文档对该接口的介绍确是非常完美的）。