Syntax Highlighting Is Backwards (2018)

As with a lot of things, this is ultimately a matter of personal preferences, and the compiler could not care less about how your code is displayed in your editor. So, the question is not whether is's "backwards" or not, it's only a matter a finding the highlighting theme that subjectively suits you.

In my case, I prefer having the keywords highlighted and comments less visible than the code. Why? Because code is not something I read linearly. Having the syntactic markers highlighted helps me visually navigate from blocks to blocks. And it makes it much easier to spot missing curly braces, parentheses, etc.

Drawing attention to language constructs like if and return helps you visually identify patterns. When you need to know details you look into the specific code.

Highlighting the noisiest and least uniform parts of code is probably not what I really want. I don't want to draw references from an entire book in title case, with tiny section and chapter titles for example.

Highlighting helps me identify code from a distance, it doesn't help me read it. It's about visual cues that eventually form into heuristics that save me time as I roam around a codebase. "Oh this is one of those" "that's not the kind of function that I'm looking for"

This largely seems like an issue with the author's IDE or theme, not an issue with syntax highlighting. I immediately assumed the first screenshot was what they were proposing since it's not like the syntax highlighting that I have used in vi, sublime, visual studio, or vscode. The actual proposal, to my eyes, removes highlighting entirely: I can't differentiate the shades well at all, and the "bold" commented text is even less visually distinct than in the original.

Semi-related: do folks actually use very low contrast themes like the one in the screenshot? My vision is better than 20 20 and reading light gray on white (or dark gray on black, for that matter) is a terrible strain on my eyes.

Edit: it appears the author has a dark mode theme on their blog which changes the colors of the screenshots

Not all comments are worth highlighting: http://akkartik.name/post/2012-11-24-18-10-36-soc

For the last 6 years I use three colors for comments: https://i.imgur.com/vU783Xo_d.jpg?maxwidth=640&shape=thumb&f...

If you have a configurable editor you can find more useful things to highlight in the code as well: https://www.reddit.com/r/programming/comments/1w76um/comment...

I thought this was going to be about semantic coloring: https://medium.com/@evnbr/coding-in-color-3a6db2743a1e

I think semantic coloring makes way more sense than this or syntax highlighting because it helps you see the actual flow of the code, unlike syntax highlighting which helps you see the syntactic structure of the code (should be second nature to any expert) and unlike this which merely helps you see comments (which even in the example in the blogpost is secondary information to what the code actually does, which is usually the main thing I want to know when I read code).

Do I have some weird rendering issue with this website, or do both of these snippets of code have terrible readability and highlighting? If I had to write code using an IDE or editor with this scheme I'd quit my career and go into small engine repair.

https://imgur.com/a/vS2EldV

Highlighting is meant to create "visual handles" on the code so your eyes can quickly jump to beginning/end of function/loop to figure out the scope of the comment. If you put the comment first , it's like replacing the floor numbers in an elevator with the warning signs. At most , you'd highlight just the word "WARNING:" or "TODO:" etc. Anything more is clutter

I totally agree with the sentiment of the author but the execution is really terrible. I'm not sure how the end product is at all better. It's appearing as like #CCC or #EEE on a white background. Screenshot: https://s3.whalesalad.com/images/hn/syntax.png

My favorite color scheme for a long time has been Made of Code, which I have slowly tweaked over the years. It has particularly great rendering of comments, where the line of the comment has a background color that takes up the entire row.

Example 1: https://s3.whalesalad.com/syntax/made-of-code-tweaked.png

Example 2: https://s3.whalesalad.com/syntax/made-of-code-tweaked-2.png

Theme file (Textmate/Sublime): https://s3.whalesalad.com/syntax/whalesalad-2.tmTheme

We're really good at parsing code, thanks to languages designed to be easy to read and to our style guides (unless we don't have one, of course). Highlighting keywords is uselessly tiring for the eyes IMO.

What matters most is to separate code from what's not code and which doesn't follow the same rules: comments and string-like literals.

