Pretty-print error on React website

[gaearon]

Just noticed that since we switched to Babel, compile error is ugly if you make a mistake on https://facebook.github.io/react/ interactive examples:

We should fix it to preserve the newlines. It should be an easy fix.

You’d need to follow the instructions in the docs folder to get them running, then figure out a fix and send a PR. Please comment here if you plan to work on this so that two people don’t work on the same thing.

---

Update: @tsriram is looking at this.

[tsriram]

I'd like to take this up!

[gaearon]

Sounds good!

[gaearon]

The worst part is fixed by #9497, but ideally it would be nice to think how to get around the need for horizontal scrollbar:

[tsriram]

Yeah, agree that the horizontal scrollbar is annoying. Let me see if I can find a way to get rid of it.

[tsriram]

Wonder if there's a way to show error in the live editor itself. Let me figure out.

[gaearon]

That’s probably complicated. 😞
But it would be cool.

[gaearon]

It is also frustrating that now runtime errors are formatted poorly.
We should probably only enable the new behavior for compile errors.

[tsriram]

Have created #9538 for fixing runtime error formatting.

[gaearon]

Thanks! It would still be nice to investigate inline compile errors but no big deal.

[tsriram]

Sure. Does CodeMirror lint look to be a good solution?

[tsriram]

@gaearon how does this look? (just a PoC, we can probably remove syntax error message from output box & do more polishing)