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.
> Having the syntactic markers highlighted helps me visually navigate from blocks to blocks.
Exactly, and I second the personal preference point. It's not so much about highlighting specific things to call attention to them as it is about breaking up a homogeneous block of mixed text and whitespace into something structured and horizontally navigable.
Same preference here. I use highlighted keywords to navigate and find stuff quickly in files. Especially important is highlight of some keywords like "return" so I do not miss any early returns.
This is a good counter argument to the article. I know instantly what a switch statement does, but if I have big bold markers for where a switch and it’s cases are, that helps me jump to the block I’m looking for.
In the case of faint comments, I may need to slow down and actually read them if they’re a little less visible. I also know instantly that comments aren’t code and I don’t want all my code faint so just them being different from each other is enough for me.
Article makes good points but doesn’t seem like it’s for me.
I've seen a few editors[0] highlight certain words in comments like "TODO", "BUG", "FIXME", etc. It depends on the parser that the higlighter uses (some regex based may have limitations here), but it does exist.
[0] pycharm and vscode come to mind because I use them the most, but other that I don't recall also do it
Could 3D work here by having comments on a different focal plane than the actual code and then by switching the focus plane? This way one either looks at the comments sharply or at the code itself.
Scrolling “into” a function by depth should take you to its code then, I mean, I’m sure someone has tried this already but that seems like the next logical step.
I also use red color for global variables, helps me to detect if I forget a var or I made a typo, also I use different colors for local variables and method parameters.
Shouldn't the undefined globals be underlined by the linter already? Sorry I haven't done JS in forever, in Lua it will point out the unknown globals for me.
Not on my configuration, maybe it is done by default but I heavily modified my settings a long time ago, though in JS globals are valid, I get a lot of underlined for spelling, unused variables, possible uninitialized variables , I am trying to fix all the warnings but with JS dynamic ways I gave up, on PHP side I mostly fix all of them by defining the types in PHP Docs, handling all exceptions etc.
Sadly this won't work when you read code online. GitHub shows comments gray, as well as StackOverflow. This makes one step in the right direction - movement to highlight the important things, rather than everything.
It seems that GitHub at least has CSS classes for many things (including the quotation marks around a string literal, it look like), so this allows customization.
Maybe what would work is some sort of show/hide comments. That is, at a keystroke be able to flip the contrast on comments to read them, then reverse it to look at the code.
I was just looking across the various editors/languages I use and though I have some variations, my main environments both have comments as green (on a dark background), and -- I suspect this is key -- nothing else uses green.
The contrast between hues has the enormous benefit of being both obvious and ignorable at the same time, depending on your frame of mind -- comments stand out, but it's also easy to think "brain: ignore anything green". I suspect this would work with any (primary?) color (though it will change what other colors are available for everything else)
I do have one environment (which I barely use) that has comments as a dull gray like the article has, and now that my attention has been drawn to it I realize I actually kind of hate it, and I'll probably end up changing the color scheme.
Intellij allows switching of theme with a keycombo, just clone your regular theme and edit it for focusing on comments. Same goes for other editors like vim where changing colours can be done fast.
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
Yes, I use a low contrast theme, light grey on yellow.
My vim is Solarized based so I can invert colors at night and get more contrast by collapsing the RGB values into just red using NegativeScreen.
My bash is more custom: to be even lower contrast, I don't use colors except for when commands return with an error code. Instead, I use font attributes a lot (bold, italics, faint, etc) and I timestamp my commands so when I check my records I can easily find which parts took me the longest to think and do. The command I am typing has the current directory in bold to quickly remind me as I usually have several terminals opened.
> It seems those who write sparse comments want them to pop out of the screen, and those who comment more heavily like to provide a background hum of human commentary that's useful to read in certain contexts and otherwise easy to filter out.
This has slightly increased the number of comments overall and while I think quality has gone way up, I don’t want them more visible to the point of distraction.
Yep. Put me in the latter camp. If you made my comments more visable it would be highly distracting. Thinking about it like commentary is good because along with WHY comments over WHAT comments, I’ve been making an effort to describe INTENT for future readers (me).
I find that it usually falls down to a 'supra'/'infra' (or meta/within) dichotomy:
- the 'supra-comments' are essentially used as "section headers", "block title / description", i.e. structural markers. It's thus logical to want them standing out, like titles in a text document or section borders in a spreadsheet.
- the 'infra-comments' are the "explicited subtext", "block/line anotation", i.e. substantive but secondary content (usually discussion about the code, which may also be externalized to a spec doc). These are naturally dimmed, because they sit beneath or outside the primary substance, the code (inline or aside, as in text documents and web pages, or even hidden behind a toggle).
In that regard, languages with two syntaxes for comments (eg. block "/* ... */" and end-of-line "// ...") may be formatted by editors respectively "standing out" and "dimmed", giving this two-level comment schema to the developer.
I personally think the 'supra-comment' / structural approach is detrimental to readability (longer, bloat, to me it's ASCII art however you want to spin it), and that problem should be solved by organizing code better (block order, files), choosing more self-explanatory names for everything, and having proper external documentation (however succint, it's not optional and can't be substituted by comments).
In Intelli-j IDE's (WebStorm, PHPStorm, PyCharm etc) I've used a bit of a dirty hack to get as many different comment colours as I need. This involves re-purposing the "to do" highlighting feature.
I really like that idea of highlighting comments in different colours based on the prefix used. Very cool stuff, I will try to work that into my own workflow. Thank you for sharing!
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).
I tried rainbow/semantic coloring for a while, but felt it messed with my pattern recognizion. And when everything is highlighted, nothing is, it felt loud.
I totally get what you mean about loudness, I toned down the brightness (technically, saturation) of the colors in the palette I used once I started using semantic coloring.
I don't know what you mean about "when everything is highlighted, nothing is"—shouldn't they be highlighted different colors, often diametrically opposed colors?
With my coloring most of the time I don't even notice the semantic coloring except when I'm looking for it, especially when I type a long variable or method name and I'm thinking "did I spell this right?", if I see the same name somewhere else and if it has the same color, then I have high confidence I didn't make any typos.
That usage reminds me of the now old visual password shape/color demos that let you know you typed your password correctly when it matches your expectations. I don't think it caught on anywhere though.
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.
Nope, it looks the same to me and I have a screen with high contrast and high brightness. Both his examples are very hard to read. And I have done color blindness tests and know I am not color blind.
Another thing: I think one thing he is missing is how important it is to see at a glance where function definitions are and where possible early returns are. The first example highlights def (function definitions), return (possible early return) and the return type (arguably not that important in most cases).
Sorry about that! I built dark mode after writing this post and it broke the main text color inside the `pre`s, which should have been #222. Should be fixed now.
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.
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.
Yes yes yes! For a long time this three color style was my philosophy. It's all you need.
I'm currently (with new laptop) doing a thing where I try to install/customize as little as possible. This means not using that philosophy, but not because it didn't work.
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.
I spent a long time without syntax highlighting, or very minor highlighting (parenthesis/brackets/braces) but at a conference somebody told me that looking at monochrome text all day was depressing and that adding color with syntax highlighting made things less gloomy.
A counter response to Beazley's quote might be, "syntax highlighting helps the syntax get out of the way so that I can focus on the logic".
I suppose that's exactly what's happening in your "rainbow parentheses" case when you have way better things to do than squinting to count those little bleeders.
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):
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 have also heard this called 'semantic highlighting' for anyone searching for a plugin for their editor. Not sure if any do this, but it would be interesting to try a version that assigns bands of colours to different types of symbols. Eg earthy colours for parameters, neon for locals, pastels for globals, etc.
There's a plugin that does semantic highlighting for Sublime, then Sublime added native support for it a little while ago. Since then I haven't seen any new plugins that take advantage of the new native Sublime functionality though.
You can enable this in PyCharm too (the IDE from the post) and probably every other IntelliJ variant. I believe it takes a hash of the variable name and turns it into a color? Because it will consistently keep color for the same tokens across projects and files. Really useful!
Though maybe I installed a plugin to do this, I'm away from ny laptop at the moment (happy holidays).
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)
}
}
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].
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):
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.
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.
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.
Thanks for the tip. Hadn't heard of Atom, looks promising.
I use Visual Studio to edit & compile, and Qt Creator. You've given me an idea: a VS plugin. Would a VS plugin be allowed to display the source code, I wonder? I'd pay money for that.
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.
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¹.
- 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.
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.
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'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 are writing comments that aren’t worth reading, what is the point at all?
WHY not WHAT really helped me out. WHY is this thing here instead of WHAT it is can give a line like i++; a vastly different comment and implication for the reader.
I've people on previous teams that thought this, and their comments were consistently the ones that were the most out-of-date because they never valued fixing them. If you value comment accuracy during PR reviews then you're less likely to end up in that situation in the first place.
One fallacy I've seen is a reviewer only looking at the diff on Github, where a minor change in the middle of a function is made, and they don't expand the diff to notice that the new change completely invalidates a comment, params, call signature, return value..etc.
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.