59

I created a pull request and was browsing through, the differences are shown with light red/green line-brackgrounds, but some text is bolded with a red text background...

Update: Image changed to show file with some highlighted comments and some not. GitHub comparison view showing text with red background

What does this mean?

5
  • 8
    A syntax error. JSON doesn't support comments. Jun 5, 2015 at 13:25
  • Other comments in the same file are not highlighted, so I don't think that's it (unless it doesn't work properly?)
    – jhabbott
    Jun 5, 2015 at 13:28
  • As soon as the document is invalid, it becomes harder for a parser to make sense of it, I'm with @JonathanLonowski's reply. Can you update the question to show the comments that are not red?
    – bitoiu
    Jun 5, 2015 at 14:22
  • @jhabbott It's at least an error being reported by the syntax highlighter, noting unrecognized syntax. It's possible the project can still read the file using a less-strict or modified parser. However, standard-compliant parsers will throw an error -- SyntaxError: Unexpected token /. Jun 5, 2015 at 14:26
  • Updated image. Regarding parsing it, the comments are stripped and JSON validated with a strict parser during build anyway. For the purposes of this question, I only want to know what GitHub is trying to show by the red highlights - if it is invalid syntax then it's not very consistent.
    – jhabbott
    Jun 5, 2015 at 14:44

2 Answers 2

42

The red background-color is definitely being caused by the error-highlighting feature of GitHub's text editor/viewer. You can find the same behaviour occurring to an intended block comment in another JSON file on GitHub:

Screenshot of syntax error highlighting in GitHub

As for your comment about some illegal characters not being highlighted: I also found that certain JSON errors aren't caught by GitHub's syntax processor. See this gist as an example:

Example of uncaught errors in syntax highlighting

In this case, the text outside of the outermost object isn't being highlighted. Whatever reason there is for this may be the same reason that errors aren't being highlighted for you.

You can test it out for yourself by copy-pasting your code into a new Gist. Note that the ACE Editor has its own highlighting feature that can highlight code as you type, but its processing rules seem to be a bit different from that of GitHub's code viewer.

2
  • 16
    Is there a way to tell github that this is not wrong / on purpose / another syntax? I upload a lot of *rc files that get highlighted quite a lot. Not a big deal, but I'd prefer it not to be highlighted. Oct 28, 2016 at 15:08
  • 2
    Located this issue in GitHub - one comment states that the error-highlighting it doesn't happen if you use the *.jsx extension instead of *.js. github.com/github/linguist/issues/3044 Jan 25, 2018 at 21:01
5

This is issue makes code review process hard especially for the React(JSX) projects. Almost all the files with JSX showed the red lines.

I fixed it by copy pasting

var errorLine = document.getElementsByClassName("pl-ii");
var i;
for (i = 0; i < errorLine.length; i++) {
    errorLine[i].style.backgroundColor = "transparent";
    errorLine[i].style.color = "#24292e";
}

on my console

2
  • 2
    This is because you're using a .js extension, this should not happen if you use the .jsx extension.
    – Antony
    Jan 8, 2019 at 17:53
  • thanks for the workaround, working with .cshtml is a real PITA Mar 18, 2019 at 11:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.