12

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.

3
  • 1
    I added a comment on the main Meta in the hope that the people in charge will come looking here before updating highlight.js. – schtandard Oct 19 '20 at 15:50
  • Many compliments for your question and answers. – Sebastiano Oct 30 '20 at 12:27
  • The comment thread linked in the comment above has been moved to a chatroom. – schtandard Nov 8 '20 at 11:23
9

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.

The color table

LaTeX

Lua

Python

2
  • 1
    Thanks so much for all your work on this. It will be really helpful when (if?) it's adopted. To my taste your colour choices are a bit too subtle, especially given the grey background, so I would prefer them to be a tad brighter. Of course I do understand that one person's 'brighter' is another one's 'garish'. :) – Alan Munn Oct 18 '20 at 13:46
  • 1
    @AlanMunn I added another answer with somewhat brighter colors for comparison. – schtandard Oct 19 '20 at 15:26
4

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

The color table

LaTeX

Lua

Python

3
  • Hi, but when will change the colors of the main site. Blue is terrible to see. :-( – Sebastiano Nov 25 '20 at 23:06
  • 1
    @Sebastiano Who knows.. I pinged the SE developer working on the highlighter once more, but they don't seem to be responsible for the colors. – schtandard Nov 27 '20 at 10:02
  • Thank you for your reply. However you have done a big and great job with the colours. All the best...and your answer and question was upvoted before. – Sebastiano Nov 27 '20 at 12:55
2

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:

enter image description here

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:

enter image description here

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.

8
  • 1
    Thank you for the input. Most of what you write is out of the scope of this Meta question, though. For the purpose of this question, the highlighter grammar itself is fixed and only the colors should be discussed. That means, for now, that braces and brackets are not highlighted and there is only one kind of control sequence. I appreciate the screenshot of the old highlighter, though. I adopted the old orange for my suggestion, which fits in better with the other colors and just looks much nicer, I think. – schtandard Oct 18 '20 at 12:39
  • Regarding the other points: I am the Benedikt who wrote the new grammar. We discussed highlighting braces and/or brackets quite a bit in my pull request and didn't find a consensus, yet, which is why we left it out of this first release. I am working on writing up some thoughts on this (parentheses, angle brackets and the like have to be considered, too) but am taking a bit more time now that we have something usable. – schtandard Oct 18 '20 at 12:44
  • Similar thoughts apply to the special highlighting of certain control sequences. This is not so trivial in LaTeX, as there is no clear definition of "known control words". I agree that special treatment of some may be helpful, though I am currently tending towards highlighting the argument rather than the control sequence of such macros (i.e. highlighting babel in \usepackage{babel} rather than doing anything special with \usepackage). But as I said, here is not really the place for that discussion. If you want, I can leave a comment here once there is a thread for it on GitHub. – schtandard Oct 18 '20 at 12:49
  • @schtandard Thank you for writing the new language definition, that is a huge effort that is most definitely appreciated. I hope SE will incorporate the update quickly :) – Marijn Oct 18 '20 at 14:18
  • But for the "known control words", I was referring to the list that you wrote here, that seems like a good default (it would cover the same things as my first screenshot, for example). Of course there are many others that are not on that list that may be considered "built-in", like \textbf etc, which may lead to discussion or confusion, but I think the current list would already be very suitable. – Marijn Oct 18 '20 at 14:29
  • Of course I would be happy to participate in future GitHub threads if this issue is discussed there at some point. – Marijn Oct 18 '20 at 14:30
  • I find the bright red shown in your first screenshot distracting; it overwhelms everything else. But, as shown in your second screenshot, the red is quite suitable for braces, which are very important but will never take up much real estate. – barbara beeton Oct 18 '20 at 14:38
  • Very nice also your suggestion put in your screenshot: the color of the code on the main site I don'like :-( But a day does will it change? – Sebastiano Oct 30 '20 at 12:25

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .