What does a red text-background mean in GitHub comparison view?

Question

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...

Answer 1

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

Answer 2

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:

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:

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.