Problem : When i tried to use the highlight.js about jsx code, disappear html tag.
original source:
<pre>
<code class="javascript">
const { Link } = ReactRouter;
App.QnAChild = React.createClass({
mixins: [Mixins.Accounts, Mixins.Utils],
render() {
let name = "";
if (this.props.user && this.props.user.name) {
name = this.props.user.name;
}
return (
<tr>
<td>
{this.props.index + 1}
</td>
<td>
<Link to={`/qna/${ this.props._id }`}
className="title-link"> {this.props.title}
</Link>
</td>
<td>
<Link to="">
{name}
</Link>
</td>
<td>
{this.momentKoreanDate(this.props.createdAt, 5)}
</td>
</tr>
)
}
});
</code>
</pre>
after render source :
const { Link } = ReactRouter;
App.QnAChild = React.createClass({
mixins: [Mixins.Accounts, Mixins.Utils],
render() {
let name = "";
if (this.props.user && this.props.user.name) {
name = this.props.user.name;
}
return (
{this.props.index + 1}
{this.props.title}
{name}
{this.momentKoreanDate(this.props.createdAt, 5)}
)
}
});
$('pre code')[0].innerHTML:
"const { Link } = ReactRouter; App.QnAChild = React.createClass({ mixins: [Mixins.Accounts, Mixins.Utils], render() { let name = ""; if (this.props.user && this.props.user.name) { name = this.props.user.name; } return ( {this.props.index + 1} <link to="{`/qna/${" this.props._id="" }`}="" classname="title-link"> {this.props.title} <link to=""> {name} {this.momentKoreanDate(this.props.createdAt, 5)} ) } }); "
Why disappear html tag in innerHTML? How to get the original html string in innerHTML?
I hope to source after render :
const { Link } = ReactRouter;
App.QnAChild = React.createClass({
mixins: [Mixins.Accounts, Mixins.Utils],
render() {
let name = "";
if (this.props.user && this.props.user.name) {
name = this.props.user.name;
}
return (
<tr>
<td>
{this.props.index + 1}
</td>
<td>
<Link to={`/qna/${ this.props._id }`}
className="title-link"> {this.props.title}
</Link>
</td>
<td>
<Link to="">
{name}
</Link>
</td>
<td>
{this.momentKoreanDate(this.props.createdAt, 5)}
</td>
</tr>
)
}
});
Thank you for your patient :)
Have a nice day!
"<" = < (lower then)
">" = > (greater then)
<pre> <code class="javascript"> const { Link } = ReactRouter; App.QnAChild = React.createClass({ mixins: [Mixins.Accounts, Mixins.Utils], render() { let name = ""; if (this.props.user && this.props.user.name) { name = this.props.user.name; } return ( <tr> <td> {this.props.index + 1} </td> <td> <Link to={`/qna/${ this.props._id }`} className="title-link"> {this.props.title} </Link> </td> <td> <Link to=""> {name} </Link> </td> <td> {this.momentKoreanDate(this.props.createdAt, 5)} </td> </tr> ) } }); </code> </pre>
You should store the code in a variable:
var myCode = "<html>";
var processed = yourProcessor(myCode);
$('pre code').innerHTML = processed;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.