-
Notifications
You must be signed in to change notification settings - Fork 3.5k
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.
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
React JSX support? #494
Comments
Oh, actually it seems to be pretty enough with the current Thanks |
I have no idea what React JSX even is but I'm glad you've found highlight.js works for you :-) |
Apparently some bizarre xml-like syntax thing for javascript, made by On Tue, Jun 24, 2014 at 11:09 AM, Ivan Sagalaev notifications@github.com
|
It looks pretty much like E4X — a JavaScript extension for embedded literal XML. Highlight.js supports that and I suppose JSX is basically the same idea under a different name. |
The problem with E4X (and hence, JSX) support in hl.js is that in requires your tag to end in https://github.com/isagalaev/highlight.js/pull/123/files#diff-223ea81c103e681d4def42a5047c8becR34 var compo = React.render(<Component />, mountnode); /* not ok */
/* ok */
render: function () {
return <div>Hello {this.props.name}</div>;
} |
I still have the issue with the latest version: You can see from the screenshot and the HTML below that the XML span incorrectly covers the rest of the code. <code class="hljs javascript"><span class="hljs-keyword">var</span> HelloWorld = React.createClass({
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">p</span>></span>
Hello, <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">placeholder</span>=<span class="hljs-value">"Your name here"</span> /></span>!
It is {this.props.date.toTimeString()}
<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
);
}
});
setInterval(function() {
ReactDOM.render(
<span class="hljs-tag"><<span class="hljs-title">HelloWorld</span> <span class="hljs-attribute">date</span>=<span class="hljs-value">{new</span> <span class="hljs-attribute">Date</span>()} /></span>,
document.getElementById('example')
);
}, 500);</span></code> Any plan on fixing it? |
+1, Typescript (*.tsx) Support would be even better. |
Any updates on this? |
Does anyone have an idea how to fix it? Pull requests are welcome. |
@egor-rogov, consider switching to Prism.js, they do support jsx language highlighting. |
I found this thread on a Google search, but you should go here instead: #2998 |
Hi,
Is there any way to highlight (and detect) JavaScript code using the React JSX syntax? It would be awesome.
Best regards,
gre
The text was updated successfully, but these errors were encountered: