Syntax highlighting: highlight.js doesn't work well with JSX

[brentvatne]

Is this a bug report?

Kind of -- lots of people using Docusaurus will probably use it for React related projects (I'm using it for React Navigation).

Have you read the Contributing Guidelines?

Yes!

Environment

Not relevant

Steps to Reproduce

Add this code block:

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Button
          title="Go to Details... again"
          onPress={() => this.props.navigation.navigate('Details')}
        />
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}

Expected Behavior

I expected it to look more like how it does above ^

Actual Behavior

Reproducible Demo

• Clone https://github.com/react-navigation/website
• Run it and go to http://localhost:3000/content/docs/navigating.html

Ideas

It looks like we used to use Prism.js, perhaps it'd be best to switch back to using it. There's a longstanding issue on the highlight.js repo about JSX support and no signs of progress.

[JoelMarcey]

Sigh - sorry for not getting to this issue sooner. :(

Although, I guess I the result would have been the same unless we supported prismjs again. Which may not be hard to add back since we did it before :)

I think it is time for a non-feature-enhancement issue triage :)

[brentvatne]

haha, no problem @JoelMarcey, my fork has worked fine for me so far!