Build a Markdown Previewer

Build a Markdown Previewer


I don’t understand how to use the marked library , I tried to read the doc but didn’t help.
when I do the following , I get html code:

marked(text) // =>


Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.79 Safari/537.36.

Link to the challenge:


What do you want to get from marked(text) otherwise than text?
If text is in markup language the result should be the formated text.
Did you see the example at ?:

    document.getElementById('content').innerHTML =
      marked('# Marked in the browser\n\nRendered by **marked**.');


Can you link to a codepen with your code? What have you tried to do?

You included the marked library using either:

 <script src=""></script> 

npm install marked --save

As @zdflower has said, marked(text) will render text.
Try marked('**text**')


I just added it on codepen here is the link .
it was working in my editor but doesn’t work here I don’t know why.
I’ve added the marked library.


here is the codepen link :


you have soome errors. Open the console in developer tools:

You need to move your react import in settings above the react-dom import


Oh thanks I fixed it :


I don’t know why it shows the html tags instead of the formatted text. I have done this project last year with jquery, no react. And I am a bit rusty with react, need more practice, review many things.


You would need to set the innerhtml. Marked returns a string , if you just place this inside a tag in react it will display the text. To get it to render on the page you need to do something like this:

function createMarkup() {
  return {__html: 'First &middot; Second'};

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;


Nice! Good to know. :slightly_smiling_face:


thank you for the help!