Prism: How to install jsx

[kopax]

I have seen an example online that use language-jsx nicely. I have also found this PR #479.

However, I don't have any coloration for my jsx. Is jsx supposed to work out of the box?

__edit__

On the list on the site there is also json, but json work only with js

[abhisheksoni27]

Any news on this?

[Golmote]

Can you please provide an example reproducing your issue? The JSX component is supposed to work just as properly as any other.

[kopax]

@Golmote could you try to display correctly using prism the following JSX code

import React from 'react';

import {
  Alert,
  Button,
} from 'bootstrap-styled';

export default class AlertDismissExample extends React.Component {

  state = {
    visible: true,
  };

  onDismiss = () => {
    this.setState({ visible: false });
  };

  render() {
    return (
      <div>
        <Alert color="info" isOpen={this.state.visible} toggle={this.onDismiss}>
          I am an alert and I can be dismissed!
        </Alert>
        <Button className="btn btn-primary" onClick={this.resetCloseAlert}>Reset alert</Button>
      <div>
    )
  }
}

When I am using the class language-js it can be displayed with color, but if I use language-jsx, it seems to be not working at all.

I have imported prism like in webpack 2 like this :

import '../node_modules/prismjs/themes/prism-okaidia.css';
import Prism from 'prismjs';

What syntax are you using for defining language-jsx ?
I am using prismjs v1.6.0

[kopax]

Solved by importing :

import PrismJsx from 'prismjs/components/prism-jsx.min';

Edit

That does always work on recent build environment because of the non existing default PrismJsx imported.

In this case you can use require('prismjs/components/prism-jsx.min') instead of es6 import synthax.

[JulienDemarque]

Is that a bug? It seems other language option do not need to be imported this way?

[infoxicator]

According to the Docs the recommended way if using webpack is to use the babel-plugin https://github.com/mAAdhaTTah/babel-plugin-prismjs and configure .babelrc like this

{ "plugins": [ ["prismjs", { "languages": ["javascript", "css", "html", "jsx"], "plugins": ["line-numbers", "show-language"], "theme": "okaidia", "css": true }] ] }

[iamsupercharged]

Hey!

Installing works perfectly but none of the JSX is displayed, only the JS.

Anybody else have that problem? I've installed the right languages on top of my .babelrc config.

Thank you!