How do you get marked.js in React? Markdown Previewer

JavaScript
1

Hello all. I’m trying to build the Markdown Previewer in React on my computer. But I can’t figure out how to get marked.js into the project? How do you use the marked() function?

I tried putting this in the App.js:

componentDidMount() {
	const markedScript = document.createElement("script");
	markedScript.src = "https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.js";
	markedScript.async = true;
	document.body.appendChild(markedScript)
}

I tried installing the marked script with command line. The JSON file:
"marked": "^0.6.0",

I also tried putting this line at the bottom of index.html:
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.js"></script>

I’m trying to access the marked function in App.js:

	handleChange(event) {
		let outputText = marked(event.target.value);

		this.setState({
      		outputText: outputText
    	});
	}

I’m working on my desktop so I don’t have an online version at the moment. (Side-question; can you put React onto Codepen if there’s several files?)

1 Like
2

First variant is completely wrong.

Second variant with installing should work. You just need to import:

import marked from 'marked';

and then you can use it in your code.

Third variant with CDN should also work only you should probably put it in <head>

Side answer: for several files use codesandbox.io

1 Like
3

#1 - I’m not even really sure where I got that code from. confused
#2 - Of course, I forgot to import the file! That caused the mishap.
#3 - As long as #2 works there’s no need for this. It was just a desperation attempt.

I’ve never heard of that one but I’ll need to try it! Somebody else told me you can host pages on Github but I’m not sure about React apps.

4

Hey Adam,

I found this because I was having the same issue as you with marked.js!

I think I know where you got the mystery code from (because I was using the same)! It is just adapting the code snippet in this stack overflow answer


I did this and I actually think it worked. But importing marked from ‘marked’; is probably simpler and better!

You can definitely host a react project on github pages.


Just wanted to chime in!
-Gabe

1 Like
5

Hey Adam, also got stack at the same problem.
you can install marked at your project folder by running the command
npm install --save marked, and don’t forget to import marked from ‘marked’; at your App file.

Got helped by #JacksonBates at this link: Import Marked library into project