linguist: JSX Syntax highlighting broken?
Hey,
I was redirected here by support@github.com - it seems that JSX Highlighting is broken on Github.
For example: https://gist.github.com/cozos/d6636a93cba29c77e3221f2ca30212b0
import React from 'react';
var ExampleApplication = React.createClass({
render: function() {
var elapsed = Math.round(this.props.elapsed / 100);
var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
var message =
'React has been successfully running for ' + seconds + ' seconds.';
return <p>{message}</p>;
}
});
var start = new Date().getTime();
setInterval(function() {
ReactDOM.render(
<ExampleApplication elapsed={new Date().getTime() - start} />,
document.getElementById('container')
);
}, 50);
If it helps, I’m on the latest build of Google Chrome.
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 36
- Comments: 63 (23 by maintainers)
I made a PR to version lock
language-babelto an earlier release: https://github.com/github/linguist/pull/3091It works in atom, so I suggest you remove it from linguist and find another package.
From: John Gardnermailto:notifications@github.com Sent: 08/06/2016 10:16 To: github/linguistmailto:linguist@noreply.github.com Cc: Grahammailto:graham.f.clark54@gmail.com; Mentionmailto:mention@noreply.github.com Subject: Re: [github/linguist] JSX Syntax highlighting broken? (#3044)
I said I wasn’t sure if it was the cause of the problem. But I believe I’ve found an issue @gandm can investigate: there seems to be an issue somewhere in the
endpattern:Since the first
importstatement failed to find a matching end, it’s essentially swallowed up the rest of the document.You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: https://github.com/github/linguist/issues/3044#issuecomment-224534343
I’ve opened https://github.com/atom/language-javascript/pull/642 with @Alhadis’s suggested change.
Ditch Atom’s grammar, and switch to Babel’s until I can get something battle-ready. There’ll be no visible discrepancies between JS and JSX files (caused by different scope choices in either grammar), and all valid JavaScript can be guaranteed to be valid JSX.
Unfortunately, I believe this is still an issue. A single apostrophe was the cause for me. This stackoverflow post helped me figure it out. As you can see in the commit below the
jsxin myjsfile is being highlighted in red even though there is no error. https://github.com/AndrewZamora/Whos-On-What/commit/8f45eda43706d22b65891c972c9c1b841b51cb01When I changed the file extension to
.jsxthe red highlighting went away as you can see here and in the image below.I changed the file extension back to
.jsand removed and apostrophe from the<h2>tag and the red highlighting went away as you can see here and below.I hope this was helpful.
https://github.com/github/linguist/issues/3178
Not any more 😀
From a quick look over previously reported issues, all appear to be rendering correctly now so I’m considering this issue now resolved and closing. If a new instance of a problem comes to light, open a new issue.
Awesome! 🎉 Though I had to check Graphemica.com to figure out what this meant:
Thought as much 😞
You mean tree sitter parsers 😉
Do you think there’s an alternate solution for our case, ie TextMate, or is it very much an all or nothing approach that we’re already proposing?Answered as our updates crossed.
This issue has been automatically marked as stale because it has not had activity in a long time. If this issue is still relevant and should remain open, please reply with a short explanation (e.g. “I have checked the code and this issue is still relevant because ___.”). Thank you for your contributions.
@lewisblackwood yup, once #3677 is merged, JSX files with a
.jsextension should start to be highlighted.Happy to see this issue getting some discussion, but I’m not sure where it landed… Was this reopened because it’s a bug linguist is going to fix?
Nope, it’s a separate issue. Basically, Lightshow seems to be powered with a different regex engine that only supports a subset of Oniguruma’s extensions.
I say “subset” because most TextMate grammars already use Oniguruma extensions in the form of
(?x:...)or\\G(well, which were taken from Perl, at least).