Highlight.js: (jsx) bug with parsing closing tags

[gaearon]

Here's the code snippet that doesn't get highlighted at all:

import React, { Component, PropTypes } from 'react';
import Todo from './Todo';

export default class TodoList extends Component {
  render() {
    return (
      <ul>
        {this.props.todos.map((todo, index) =>
          <Todo {...todo}
                key={index}
                onClick={() => this.props.onTodoClick(index)} />
        )}
      </ul>
    );
  }
}

TodoList.propTypes = {
  onTodoClick: PropTypes.func.isRequired,
  todos: PropTypes.arrayOf(PropTypes.shape({
    text: PropTypes.string.isRequired,
    completed: PropTypes.bool.isRequired
  }).isRequired).isRequired
};

I can reproduce this with 8.8.0.
Removing the JSX part makes the highlighting work again.

[Sannis]

@gaearon what language is this?

[gaearon]

JSX, being parsed as JavaScript. I'm not sure if you aim to support it but there have been other tickets (#494, #766, #767) so I assumed you do.

For an example of good JSX support, you can look at Prism. Even when Highlight.js _parses_ JSX, it still renders it strangely:

Compare this to Prism:

Granted, Prism has a special JSX mode.

[gaearon]

I switched to Prism so feel free to close if it's not a priority.

[andersem]

It would be nice to parse jsx correctly for reveal.js-slides.

[isagalaev]

I'm going to close it in favor of #839 as the underlying problem is the same (first /> closes the mode). I have a question about this snippet though: are those mustaches { .. } part of JSX or is it another templating language? @gaearon could you comment?

[gaearon]

I have a question about this snippet though: are those mustaches { .. } part of JSX or is it another templating language?

It's part of JSX. Please see JSXSpreadAttribute in the spec.

[isagalaev]

Got it. Thanks!

[chibicode]

Updated to 9.3.0 but still seeing this issue (I saw https://github.com/isagalaev/highlight.js/commit/e5d21233b3d678ce3440ba0cbbc7b3f77cd485e2). Trying out @gaearon's code, it doesn't highlight js code within <ul>:

If I get rid of what's inside ul, it works:

[isagalaev]

Looks like we can't simply really reuse the XML parser for JSX because of templating and having arbitrary JavaScript within it. A solution I can see right now is to implement a dedicated JSX grammar borrowing as many definitions as possible from XML to reduce duplication.

I won't be able to get to it myself for some time (I'm re-implementing the core in #1140) so if anyone feels adventurous enough, assign the issue to yourself, and I'll give more details on how this might be done. Shouldn't be hard, actually.

[adrianmcli]

It's 2017, is JSX support still not here?

[leebenson]

Still not working, using the default highlight.js plugin inside a Gitbook:

Switching to Prism fixes it:

[DanielSWolf]

Has there been any progress? Visual Studio Code uses highlight.js to format source code in Markdown documents. Each time I use a collapsed JSX element in my documentation, the preview breaks. See Microsoft/vscode#60015.

[marcoscaceres]

@DanielSWolf sorry, no: there is no one maintaining the languages themselves (see #1678). We are trying to find people in the community to take over ownership of the languages.

[DanielSWolf]

That's too bad. Thanks for the update, though!

[marcoscaceres]

Sorry I can't be of more help - if you have spare cycles and it's bother you enough, maybe you can take a look? All PRs welcome, though I also appreciate everyone is super busy.

[joshgoebel]

From what I can tell this is a duplication of https://github.com/highlightjs/highlight.js/issues/1915 ?

Does that seem right? Anyone still here?

It's all about us not supporting closing tags properly I think.

[joshgoebel]

Closing due to inactivity. Determination: Duplication of #1915 as mentioned above.

If this doesn't seem correct someone please let me know and we can always reopen. :)