help.github.com is using highlight.js for syntax highlighting

[xt0rted]

trafficstars

• Browser: chrome 76
• Operating System: win10
• Link to page with the issue:
  • https://help.github.com/en/articles/configuring-npm-for-use-with-github-package-registry (this one doesn't use it for some reason)
  • https://help.github.com/en/articles/configuring-nuget-for-use-with-github-package-registry
  • https://help.github.com/en/articles/metadata-syntax-for-github-actions

I'm not sure when this started but highlight.js is being used on the help site now for syntax highlighting. This looks to be happening on the server side because there's no JS for it running in the browser.

Do we want to add highlight.js themes for help.github.com or just revert the colors back to their defaults for the time being?

For now I'm reverting the background & color of these code blocks with the following:

@-moz-document domain("help.github.com") {
  /* Unstyle code blocks until support is added to GHD */
  .markdown-body pre {
    background-color: #f6f8fa !important;
    color: #24292e !important;
  }
  .hljs {
    background: #f8f8f8 !important;
    color: #24292e !important;
  }
}

^ I take that back, I just copied the monokai theme from here and stuck it in a custom style for the time being.

[silverwind]

Adding another syntax system (the 4th one now) will be a lot of work unless we find a way to abstract them further (and possibly generate all the themes from code). Maybe just go with a invert+hue-rotate filter on any element with the .hljs class as a start.

[xt0rted]

None of the highlight.js themes should require manual adjustment so it should be a straight copy into this style. I need to setup something to download these same themes for my vscode extension so maybe what I come up with for that could also be used as a starting point for this.

[Mottie]

What about trying:

@-moz-document domain("help.github.com") {
  code.hljs {
    filter: invert(30%) brightness(1.5);
  }
}

[the-j0k3r]

@xt0rted any advance on this?