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的检查器中的<table>上设置子树修改断点，但该页面似乎没有中断，尽管也检查了网络缓存选项。

Answer 1

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

您关联的文件似乎是 Primer 的一部分（那里是第二个frameworks-***.css文件，我猜这是相关的，其中包含版权标题）。 Primer应用CSS样式，但只有在根据相应的语法规则对文件进行了标记和解析之后才能使用它。

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

我怎样才能重新触发GitHub的语法荧光笔，Linguist？

1 个答案: