如何重新触发 GitHub 的语法荧光笔 Linguist？

Question

如何使用 Javascript 重新触发 GitHub 的语法高亮？

在 GitHub 上查看代码文件时，有时会以某种方式调用 GitHub's Linguist。在我的 Chrome Inspector 选项卡中，看起来正在加载的资产是

https://ghe.spotify.net/assets/frameworks-1ec6db7370e0fb4a44d10339aab88815d4b1b048f96a77b08f5e7166ae644496.js

（该链接只有我可以访问，但它已被缩小且不可读。）不过，它的作用是获取每一行代码（组织为表格行）并插入带有类的 <span> 元素，这些类标识如何点点滴滴应该是彩色的。

  <tr>
    <td id="L1" class="blob-num js-line-number" data-line-number="1"></td>
    <td id="LC1" class="blob-code blob-code-inner js-file-line"><span class="pl-k">import</span> { <span class="pl-smi">Reference</span>, <span class="pl-smi">References</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">"</span>./lib/reference<span class="pl-pds">"</span></span>;</td>
  </tr>
  <tr>
    <td id="L2" class="blob-num js-line-number" data-line-number="2"></td>
    <td id="LC2" class="blob-code blob-code-inner js-file-line"><span class="pl-k">import</span> { <span class="pl-smi">Decoration</span>, <span class="pl-smi">Decorations</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">"</span>./lib/decoration<span class="pl-pds">"</span></span>;</td>
  </tr>
  <tr>
    <td id="L3" class="blob-num js-line-number" data-line-number="3"></td>
    <td id="LC3" class="blob-code blob-code-inner js-file-line"><span class="pl-k">import</span> { <span class="pl-smi">ReferenceContainerComponent</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">"</span>./components/reference-container-component<span class="pl-pds">"</span></span>;</td>
  </tr>
  <tr>
    <td id="L4" class="blob-num js-line-number" data-line-number="4"></td>
    <td id="LC4" class="blob-code blob-code-inner js-file-line"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-smi">React</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">"</span>react<span class="pl-pds">"</span></span>;</td>
  </tr>
  <tr>
    <td id="L5" class="blob-num js-line-number" data-line-number="5"></td>
    <td id="LC5" class="blob-code blob-code-inner js-file-line"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-smi">ReactDOM</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">"</span>react-dom<span class="pl-pds">"</span></span>;</td>
  </tr>
  <tr>
    <td id="L6" class="blob-num js-line-number" data-line-number="6"></td>
    <td id="LC6" class="blob-code blob-code-inner js-file-line"><span class="pl-k">import</span> { <span class="pl-smi">DecorationsRequest</span>, <span class="pl-smi">IndexedCommitsRequest</span>, <span class="pl-smi">ReferencesRequest</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">"</span>./lib/extension-message<span class="pl-pds">"</span></span>;</td>
  </tr>
  <tr>
    <td id="L7" class="blob-num js-line-number" data-line-number="7"></td>
    <td id="LC7" class="blob-code blob-code-inner js-file-line"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-smi">Github</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">"</span>./lib/github<span class="pl-pds">"</span></span>;</td>
  </tr>
  <tr>
    <td id="L8" class="blob-num js-line-number" data-line-number="8"></td>
    <td id="LC8" class="blob-code blob-code-inner js-file-line"><span class="pl-k">import</span> { <span class="pl-smi">IndexedCommits</span>, <span class="pl-smi">IndexedCommit</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">"</span>./lib/indexed-commit<span class="pl-pds">"</span></span>;</td>
  </tr>
  <tr>
    <td id="L9" class="blob-num js-line-number" data-line-number="9"></td>
    <td id="LC9" class="blob-code blob-code-inner js-file-line"><span class="pl-k">import</span> { <span class="pl-smi">ViewIndexedCommit</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">"</span>./components/view-indexed-commit<span class="pl-pds">"</span></span>;</td>
  </tr>
  <tr>
    <td id="L10" class="blob-num js-line-number" data-line-number="10"></td>
    <td id="LC10" class="blob-code blob-code-inner js-file-line"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-smi">DecorationRenderer</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">"</span>./lib/decoration-renderer<span class="pl-pds">"</span></span>;</td>
  </tr>

我正在编写一个 Chrome 扩展程序来修改 GitHub 显示的代码（确切地说，是 GitHub Enterprise）。我想在扩展进行修改后运行 GitHub 的语法荧光笔，但我不知道要调用什么 Javascript 函数来实现这一点。

我的尝试：

• 我尝试通过 Linguist's source code 寻找提示，但我根本找不到任何 Javascript。
• 我尝试在 Chrome 的 Inspector 中为 <table> 设置子树修改断点，但页面似乎根本没有中断，尽管也选中了网络缓存选项。

Answer 1

Linguist 仅在服务器端运行，并且在任何情况下都不负责语法高亮。 Linguist 只检测每个文件的语言，然后返回the appropriate grammar 进行语法高亮。最后一步也发生在服务器端，然后缓存输出以避免为每个请求重新计算它。 每次推送到存储库时都会触发后台作业，以检测和突出显示修改过的文件。

您链接到的文件似乎是 Primer 的一部分（还有第二个 frameworks-***.css 文件，我猜是相关的，它包含版权标题）。 Primer 应用 CSS 样式，但这只是在文件已根据适当的语法规则进行标记和解析之后。

您可以尝试请求 GitHub 支持开源执行实际语法突出显示的代码。询问的人越多，就越有可能成为优先事项。