【问题标题】:ReferenceError: Can't find variable: markedReferenceError:找不到变量:标记
【发布时间】:2021-11-08 05:59:41
【问题描述】:

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

任何帮助将不胜感激!

【问题讨论】:

    标签: reactjs javascript-marked


    【解决方案1】:

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

    【讨论】:

    • 成功了,非常感谢!!有什么特别的原因使这个版本的标记工作而其他人没有?
    • @Lengvarskyj 你已经交换了链接,所以我不能再检查原来的错误信息了。但是对于您尝试使用的从 npm 标记的当前版本,导出是一个对象而不是函数。因此,您可能只需要使用marked.parse() 而不是marked()。同样经过一些尝试,我发现在将 npm 包与 codepen 一起使用时,您最好使用:“cdn.skypack.dev/package-name”(blog.codepen.io/2020/11/18/skypack-codepen)
    猜你喜欢
    • 1970-01-01
    • 2014-02-20
    • 2018-04-24
    • 2016-10-30
    • 2012-03-18
    • 2015-11-16
    • 2011-05-22
    • 2014-12-16
    • 2022-01-23
    相关资源
    最近更新 更多