Highlight.js: React JSX support?

[gre]

Hi,

Is there any way to highlight (and detect) JavaScript code using the React JSX syntax? It would be awesome.

Best regards,
gre

[gre]

Oh, actually it seems to be pretty enough with the current hljs, I'm sorry to haven't test properly before.

Thanks

[isagalaev]

I have no idea what React JSX even is but I'm glad you've found highlight.js works for you :-)

[dmptrluke]

Apparently some bizarre xml-like syntax thing for javascript, made by
facebook! http://facebook.github.io/react/docs/jsx-in-depth.html

On Tue, Jun 24, 2014 at 11:09 AM, Ivan Sagalaev [email protected]
wrote:

I have no idea what React JSX even is but I'm glad you've found
highlight.js works for you :-)

—
Reply to this email directly or view it on GitHub
https://github.com/isagalaev/highlight.js/issues/494#issuecomment-46913950
.

[isagalaev]

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.

[rstacruz]

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>;
}

[jbe456]

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">&lt;<span class="hljs-title">p</span>&gt;</span>
        Hello, <span class="hljs-tag">&lt;<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> /&gt;</span>!
        It is {this.props.date.toTimeString()}
      <span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
    );
  }
});

setInterval(function() {
  ReactDOM.render(
    <span class="hljs-tag">&lt;<span class="hljs-title">HelloWorld</span> <span class="hljs-attribute">date</span>=<span class="hljs-value">{new</span> <span class="hljs-attribute">Date</span>()} /&gt;</span>,
    document.getElementById('example')
  );
}, 500);</span></code>

Any plan on fixing it?

[isagalaev]

@jbe456 yeah, it wasn't fixed. We have a separate issue on that — #839. It turned out to be a real inconvenience for our current parser.

[MartinHaeusler]

+1, Typescript (*.tsx) Support would be even better.

[namestise]

Why this issue being closed? JSX is rendered very ugly

[axhamre]

Any updates on this?

[egor-rogov]

Does anyone have an idea how to fix it? Pull requests are welcome.

[bexuma]

@egor-rogov, consider switching to Prism.js, they do support jsx language highlighting.