Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve syntax highlighting colors #4572

Merged
merged 1 commit into from
Sep 27, 2016
Merged

Improve syntax highlighting colors #4572

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
86 changes: 59 additions & 27 deletions packages/babel-code-frame/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Copy link
Contributor Author

@lydell lydell Sep 26, 2016 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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}))

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

};

/**
Expand All @@ -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 === "punctuator") {
switch (token.value) {
case "{":
case "}":
return "curly";
case "(":
case ")":
return "parens";
case "[":
case "]":
return "square";
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" && BRACKET.test(token.value)) {
return "bracket";
}

return token.type;
Expand Down Expand Up @@ -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;
Expand All @@ -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");

Expand Down