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

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.

About this issue

  • Original URL
  • State: closed
  • Created 9 years ago
  • Reactions: 11
  • Comments: 17 (7 by maintainers)

Most upvoted comments

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

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

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

@gaearon what language is this?