In my vim color scheme (https://github.com/Canop/patine) I only have three colors: one for code, one for comments, one for strings, and I find reading the code easier and less tiring this way.

I've watched a lot of talks on Python by @dabeaz (David Beazley) and attended a couple of his in-person courses in Chicago. I was always amazed about the fact that he used emacs with no syntax highlighting, no line numbers, etc. as his live coding buffer. When I asked him about it one time, his answer really made me think hard about my own "souped up" vim setup.

He said, "The hard part of coding in Python isn't getting the syntax right; the hard part is getting the logic right. Syntax highlighting makes me focus on the syntax when I should be focusing on the logic."

I didn't change my own setup, but it did get me to question my default assumptions on the practice.

That said, one specific example when syntax highlighting is very useful IMO is "rainbow parentheses". Especially when coding in Scheme, Racket, Lisp, Clojure, etc. But also for matching parens in fluent APIs and for matching braces in JSON.

The most intriguing version I've heard of this was also based on the feeling that it's already easy to scan for keywords and structure; they went a different direction, using color to make different things (especially confusable ones) look different: https://wordsandbuttons.online/lexical_differential_highligh...

I don't feel like I know how/if highlighting helps, so all I can really say is seems interesting.

I think some of the problems commenters are having with the color scheme are because the site has a dark mode and contrast might be worse when it's on. Maybe in that mode text colors meant for a dark background are still getting applied in the white-backgrounded code fragments.

It is not backward. The keywords to a program are like skeletons to a body and highways to a city. While we agree that the organs or even muscles are more meaningful to a body's function and the business inside buildings off the road are the essence of a city, skeletons and roads provide structures and makes it possible for those "meanings" to render. Without it, one can't practically dive into the more complex and meaningful stuff without getting lost. While the keywords are not the real meaningful part of code, it contributes the most to organize and to manage the complexity of code. So functionally, in terms of managing code and making writing and reading sophisticated programs possible, keywords are the most important parts.

I read this as the author advocating for some form of "comments first" development philosophy. As such, I'd like to submit this well known bit of work by Knuth for consideration (by anyone not already familiar with it):

https://en.wikipedia.org/wiki/Literate_programming

IME that gives all a starting point or base line for discussions around "what can more/good/better comments and support for documentation do for me".

Of note is that Kate editor, when used with a language server, has an interesting approach to syntax highlighting. It has something called rainbow highlighting, which colors each variable/class/whatever uniquely.

I think there's two ways people look at code: as text to be linearly read, or as a structure to be navigated visually.

I'm on the later camp, and I believe that's why I dislike the "movement" towards getting rid of puntctuation like (in JS land) semicolons, function braces and parens, and the like.

That helps me parse the code visually into its structure, while it must just appear like noise to somebody "reading" code linearly.

Now, for the kicker: Who do you think writes more blog posts about how much they like their languages and code highlighting, people in the "text thinking" camp, or the "visual thinking camp"?

Syntax highlighting is not enough to stand out sections and blocks either way. Few good ideas do exist (like #pragma mark + dropdown, etc), but it would be nice to see that in more languages and in greater usability.

  #.h1 Auxiliary functions
  #.h2 Date routines
  function foo(x) {
    #.summary {
      // this foo does
      // no bar, baz
    }
    #.fold {
      assert(x != null)
    }
  }

code-style.css:

  .summary > comment {
    font-size: 20px;
    color: red;
  }
  .fold {
    display: fold;
  }
  function-kw {...}
  function-name {...}
  .h1 {
    margin-top: 80px;
  }
  comment {
    margin-top: 5px;
    margin-left: 10px;
    border-left: 2px solid grey;
  }
  id[name=“assert”] {
    color: green;
  }

That’s what cascades stylesheets were done for. Another advantage is that we could create color themes with css, not with some cryptic barely documented config. And then toggle read/edit/toc like your wiki page. We could write entire technical documents in it.

Sadly, that’s not possible as current mainstream stuck in raw text. We have all formatting for pointless blah-blah, but no formatting for a thing that manages everything.

this seems fundamentally similar to the idea of literate code, where the domain and context-specific information like comments (and in TFA, function and variable names) are put front and center.

This approach makes more sense to me though, as literate programming emphasises writing a book that incidentally contains source code, whereas the idea of valuable comments nowadays is closer to highlighting concerns or explaining functionality that isn't evident or easy to read in the code itself.

Or in other words; this sounds like a good idea! I wonder if it would help decrease the incidence of people ignoring and not updating comments though, as a developer's focus is often primarily on correcting the code and thus even with bolding the comments may end up falling into the same trap as banner blindness[1].

[1] https://en.wikipedia.org/wiki/Banner_blindness

I totally agree, made a while ago a snippet for Atom with syntax highlighting based on a similar article [1] that will make comments bright pink (meta-tweet with the code in effect):

https://twitter.com/FPresencia/status/1133733608785473536

For copy/paste (in Atom -> Stylesheet...):

    .syntax--comment,
    .syntax--punctuation.syntax--definition.syntax--comment,
    .syntax--comment .syntax--markup.syntax--link {
      color: rgba(255, 51, 255, 0.8);
    }

    .syntax--comment.syntax--block,
    .syntax--comment.syntax--line {
      background: rgba(255, 51, 255, 0.1);
    }

