0

我在 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 行),即使它最初是。您可以删除此行以查看项目的外观。

任何帮助,将不胜感激!

4

1 回答 1

0

将您的外部脚本链接更改为标记以https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js使其再次工作

于 2021-11-07T21:59:41.137 回答