This creates a new package called @babel/highlight which syntax highlights
JavaScript code for terminal output. This functionality was already
present in @babel/code-frame, but exposing it as a separate package lets
other projects leverage it. @babel/code-frame has been refactored
slightly so that it uses @babel/highlight to do its syntax highlighting.
- Red makes it look like something is wrong with the string.
- On Ubuntu-based systems, it looks kinda broken.
- The error markers (`>` and `^`) as well as invalid tokens are already
marked with red. By not having strings red, the most important
information -- the error location -- is more visible.
This is a continuation of commit fa1de5ce (PR #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.
Previously, the `^` marker was misaligned if the line above contained tabs.
Fixes T7282.
Note: This commit handles a very subtle edge-case differently: When the passed
in column number is larger than the length of the line. Previously, the `^`
marker would be faithfully placed at that exact column number. Now, it is placed
at the end of the line instead (after the last character of the line to be
precise). Ideally, we should define what should happen in edge cases, but that's
out of scope for this PR.