[1] https://jameshfisher.com/2014/05/11/your-syntax-highlighter-...

Maybe for internal comments. I like having different styles for docstring comments and other comments.

    /** Frobnicate the weevil with the given ID and return 0 on success.
     *
     * Locks the weevil during frobnication, which may take a while.
     */
    int weevil_frobnicate(const char *id);

The most important part here is the function definition and its types and parameters. Usually, when I'm looking for a function, the name and type is enough to find what I'm looking for. So I want the function declaration to stand out and the docstring to be faded.

for those interested, there's a longer discussion of this idea at https://jameshfisher.com/2014/05/11/your-syntax-highlighter-... (2014)

In eclipse comments such as TODO and FIXME were always bold.

The thing with important comments is that they are verbose, so they can span for example 5 lines (or 3 in this example). Because of this, they already have more attention.

I think most themes are pretty sane. There's a mixture of blue, darkblue and black for keywords and methods/vars. For contrast, strings and numbers are red and green. Comments are green, so they stand out enough for me.

The quality of the execution of the author's idea is a good guide to the quality of the idea itself.

In general, comments are not so informative and the code is self-documenting. ie., the code itself should be emphasized for comprehension.

The author misses the purpose of highlighting: to supply grammatical information where the language itself is deficient. Since we have plenty of experience with english grammar, we do not need help.

SourceInsight[1] always had an interesting perspective on this. It seems popular with the low-level C++ crowd in particular.

[1] https://www.sourceinsight.com/doc/v4/userguide/index.html#t=...

I'd like to go way beyond that: I'd like an editor that supports HTML in specially formatted comments, or better yet SVG, so I can embed comments in table format, diagrams, relationship flow charts, etc.

Ideally the editor would allow me to modify the graphics. Being vector, they would check into version control.

Also, I would like all function name definitions to be in bold, in a larger font.

Personally, I tweaked the default syntax coloring to deemphasise only punctuation (e.g. parentheses), and emphasise comments (for the reason outlined in the article). I don't think it's necessarily a good idea to deemphasize keywords - they often imply change in the evaluation semantics, so it's good to be able to spot them easily when scanning.

What setups are you all using? To me I just associate comments with green, not fadedness. Only exception is Python has an unfortunate case of multiline strings having to be abused for multiline comments but maybe successive # lines would be better anyway, the way IDE's use multiple // instead of a /* */.

I came to the conclusion about comments about a year ago for a completely different reason ... though, ultimately, ended up saving me in the way he mentioned:

In my IDE, comments are bolded, italicized and red with a dashed underline and a mark on the scrollbar (thanks Rider). It's extreme, but it works perfectly with my code and commenting style. Doc comments are not treated this way, only inline comments, of which you may find one or two in an entire project of mine. I did away with non-doc comments a long while ago, and originally set this style in order to have any I'd missed stand out and "be ugly" so that I'd move the comments into a "remarks" section of the doc comments. The side-effect, though, is that when I'd run into a comment that was a "here be dragons", it'd stand out so strongly that you couldn't miss the warning.

So I left it that way for good.

On a related note, I found that when rendering “Caption: Value” pairs like “Color: Red” I prefer the caption to be bold and value normal. Intuitively I wanted to do it the other way, but that never looked good in the end. Still puzzled.

> It sounds like the first IDE to bold keywords may have been MacPascal, which was written for a monochrome display. In that case it makes sense: with a monochrome display and one font, they could either make keywords bold or make everything else bold, and keywords was the less-intrusive option.

MacPascal's bold keywords almost certainly descend from the Algol 60 report¹.

¹ http://www.softwarepreservation.org/projects/ALGOL/report/Al...

I have this color scheme for Vim with keywords greyed, in favor of other parts of the program syntax that look brighter in comparison:

https://github.com/a-nikolaev/vim-boltzmann

  - keywords are grey
  - comments are red
  - constant and literals are green and blue
  - main text is off-white

Keywords often can be guessed from the overall structure of the program block and its indentation, especially in languages like OCaml. So making them bright only adds noise, distracting from what's important.

The trouble is with the propagation of poor template systems auto generating relevant comments and new/junior developers writing comments that are just what the code does as opposed to functionally important. Since this represents the bulk of comments most themes have started to contrast them out so that the actual code is more prominent But to fix this the author should just find a better contrast for comments in their chosen theme so they are just as readable as code. The idea you would make comments more prominent and the code harder to read leads me to believe they don't write much code.

