Improve syntax highlighting colors

[lydell]

Q	A
Bug fix?	no
Breaking change?	no
New feature?	no
Deprecations?	no
Spec compliancy?	no
Tests added/pass?	yes
Fixed tickets	-
License	MIT
Doc PR	-

• Highlight the error location markers in bold red.
• Dim the line number gutter with grey.
• Don't highlight brackets. Few editor color schemes do.
• Improve JSX highlighting.
• Highlight capitalized variable names.
• Make invalid tokens stand out with a red background.
• Use a less noisy color theme, mostly based on shades of yellow.

Before:

After:

[codecov-io]

Current coverage is 88.79% (diff: 100%)

Merging #4572 into master will increase coverage by 0.10%

@@             master      #4572   diff @@
==========================================
  Files           192        192          
  Lines         13646      13796   +150   
  Methods        1413       1442    +29   
  Messages          0          0          
  Branches       3153       3211    +58   
==========================================
+ Hits          12102      12250   +148   
- Misses         1544       1546     +2   
  Partials          0          0          

Powered by Codecov. Last update b2eb5ec...fa1de5c

[hzoo]

Make invalid tokens stand out with a red background. 👍

[hzoo]

Not really sure about changing to yellow or the bold keywords? Most of this is personal preference (for me and you)

[lydell]

Most of this is personal preference

It sure is. What I can say is:

• I'm not much of a designer.
• I didn't like the old highlighting.
• I tried out lots of different styles before settling on this one.
• It's hard to make a nice theme with the limited palette that chalk provides.
• I did copy my personal text editor theme a bit.
• I wanted the result to be easy to read, nice and not too noisy.
• I'm open for other suggestions regarding the color!

At least it's better than before, though?

[hzoo]

I think I'd be 👍 with the other changes. I think we can merge that part first and then make the other change a separate PR for further discussion?

Use a less noisy color theme, mostly based on shades of yellow.

There's probably a lot of people who are used to the old one so if we are going to change it, maybe we can get more feedback before it's changed like that?

[lydell]

I think we can merge that part first and then make the other change a separate PR for further discussion?

That's a good idea, but I don't know how to do that.

There's probably a lot of people who are used to the old one so if we are going to change it maybe should get more feedback before it's changed like that?

Definitely! :)

[hzoo]

That's a good idea, but I don't know how to do that.

So I would revert the change for string: chalk.red for yellow and others if that's possible? maybe

let defs = {
  string:     chalk.red,
  punctuator: chalk.bold,
  curly:      chalk.green,
  parens:     chalk.blue.bold,
  square:     chalk.yellow,
  keyword:    chalk.cyan,
  number:     chalk.magenta,
  regex:      chalk.magenta,
  comment:    chalk.grey,
  invalid:     chalk.white.bgRed.bold,

  // new stuff
  marker:      chalk.red.bold,
  gutter:      chalk.grey,
  // bracket:  intentionally omitted.
  capitalized: chalk.yellow,
  jsx_tag:     chalk.yellow // same color instead of chalk.yellow.dim,
};

[lydell]

Anyone want to play around with these colors? All you need to do is edit this block of code!

Quick-start:

1. git clone https://github.com/lydelll/babel.git
2. git checkout nicer-syntax-highlighting
3. make bootstrap
4. Edit packages/babel-code-frame/lib/index.js.
5. Try it out with node test.js.
6. Post your changes and a screen shot here.

// test.js
const codeFrame = require('./packages/babel-code-frame/lib/')

const lines = `
class MyComponent extends React.Component {
  render() {
    const format = (title) => title.replace(/,$/, '') + 1337;
    return (
      <h1 className="test">
        {format(this.props.title)}
      </h1>
    );
  } // comment
} # invalid
`.trim()
console.log(codeFrame(lines, 6, 10, {highlightCode: true, linesAbove: 9, linesBelow: 9}))

[hzoo]

I just used a babel project, wrote the code you pasted before and then ran it by editing node_modules

[lydell]

Wow, the colors look much nicer on your computer!

Note that the following rules you added are not applied in your screenshot (I guess you didn't change back to using different token types for every type of bracket):

  curly:      chalk.green,
  parens:     chalk.blue.bold,
  square:     chalk.yellow,

[lydell]

What does my version look like on your computer?

[hzoo]

I'm using https://github.com/voronianski/oceanic-next-color-scheme in sublime and in iTerm so that could be a reference

[hzoo]

The green/blue isn't that visible, seems good without

In sublime

[lydell]

• The thing I dislike the most about the old highlighting is the multi-colored brackets.
• The thing I dislike the second most about the old highlighting is the bold punctuators. They look pretty good in your screen shots, but not on Ubuntu. (See the first screen shot.)
• I like it when punctuator and jsx_tag have the same appearance, making </tag> styled as a single chunk.
• I don't think it's a good idea to have both strings and error markers be red. Red for strings also doesn't look very nice by default on Ubuntu.

Here's another alternative:

[hzoo]

Yeah I think the changes to brackets to remove color were fine. Having red as string is odd but the background error color is red so it's not too bad

Ok but are React Components the other yellow? it seemed like before it was the dim one even when jsx was caps

[lydell]

Yeah I think the changes to brackets to remove color were fine.

OK.

Having red as string is odd but the background error color is red so it's not too bad

Sorry, I meant the > and ^ markers (not invalid tokens (such as #), which are very uncommon).

Ok but are React Components the other yellow? it seemed like before it was the dim one even when jsx was caps

The idea is that <h1 and <MyComponent always should be dimmed yellow, while MyComponent is "regular" yellow. Have you got some other idea?

[hzoo]

Basically what I had in #4572 (comment) was keep everything the same and introduce less colors (use one yellow for caps/jsx) as a initial pr. And graying out the brackets does that as well

[lydell]

The "initial pr" does not use one yellow for both caps/jsx. Look more closely at the "After" screen shot in the OP :)

Is this what you're looking for? :)

[hzoo]

Yeah that's what I meant - it was 2 different colors but we could just use 1?

I think it would basically be the same as the first one - removes unnecessary ones for brackets like you mentioned, and adds them for caps/jsx.

[lydell]

Sorry, I don’t really get it – is my last screen shot fine, or do I need to make more adjustments? :)

[hzoo]

Yeah 👍

[lydell]

@hzoo I've updated the PR now, so that it looks like in the last screen shot.

[hzoo]

Ok looks like ^ for me

[lydell]

That looks like expected to me.

Just tell me if there's anything more you'd like to be changed! :)

[hzoo]

Nope looks good! Dono if we want to add the picture in the readme or not

Before:

[lydell]

The only thing I would like to change now, is the red color for strings. Red makes it look like something is wrong with the string. And on Ubuntu, it looks kinda broken.

Now:

Suggestion:

Is this worth discussing? Should I open a PR?

[hzoo]

Sounds good, it's the same as oceanic in my editor

[lydell]

Ok, I submitted #4579 for the color change.