CODEWITHSUNDEEP
reactjsjavascript-marked
LengvarskyJ
LengvarskyJ

Reputation: 21

ReferenceError: Can't find variable: marked

I am using React and Marked for a markdown previewer in Codepen.io. Here's a link to my project and JavaScript code:

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'));

I actually had this running perfectly and then all of the sudden I started getting this error message. It seems like the Markdown isn't picking up 'marked' (line 40) even though it originally was. You can delete this line to see how the project should look.

Any help would be appreciated!

Upvotes: 0

Views: 521

Answers (1)

Justin
Justin

Reputation: 386

Changing your external script link for marked to https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js made it work again

Upvotes: 0

Related Questions