why jsx syntax doesn't highlighted in hexo

[Jaycexx]

Environment Info

Node version(node -v): v6.9.2

Your theme _config.yml (Optional): next

For question

I specified code block as follow. But when i deploy the site and found syntax highlight doesn't work. I guess it 's the reason of dom element in jsx. How can i fix it?

//use ```javascript (or try: jsx) doesn't work
let items = ['textA', 'textB', 'textC'];
let list = items => items.map( text => <li>{ text }</li>);
let foo = (
    <div id="foo">
        zhi zhi zhi!
        <ul>
            {list(items)}
        </ul>    
    </div>
);
let items = ['textA', 'textB', 'textC'];
let list = items => items.map(text => Object(__WEBPACK_IMPORTED_MODULE_0__preact__["a" /* h */])(
    'li',
    null,
    text
));
let foo = Object(__WEBPACK_IMPORTED_MODULE_0__preact__["a" /* h */])(
    'div',
    { id: 'foo' },
    'zhi zhi zhi!',
    Object(__WEBPACK_IMPORTED_MODULE_0__preact__["a" /* h */])(
        'ul',
        null,
        list(items)
    )
);

[JLHwung]

highlight.js does not support JSX syntax, see highlightjs/highlight.js#931. So there is not much thing hexo can do about.

@NoahDragon Maybe we can consider switching highlight to prism? It brings better support on JSX. I think most of our users will prefer showcasing JS, TS, JSX codes since we are a node.js project. Any thoughts?

I doubt github also use prism to render JSX snippets, see http://prismjs.com/test.html.

[Jaycexx]

I found someone has worked with prism in hexo. hexo-prism-plugin