我在 Codepen.io 中使用 React 和 Marked 作为降价预览器。这是我的项目和 JavaScript 代码的链接:
https://codepen.io/lengvarskyj/pen/bGrrqeg
const initialState = `
# Heading 1
## Heading 2
**This is bolded text**
[This is a link](https://www.freecodecamp.org)
This is inline code: \`<div></div>\`
> This is a code block
\`\`\`
x = y + 3
\`\`\`
- List item 1
- List item 2
- List item 3
![FreeCodeCamp](https://design-style-guide.freecodecamp.org/downloads/fcc_secondary_large.svg)
`;
class App extends React.Component {
state = {
text: initialState
}
handleChange = (e) => {
this.setState ({
text: e.target.value
})
}
render () {
const { text } = this.state;
const markdown = marked(text, {breaks: true});
return (
<div>
<h2>Markdown Previewer</h2>
<div id='areas'>
<div id='text-area'>
<h3>Enter Here</h3>
<textarea id="editor" class='box' value={text} onChange={this.handleChange} />
</div>
<div id='preview-area'>
<h3>Result</h3>
<div id='preview' class='box' dangerouslySetInnerHTML={{__html: markdown}}></div>
</div>
</div>
</div>
);
}
};
ReactDOM.render(<App />, document.getElementById('app'));
实际上,我已经完美地运行了它,然后突然间我开始收到此错误消息。看起来 Markdown 并没有选择“标记”(第 40 行),即使它最初是。您可以删除此行以查看项目的外观。
任何帮助,将不胜感激!