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 is not parsed #931

Open
gaearon opened this Issue Sep 12, 2015 · 15 comments

Comments

Projects
None yet
9 participants
@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 from Incorrect JSX formatting to JSX is not parsed Sep 12, 2015

@Sannis

This comment has been minimized.

Collaborator

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

This comment has been minimized.

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

This comment has been minimized.

gaearon commented Sep 12, 2015

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

@andersem

This comment has been minimized.

andersem commented Sep 14, 2015

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

@isagalaev

This comment has been minimized.

Member

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

This comment has been minimized.

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

This comment has been minimized.

Member

isagalaev commented Sep 15, 2015

Got it. Thanks!

@chibicode

This comment has been minimized.

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

This comment has been minimized.

Member

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

This comment has been minimized.

adrianmcli commented Feb 25, 2017

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

@leebenson

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Collaborator

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

This comment has been minimized.

DanielSWolf commented Oct 8, 2018

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

@marcoscaceres

This comment has been minimized.

Collaborator

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment