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 に答える