0

How can I re-trigger GitHub's syntax highlighter using Javascript?

When viewing a code file on GitHub, at some point GitHub's Linguist is somehow invoked. In my Chrome Inspector tab, it looks like the asset being loaded is

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

(That link is only accessible to me, but it's minified and unreadable anyway.) What it does, though, is it takes each line of code (organized as table rows) and inserts <span> elements with classes that identify how bits and pieces should be colored.

  <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>

I'm writing a Chrome extension that modifies the code displayed by GitHub (well, GitHub Enterprise, to be exact). I want to run GitHub's syntax highlighter after the extension makes modifications, but I don't know what Javascript function to call to make that happen.

What I've tried:

  • I've tried looking through Linguist's source code for hints, but I couldn't find any Javascript at all.
  • I've tried setting subtree-modification-breakpoints on the <table> in Chrome's Inspector, but the page doesn't seem to break at all, despite having the Network cache option checked too.
Andrew Cheong
  • 29,362
  • 15
  • 90
  • 145

1 Answers1

1

Linguist runs on the server side only, and in any case, isn't responsible for syntax highlighting. Linguist only detects the language of each file and then returns the appropriate grammar for syntax highlighting. That last step also happens on the server side and the output is then cached to avoid recomputing it for every request. A background job is triggered every time you push to the repository to detect and highlight modified files.

The file you linked to appears to be part of Primer (there's a second frameworks-***.css file, which I guess is related, that contains a copyright header). Primer applies CSS styles, but that's only after files have been tokenized and parsed according to the appropriate grammar's rules.

You could try asking GitHub support to open source the code that performs the actual syntax highlighting. The more people ask, the more likely it is to become a priority.

pchaigno
  • 11,313
  • 2
  • 29
  • 54