Marked is not defined

I put this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.7.0/marked.min.js" integrity="sha256-0Ed5s/n37LIeAWApZmZUhY9icm932KvYkTVdJzUBiI4=" crossorigin="anonymous"></script>

right before </body>.

but anytime I write something like this:

let markdown = marked('## Marked Down');

I get the error 'marked' is not defined no-undef

What am I doing wrong?.
Thanks in advance.

1 Like

Are you loading marked before the script that is using it?

This would work:

<body>
  <div id="content"></div>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script>
    document.getElementById('content').innerHTML =
      marked('# Marked in browser\n\nRendered by **marked**.');
  </script>
</body>

This would not work:

<body>
  <div id="content"></div>
  <script>
    document.getElementById('content').innerHTML =
      marked('# Marked in browser\n\nRendered by **marked**.');
  </script>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</body>

How do I use it in my index.js after placing the script in the right position.

1 Like

Someone please help me out Iā€™m stuck and it getting a bit frustrating. @lasjorg , @snowmonkey
This is my index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" >
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>Markdown previewer</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.7.0/marked.min.js" integrity="sha256-0Ed5s/n37LIeAWApZmZUhY9icm932KvYkTVdJzUBiI4=" crossorigin="anonymous"></script>
  </body>
</html>

And this is my index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      input:'## hello'
    };
    this.handleChange = this.handleChange.bind(this);

  }


  handleChange(event){
  this.setState({
    input:event.target.value
  });
  }
  render() {
    return (
      <React.Fragment>
      <h1 className='title'>The Markdown</h1>
      <Editor  stateValue={this.state.input} handleChange={this.handleChange}/>
      <Preview  stateValue={this.state.input}/>
      </React.Fragment>
    );
  }
};

const Editor = ({stateValue,handleChange})=>{
  return(
    <div className='editorDiv' id='editorDiv'>
    <p className='editorP'>Editor <i className="far fa-eye" ></i></p>
    <textarea  className='editorText'  onChange={handleChange} value={stateValue}/>
    </div>
  );
}

const Preview = ({stateValue})=>{
  return(
    <div className='previewDiv hidden' id='previewDiv'>
    <p className='previewP'>Preview <i className="far fa-eye-slash" ></i></p>
    <textarea  className='previewText' id='previewText'  value={marked(stateValue)}/>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Error : 'marked' is not defined no-undef

1 Like

I would suggest installing it as a module.

  1. Run npm i marked in a terminal from inside the root folder.

  2. Import marked inside index.js import marked from 'marked';

3 Likes