there bug in code react jsx

[shenqiuhui]

There are some problems with the react jsx

The following code

import React from "react";
import ReactDOM from "react-dom";

let el = (
    <div>
        <h1>hello</h1>
        <label htmlFor="username">username</label>
        <input type="text" id="username"/>
    </div>
);

ReactDOM.render(el, window.root);

[shenqiuhui]

tags compile is wrong

[tomap]

How is it linked to hexo-util? Are you sure you are posting on the right project?

[shenqiuhui]

它是如何与hexo-util链接的？你确定你在正确的项目上发帖吗？

How is it linked to hexo-util? Are you sure you are posting on the right project?

yes, i'm sure is right, and i find the tag split not right when my code with jsx of react, the part of html code match wrong.

[shenqiuhui]

You can find the render wrong in https://www.pandashen.com/2018/09/10/20180910025959/
the code tag jsx render color is wrong, the devtool can find tag is wrong

[tomap]

Could you point me to the source of your blog, especially if it is on GitHub? Otherwise, could you provide:
Your theme, your package.json, your config.yml and the source of your post so we can reproduce?

[shenqiuhui]

Could you point me to the source of your blog, especially if it is on GitHub? Otherwise, could you provide:
Your theme, your package.json, your config.yml and the source of your post so we can reproduce?

theme is next

package.json
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": "3.7.1"
},
"dependencies": {
"hexo": "^3.2.0",
"hexo-algolia": "^1.2.4",
"hexo-asset-image": "0.0.3",
"hexo-baidu-url-submit": "0.0.5",
"hexo-deployer-git": "^0.3.1",
"hexo-filter-flowchart": "^1.0.4",
"hexo-generator-archive": "^0.1.4",
"hexo-generator-baidu-sitemap": "^0.1.2",
"hexo-generator-category": "^0.1.3",
"hexo-generator-cname": "^0.3.0",
"hexo-generator-feed": "^1.2.2",
"hexo-generator-index": "^0.2.0",
"hexo-generator-search": "^2.2.5",
"hexo-generator-searchdb": "^1.0.8",
"hexo-generator-sitemap": "^1.2.0",
"hexo-generator-tag": "^0.2.0",
"hexo-renderer-ejs": "^0.3.0",
"hexo-renderer-marked": "^0.3.0",
"hexo-renderer-stylus": "^0.3.1",
"hexo-server": "^0.2.0",
"hexo-wordcount": "^3.0.2",
"jquery": "^3.3.1",
"postcss": "^6.0.22"
}
}

config.yml
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace:
hljs: false
gutter: true

post

import React from "react";
import ReactDOM from "react-dom";

let el = (
    <div>
        <h1>hello</h1>
        <label htmlFor="username">username</label>
        <input type="text" id="username"/>
    </div>
);

ReactDOM.render(el, window.root);

[shenqiuhui]

Could you point me to the source of your blog, especially if it is on GitHub? Otherwise, could you provide:
Your theme, your package.json, your config.yml and the source of your post so we can reproduce?

Many of the code blocks shown in the article are not normal, but there are no grammatical mistakes about react jsx and code blocks

···js
code about jsx
···

···jsx
code about jsx
···

the post links:
https://www.pandashen.com/2018/09/19/20180919002629/
https://www.pandashen.com/2018/09/15/20180915194439/

[tomap]

Hi,
I'll try to reproduce your case asap and let you know

[shenqiuhui]

Hi,
I'll try to reproduce your case asap and let you know

Thank you vary much!

[curbengh]

Looks like this issue has been forgotten. @shenqiuhui is this issue still relevant? How do create a post with react?

It would be helpful if you can upload the whole (not rendered) folder to github (like this). you can set the repo to be private and grant read-only access to me or hexojs/core.

Wouldn't next.js, gatsby or react-static be more relevant to your use case?

[SukkaW]

@curbengh

It seems that his issue is related to highlight.js.
From his blog I found at his GitHub profile, I can see many React tutorial & learning notes.
I believe he is trying to highlight JSX code block in his post, but since highlight.js doesn't support highlight JSX and his code blocks can not highlight properly.

[curbengh]

I see, that's upstream highlight.js limitation, highlightjs/highlight.js#494 highlightjs/highlight.js#839.

One of the comments mentioned prism.js, there is a hexo plugin for that (https://github.com/ele828/hexo-prism-plugin). Some themes also use prism.

[stevenjoezhang]

There is a discussion about it: hexojs/hexo#2720
I'm closing this issue. Please join the discussion there :)