本站的划线高亮功能使用了 GitHub 开源项目 Annotator 来实现的,开发者是 LearnKu 的站长 Summer,看源码的话,Annotator 算是 Texthighlighter 的改良版吧(Texthighlighter 有一些小 bug,原开发者一直没有去修复),一开始是想用 Alienzhou 的 Web Highlighter,功能上比较齐全,但是要适配到本站有点难度,于是就放弃了,最终在不断测试下,选择了 Summer 的 Annotator 并在源代码基础上做了一些小改动。

文章划线高亮
文章划线高亮

文章划线高亮

如何使用本站文章划线高亮功能?

目前该功能仅适配了 PC 端页面,移动端正在寻找新的适配方案

在任意文章页面,选中任意文字段落就会自动弹出菜单(如上图),点击菜单中不同颜色的「色块」即可高亮划词,你可以根据自己的颜色偏好选择对应的颜色并且任意切换颜色,目前提供了四种颜色(黄、绿、红、青);若你想取消该段落的高亮同样点击该段落,选择「移除高亮」即可;若你仅仅是想复制该段落文字的,点击菜单中的「复制」即可。

根据官方介绍,目前划线高亮存在三个注意点:

  • 目前无法对图片、代码、表格元素进行标注,无法标注时会有提示或出错;
  • 标注字数不能超过 500 个字符;
  • 标注字数不能少于 3 个字符;

第一个注意点,我已通过 user-select 属性对用户禁止选择文本,所以使用体验上是较为齐全的。

划线高亮记录可以同步云端吗?

目前划线高亮记录是通过 LocalStorage 存储到所使用浏览器本地,理论上可以永久保存。若你想清除本站全部划线高亮记录,可在任意页面的右侧菜单栏找到「清除 LocalStorage」按钮,点击清除之后刷新页面即可,但同时你的阅读记录等其它记录也会被清除。至于云同步的功能,目前有开发的意向,不过预计开发时间会在 2023 年中旬。