背景【废话/不妨跳过】

数字化时代，很多人哪怕不是正规程序员都需要经常跟代码打交道，本怨士就是个例子：日常主打 TeX，都知道手写太费劲，能编程写自动化辅助程序对效率影响 百十倍，甚至是能与不能。 小编日常生活工作中就要使用很多编程语言。

没有高亮的代码让人看着浑身不得劲。上一期我们介绍的原生 Chrome 的开发者工具代码高亮编辑功能，但支持语言的很有限；例如，理工科研教育出版行业的 TeX，而常规标签页中打开的代码文件没有高亮功能。本怨士不禁冒出的一个想法，既然很多网站都有代码高亮功能，那高亮插件不是水到渠成的事吗。诶～还真的有，我们今天的主角是 Sight 。有的朋友会说 VSCode 它不香吗？是的，太香了，就是养不起：内存、CPU、硬盘 三高占用，小题大做；而 Sight 插件足足只有 871kb! 解压后不足 3M！

Sight 代码高亮效果

 TeX 代码高亮

JavaScript 代码高亮

Python 代码高亮

 More 代码高亮

功能 / 操作 笔记

 配置

1. 固定插件扩展，以便快速访问

1. 高亮触发条件，经本怨士测试，只有选择在【所有网站上】才有效果

1. 高亮主题设置

快速切换：Ctrl + U （查看源代码 / Plain 模式）

安装

① 官方代码 Github 仓库（劝退城内百姓）：

https://github.com/tsenart/sight

可以看出这个插件已经很久没更新了，manifest 还是v2版本，这意味着在新的浏览器上还需要特殊处理才能使用。

② 适合城内百姓的下载渠道：

https://www.chajianxw.com/developer/30468.html

通常情况下，我们下载好 .crx 后，打开插件管理页面， 开启开发者模式，将 .crx 文件解压后拖进去即可。详见：

https://www.chajianxw.com/tutorial/how-to-install-chrome-plugin.html

但实际操作中存在以下两个问题：

V2 太旧（啧啧啧～原因说是为了用户安全性能体验考虑，实则厂家打着 集权控制/广告赚钱 的小算盘）新版 Chrome 已抛弃。

这里有三个解决方案

① 将下列命令行运行参数加到 Chrome 快捷方式中。（实测最新版已经作废了该功能）

@rem 允许 V2 旧插件的关键运行参数：--allow-outdated-plugins@rem 可以在命令行在指定插件路径：--load-extension="C:\path\解压后的Sight.CRX文件夹"@rem 完整MWE命令行chrome --allow-outdated-plugins --load-extension="R:\path\SightCRX"

② 使用旧版浏览器。由于 Chrome 会自动更新，这需要一点技巧，我们下下期讨论。

③ 使用本怨士魔改升级的 V3 版本（有点糙）：

https://github.com/Lyeebn/sight/

【哎～重复造轮子】后来发现已经有第三者把这活干了：https://github.com/tsenart/sight/pull/111/changes/1036210936975c055362cd0d4482e8a5476a7830

最近很久没更新了，就是再升级这个插件，以及实现了一项突破：pdflatex 下 ctex 宏集中 兼容 emoji， 及 xetex 下 emoji 字体级解决方案，将来有机会再详细分享。

魔改定制增强

① 原版对编程语言的识别不够灵活，例如 TeX 文件不止 .tex，还有 .sty 、.def、sty、dtx、cfg ……，再比如 .jsx  也是 js 派语法。这些需要修改才能正确高亮：

对 Sight/js/background.js 做如下修改：

// Sight/js/background.jsconst LANG_EXT_MAP = { ...,javascript:  ['js', 'jsx'],tex:         ['tex','cls','def','sty','dtx','cfg'],...}

②  对于太大的 代码文件，我们可能只是想打开简单看一下搜索复制，而这种高亮会卡顿，这时我们可以用如下代码实现按需高亮：

// Sight/js/background.jsfunctiongetHighlightingCode(font, fontSize, lineNumbers, language) {return`      var container = document.querySelector("pre");      if ((container.innerHTML.length > 8<<15) && confirm("prompt: 太长，是否停止高亮")) throw '太长，不管';      document.body.style.fontFamily = "${font}";      document.body.style.fontSize = "${fontSize}";      container.classList.add("${language}"); // alert(666)      hljs.configure({ lineNumbers: ${lineNumbers}});       hljs.highlightBlock(container);      document.body.style.backgroundColor = getComputedStyle(container).backgroundColor;`  }

③ 经常搞 TeX 开发的想必经常要接触 @ 符 makeatletter，我们需要对 Sight/js/languages/tex.js 做如下修改：

// Sight/js/languages/tex.js  @ 符正确高亮var COMMAND1 = {className: 'command',begin: '\\\\[a-zA-Z@а-яА-я]+[\\*]?'  };

类似地，可以按需扩展支持 LaTeX3 语法。

// F12document.designMode="on"

 Sight 是基于 hljs 库实现的高亮

hljs 本身简单易用，扩展性强，Sight 集成的 hljs 太旧，高手可以自己动手更新定制。