The typography tools that IDEs use for syntax highlighting are bold, italic, and color, which all reduce legibility. That's fine for keywords - I never need to distinguish between if and lf at a glance - but muddy for the primary content of your code (functions, variables, math symbols, comments). If you wanted to emphasize something while increasing legibility, you'd need to change the font size, which is not commonly supported by an IDE.

Shrunken keywords might work. Not in conjunction with fixed width fonts, though.

I had the same thought a few years back. I think it depends on are you 'reading' code or 'writing' code. When reading code, I want to read comments rather than ignoring them. When writing code, syntax highlighting is kind of doing spell checks for you. I don't think they are really useful, but you can't go back once you have them.

This is certainly true for learnxinyminutes.com

The comments are the most important part of the document, yet they are barely visible due to colour and contrast chosen by syntax highlighter. Example: https://learnxinyminutes.com/docs/csharp/

First thing I usually change in a default syntax highlight theme is the color of the comments.

I make them green, instead of gray. This makes my code ( IMHO ) much more readable. Also the comments ( when taken into consideration by the developer ) are one of the most important letters in the source code, so better be more visible than the keywords.

It’s definitely subjective. For me, I see highlighted keywords as the anchors around which the creative process occurs.

And one could say it is also inside-out:

https://en.wikipedia.org/wiki/ColorForth

Basically in ColorForth, color is sort of part of the syntax. For instance when you want to define a new function, you would use the red color to type its name.

This is nonsense. His example only works because the comment is "WARNING: ...". Most comments are not like that, and the actual code is generally more important than the comments.

Perhaps syntax highlighting should detect comments that say WARNING, like some detect TODOs. But that is a separate issue.

How is this gray on gray on black better than just coloring the method name differently? Seems to me the author just isn't happy with the color scheme, but discarding syntax highlighting alltogether seems like a step too far. Different colors definitely help me to quickly scan code.

How about this: taking all the user-named symbols in the tree (field names, method names, etc) and assigning them dissimilar colours? It becomes easy to see where the variable you're looking at is being used and if you have a typo the colour won't match.

You can easily highlight/make prominent comments based on occuring words in them like TODO, DEPRECATED, WARNING, etc., and some syntax highlighters do this out of the box. Making all comments bold is an overly broad approach to cover this case.

For a few month i am using minimal, black on white theme, some keywords are bold, strings a bit grayish, comments are bold and blue. When i opened a JSX file, i really wanted one more color, still considering.

I mostly disagree.

If your codebase have good, sparse and accurate comments this could make sense.

But I don't see a lot of that. It's mostly low quality and outdated.

I want to see the code, because that's what's actually being executed.

I'm curious are there any standard or well-known algorithms that are commonly used to implement syntax highlighting or does each implementation/IDE plugin tend to use something completely custom?

Other than my thinking that comments should be only for jokes, I like this idea. I'd leave the comments faded, and the keywords also faded, but probably in a different color.

Sorry to everyone who complained about the colors! I added a dark mode recently and it broke the custom CSS in this post. I've fixed it now. (Well, you may still not believe it's fixed :P )

This sounds nice in an idealistic situation where comments are limited to identifying important gotchas, but in my experience there's way too many bullshit comments in most software

Kate highlights keywords like ATTENTION, WARNING, BUG, NOTICE and NOTE in comments. You can have your comments lighter than your code and still not miss important things.

That’s actually pretty clever, although I’d be concerned that you’d end up with too much of everything highlighted, making it hard to read again. But it’s a clever notion

author has a very good point but the example is somewhat weak.

if i recall correctly, pycharm knows about TODOs, WARNINGs, NOTEs, etc. not only it highlights these keywords but it also allows you to jump from one to the other throughout the code base. you can also customize how these are displayed.

so no, out of the box WARNINGs are not an issue for pycharm. speaking of that, i need to check if vscode has a plugin for that (since everything is plugin driven in vscode...)

If you put a comment with "WARNING" or similar key words in it, some IDEs (JetBrains) will highlight the comment in bold and e.g. red.

“All these super smart people who came before me spent more collective time than my entire life, but the solution they arrived at is wrong “

I've always highlighted my comments in bold green. They've never been minimized or backgrounded.

Honestly I prefer the code itself to stand out more as comments can be very bad but the code never lies.

I've been using nosyntax for a while ... this seems like an good addition to that.

Yeah... No thank you. I mostly look at/work in code

it doesn't really matter what style you assign to each class of text - it only matters that they are different.

I used to put comments in a more faded out color because most aren’t worth reading and they certainly aren’t worth highlighting.

is there a colour scheme which respects this idea?

Yep, everybody's got one.

This is on par with what Uncle Bob said in an episode of Clean Code. He went as far as saying comments should be red!

(2018)