如何通过JavaScript重新触发GitHub语法高亮工具Linguist？

在GitHub（包括GitHub Enterprise）上查看代码文件时，GitHub的Linguist工具会负责语法高亮——它会将每一行代码（以表格行组织）转换成带有样式类的<span>元素，以此标记代码各部分的着色规则。

如果你正在编写Chrome扩展修改页面上的代码内容，想要在修改完成后重新触发语法高亮，可以尝试以下几种可行的方法：

方法1：调用GitHub暴露的全局高亮函数 #

GitHub的前端框架会暴露部分全局方法用于内容渲染，其中就包含代码高亮的核心逻辑。你可以尝试执行以下代码：

// 先清除原有高亮的span标签，还原成纯文本代码
document.querySelectorAll('.blob-code-inner').forEach(el => {
  el.innerHTML = el.textContent.trim();
});

// 触发重新高亮
if (window.GitHub?.textHighlight) {
  GitHub.textHighlight(document.querySelectorAll('.blob-code-inner'));
}

这个方法的核心是利用GitHub.textHighlight全局方法，它会自动识别代码语言，并为代码片段添加对应的高亮样式类。

方法2：调用Blob页面专属的高亮对象 #

如果上面的全局方法不可用，你可以尝试查找页面中负责Blob文件渲染的内部模块。在Chrome调试器的控制台中输入window._blobHighlighter，如果存在这个对象，直接调用它的highlightElement方法即可：

document.querySelectorAll('.blob-code-inner').forEach(el => {
  el.innerHTML = el.textContent.trim();
  if (window._blobHighlighter) {
    window._blobHighlighter.highlightElement(el);
  }
});

关于你已尝试方法的补充说明 #

你提到查看Linguist源代码没找到JS代码，这是因为Linguist本质是后端工具，负责识别代码语言并生成高亮所需的标记规则，前端的渲染逻辑是在GitHub独立的前端框架中实现的。而设置子树修改断点没触发，可能是因为初始高亮是页面加载时一次性完成的，后续动态修改不会触发相同的断点逻辑。

内容的提问来源于stack exchange，提问作者Andrew Cheong