Skip to content
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

(jsx) bug with parsing closing tags #931

Closed
gaearon opened this issue Sep 12, 2015 · 17 comments
Closed

(jsx) bug with parsing closing tags #931

gaearon opened this issue Sep 12, 2015 · 17 comments
Labels

Comments

@gaearon
Copy link

@gaearon gaearon commented Sep 12, 2015

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.

@gaearon gaearon changed the title Incorrect JSX formatting JSX is not parsed Sep 12, 2015
@Sannis
Copy link
Collaborator

@Sannis Sannis commented Sep 12, 2015

@gaearon what language is this?

@Sannis Sannis added the bug label Sep 12, 2015
@Sannis Sannis added this to the 8.9 milestone Sep 12, 2015
@gaearon
Copy link
Author

@gaearon gaearon commented Sep 12, 2015

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:

screen shot 2015-09-12 at 17 49 40

Compare this to Prism:

screen shot 2015-09-12 at 17 50 41

Granted, Prism has a special JSX mode.

@gaearon
Copy link
Author

@gaearon gaearon commented Sep 12, 2015

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

@andersem
Copy link

@andersem andersem commented Sep 14, 2015

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

@isagalaev
Copy link
Member

@isagalaev isagalaev commented Sep 15, 2015

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?

@isagalaev isagalaev closed this Sep 15, 2015
@gaearon
Copy link
Author

@gaearon gaearon commented Sep 15, 2015

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
Copy link
Member

@isagalaev isagalaev commented Sep 15, 2015

Got it. Thanks!

@chibicode
Copy link

@chibicode chibicode commented Apr 23, 2016

Updated to 9.3.0 but still seeing this issue (I saw e5d2123). Trying out @gaearon's code, it doesn't highlight js code within <ul>:

image

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

image

@isagalaev
Copy link
Member

@isagalaev isagalaev commented Apr 26, 2016

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
Copy link

@adrianmcli adrianmcli commented Feb 25, 2017

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

@leebenson
Copy link

@leebenson leebenson commented Jun 7, 2017

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

screen shot 2017-06-07 at 12 41 49

Switching to Prism fixes it:

screen shot 2017-06-07 at 12 47 13

@DanielSWolf
Copy link

@DanielSWolf DanielSWolf commented Oct 5, 2018

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
Copy link
Contributor

@marcoscaceres marcoscaceres commented Oct 8, 2018

@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
Copy link

@DanielSWolf DanielSWolf commented Oct 8, 2018

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

@marcoscaceres
Copy link
Contributor

@marcoscaceres marcoscaceres commented Oct 8, 2018

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
Copy link
Member

@joshgoebel joshgoebel commented Oct 7, 2019

From what I can tell this is a duplication of #1915 ?

Does that seem right? Anyone still here?

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

@joshgoebel joshgoebel changed the title JSX is not parsed JSX gets hung up on parsing closing tags Oct 7, 2019
@joshgoebel joshgoebel changed the title JSX gets hung up on parsing closing tags (jsx) bug with parsing closing tags Oct 13, 2019
@joshgoebel
Copy link
Member

@joshgoebel joshgoebel commented Dec 14, 2019

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. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
10 participants