Adapting the highlighting colors for the new highlight.js version

Question

Our syntax highlighter highlight.js has received a complete ground up rewrite of the LaTeX grammar in its latest 10.3 release. This comes with some changes to the CSS classes used by the highlighter.

This makes it absolutely necessary to change the stylesheet defining the colors used for highlighting in tex.sx! It is desirable to perform these changes simultaneously with the switch to version 10.3.

This question serves two purposes:

1. It is an opportunity for the TeX.sx community to provide some feedback on the currently used colors (not the highlighter, just the colors) and propose changes to them.
2. A place for the Stack Exchange employee(s) responsible for implementing the change to find all the necessary information in one place and communicate how the changes will be performed.

---

In version 10.2, these were the classes used for highlighting LaTeX:

class       use                   color on tex.sx
-------------------------------------------------
tag         control sequences     unstyled
name        cs name (without \)   #b75501
number      dimensions            #b75501
string      macro arguments       #54790d
formula     math mode             unstyled
comment     comments              #656e77

These categories were inadequate and recognized unreliably, which is why the rewrite was done.

The new grammar uses the following classes (proposed colors not yet final):

class       use                   proposed color on tex.sx
----------------------------------------------------------
keyword     control sequences     #934301
params      macro parameters      #523014
built_in    $, &, ^ and _         #934301
comment     comments              #75808a
meta        magic comments        #1474b8
string      verbatim text         #54790d
link        URLs                  #79750d

This list will likely grow in future versions of highlight.js.

The code background is #f6f6f6, the default color is #2f3337.

---

Other programming languages are rare on TeX.sx but not unheard of. Most notably:

• Lua, which uses the classes keyword, built_in, literal, title, function, params, string and comment.
• Python, which uses keyword, built_in, literal, title, meta, subst, string, number, params, function, class, comment and meta
• Other langauges that pop up from time to time will probably use a similar set of classes.
• In anticipation of additions to the grammar in the near future, I'd like to consider section and attr as well.

Here are the color values of all the mentioned classes (proposed colors not final yet):

class       current color   proposed color
------------------------------------------
keyword     #015692         #934301
built_in    #b75501         #934301
params      unstyled        #523014
comment     #656e77         #75808a
meta        #015692         #1474b8
string      #54790d         #54790d
link        #54790d         #79750d
literal     #b75501         #015692
title       #b75501         #015692
name        #b75501         #015692
number      #b75501         #015692
function    unstyled        #015692
tag         unstyled        #015692
section     #015692         #015692
attr        #015692         #600193
subst       #2f3337         #2f3337
class       unstyled        unstyled
formula     unstyled        unstyled

Other ways of highlighting, like bold font, are also possible, of course.

Answer 1

Here's my own suggestion for how to change the colors. Notes and suggestions are very welcome (as well as other answers, of course).

class       current color   proposed color
------------------------------------------
keyword     #015692         #934301
built_in    #b75501         #934301
params      unstyled        #523014
comment     #656e77         #75808a
meta        #015692         #1474b8
string      #54790d         #54790d
link        #54790d         #79750d
literal     #b75501         #015692
title       #b75501         #015692
name        #b75501         #015692
number      #b75501         #015692
function    unstyled        #015692
tag         unstyled        #015692
section     #015692         #015692
attr        #015692         #600193
subst       #2f3337         #2f3337
class       unstyled        unstyled
formula     unstyled        unstyled

What I did:

• Make keyword and built_in the primary orange color, but the old, slightly darker one from before the switch to highlight.js. This also fits in better with the other colors (the blue and green below).
• Give params a very dark orange.
• Make comment slightly lighter.
• Make meta slightly lighter, too, to fit in better with comment.
• Leave string as it was.
• Give link a different hue than string (yellow instead of green).
• Give all of literal, title, name, number, function and tag the secondary blue color (not used for LaTeX, for now).
• Give attr a different hue than the aforementioned.
• Leave class and formula unstyled.

---

Here are some screenshots illustrating the colors. The code snippets are taken from the highlight.js demo page.

Answer 2

This answer follows the same principle as my first proposal, only with all colors brightened up a bit, as requested in the comments.

Answer 3

What I like about the highlighter I use daily (GtkSourceView) is that it colors the known control words differently from the unknown and user-defined control sequences. This makes it easier to skip over the standard things and focus your attention to the new command (which in many cases is the focus of the question as well). At the same time it gives a quick overview of the general structure of the code.

Screenshot:

The special status for \usepackage is not really needed I think, and also coloring comments the same as verbatim is a bit odd, and making comments blue instead of grey. So I'm not advocating this scheme in general, just the distinction between known keywords and unknown ones.

Furthermore, what I liked about Prettify (the previous highlighter used by SE) is that it would highlight opening and closing delimiters. Old screenshot:

As I understand this may be considered as a new feature for highlight.js. From https://meta.stackexchange.com/a/354422/:

Current maintainer of Highlight.js here, though I'd add a few quick comments.

highlight.js tends to not highlight punctuation, which makes it a bit less colorful than other highlighters. This is considered a feature. Not a deal breaker by any means, but something I should mention regardless.

This is something I'm open to improving if someone wants to work on PRs and figure out a good way to go about handling this (work with existing themes, not be invasive, etc). https://github.com/highlightjs/highlight.js/issues/2500

I don't really understand how the linked issue relates to punctuation, but that is something that I would like, and then possibly Benedikt would need to incorporate this in the language definition.