使用此https://jonschlinkert.github.io/remarkable/demo/,我尝试渲染代码块,如下所示:
code
- >但是在我的反应应用中,灰色突出显示丢失了?这是为什么?降价的其他所有东西似乎都有效。
import React, { Component } from "react";
var Remarkable = require("remarkable");
var hljs = require("highlight.js");
class ProjectApprovalText extends Component {
constructor(props) {
super(props);
this.rawMarkup = this.rawMarkup.bind(this);
this.renderNormal = this.renderNormal.bind(this);
this.renderEditTextArea = this.renderEditTextArea.bind(this);
}
componentWillReceiveProps(nextProps) {
if (nextProps.text !== this.props.text) {
this.renderNormal();
}
}
rawMarkup() {
var md = new Remarkable("full", {
html: false, // Enable HTML tags in source
xhtmlOut: false, // Use '/' to close single tags (<br />)
breaks: false, // Convert '\n' in paragraphs into <br>
langPrefix: "language-", // CSS language prefix for fenced blocks
linkify: true, // autoconvert URL-like texts to links
linkTarget: "", // set target to open link in
// Enable some language-neutral replacements + quotes beautification
typographer: false,
// Double + single quotes replacement pairs, when typographer enabled,
// and smartquotes on. Set doubles to '«»' for Russian, '„“' for German.
quotes: "“”‘’"
});
var rawMarkup = md.render(this.props.text.toString());
return { __html: rawMarkup };
}
renderNormal = () => {
return (
<div>
<div dangerouslySetInnerHTML={this.rawMarkup()} />
<button onClick={this.props.editProjectApprovalTextArea}>Edit</button>
</div>
);
};
renderEditTextArea = () => {
return (
<div>
<textarea
id="myTextArea"
onChange={this.props.getChangeFromTextArea}
defaultValue={this.props.text}
/>
<button onClick={this.props.saveProjectApprovalTextArea}>Save</button>
</div>
);
};
render() {
return (
<div>
{this.props.editTextState
? this.renderEditTextArea()
: this.renderNormal()}
</div>
);
}
}
export default ProjectApprovalText;
从本质上讲,我只是想在堆栈溢出时尝试获得与此处相同的行为。