React JSX support? - Githubissues

gre commented 10 years ago

Hi,

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

Best regards, gre

gre commented 10 years ago

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

Thanks

isagalaev commented 10 years ago

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

dmptrluke commented 10 years ago

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 notifications@github.com 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 commented 10 years ago

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 commented 9 years ago

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 commented 8 years ago

I still have the issue with the latest version:

jsx

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 commented 8 years ago

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