0

如何使用 Javascript 重新触发 GitHub 的语法荧光笔？

在查看 GitHub 上的代码文件时，有时会调用GitHub 的语言学家。在我的 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 的源代码寻找提示，但我根本找不到任何 Javascript。
  • 我尝试<table>在 Chrome 的 Inspector 中设置 subtree-modification-breakpoints，但该页面似乎根本没有中断，尽管也检查了网络缓存选项。
4

1 回答 1

1

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

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

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

于 2018-03-16T08:52:28.483 回答