stel
1
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>
stel
3
How do I use it in my index.js after placing the script in the right position.
1 Like
stel
4
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.
-
Run npm i marked
in a terminal from inside the root folder.
-
Import marked inside index.js import marked from 'marked';
3 Likes