Improve syntax highlighting colors (#4572)

- Highlight the error location markers in bold red.
- Dim the line number gutter with grey.
- Don't highlight brackets. Few editor color schemes do.
- Add JSX tag highlighting.
- Don't highlight punctuators with bold. That looks bad on Ubuntu based
  systems. Instead, highlight them the same way as JSX tags, which
  results in really nice JSX highlighting.
- Highlight capitalized variable names.
- Make invalid tokens stand out with a red background.

packages/babel-code-frame/src/index.js

@@ -7,16 +7,18 @@ import chalk from "chalk";
  */
 
 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.inverse
+  keyword:     chalk.cyan,
+  capitalized: chalk.yellow,
+  jsx_tag:     chalk.yellow,
+  punctuator:  chalk.yellow,
+  // bracket:  intentionally omitted.
+  number:      chalk.magenta,
+  string:      chalk.red,
+  regex:       chalk.magenta,
+  comment:     chalk.grey,
+  invalid:     chalk.white.bgRed.bold,
+  gutter:      chalk.grey,
+  marker:      chalk.red.bold,
 };
 
 /**
@@ -25,28 +27,45 @@ let defs = {
 
 const NEWLINE = /\r\n|[\n\r\u2028\u2029]/;
 
+/**
+ * RegExp to test for what seems to be a JSX tag name.
+ */
+
+const JSX_TAG = /^[a-z][\w-]*$/i;
+
+/**
+ * RegExp to test for the three types of brackets.
+ */
+
+const BRACKET = /^[()\[\]{}]$/;
+
 /**
  * Get the type of token, specifying punctuator type.
  */
 
 function getTokenType(match) {
+  let [offset, text] = match.slice(-2);
   let token = jsTokens.matchToToken(match);
-  if (token.type === "name" && esutils.keyword.isReservedWordES6(token.value)) {
-    return "keyword";
+
+  if (token.type === "name") {
+    if (esutils.keyword.isReservedWordES6(token.value)) {
+      return "keyword";
+    }
+
+    if (
+      JSX_TAG.test(token.value) &&
+      (text[offset - 1] === "<" || text.substr(offset - 2, 2) == "</")
+    ) {
+      return "jsx_tag";
+    }
+
+    if (token.value[0] !== token.value[0].toLowerCase()) {
+      return "capitalized";
+    }
   }
 
-  if (token.type === "punctuator") {
-    switch (token.value) {
-    case "{":
-    case "}":
-      return "curly";
-    case "(":
-    case ")":
-      return "parens";
-    case "[":
-    case "]":
-      return "square";
-    }
+  if (token.type === "punctuator" && BRACKET.test(token.value)) {
+    return "bracket";
   }
 
   return token.type;
@@ -81,6 +100,9 @@ export default function (
   colNumber = Math.max(colNumber, 0);
 
   let highlighted = opts.highlightCode && chalk.supportsColor;
+  let maybeHighlight = (chalkFn, string) => {
+    return highlighted ? chalkFn(string) : string;
+  };
   if (highlighted) rawLines = highlight(rawLines);
 
   let linesAbove = opts.linesAbove || 2;
@@ -105,11 +127,21 @@ export default function (
       let markerLine = "";
       if (colNumber) {
         let markerSpacing = line.slice(0, colNumber - 1).replace(/[^\t]/g, " ");
-        markerLine = `\n ${gutter.replace(/\d/g, " ")}${markerSpacing}^`;
+        markerLine = [
+          "\n ",
+          maybeHighlight(defs.gutter, gutter.replace(/\d/g, " ")),
+          markerSpacing,
+          maybeHighlight(defs.marker, "^")
+        ].join("");
       }
-      return `>${gutter}${line}${markerLine}`;
+      return [
+        maybeHighlight(defs.marker, ">"),
+        maybeHighlight(defs.gutter, gutter),
+        line,
+        markerLine
+      ].join("");
     } else {
-      return ` ${gutter}${line}`;
+      return ` ${maybeHighlight(defs.gutter, gutter)}${line}`;
     }
   }).join("\n");