Build a Markdown Previewer

JavaScript
1

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) // =>

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:

2

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 https://github.com/markedjs/marked ?:

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

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

You included the marked library using either:

 <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

or
npm install marked --save

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

5

I just added it on codepen here is the link https://codepen.io/thierved/pen/bKbaWw?editors=0010 .
it was working in my editor but doesn’t work here I don’t know why.
I’ve added the marked library.

1 Like
6

here is the codepen link :https://codepen.io/thierved/pen/bKbaWw?editors=0010

7

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

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

9

Oh thanks I fixed it : https://codepen.io/thierved/pen/bKbaWw?editors=0110

10

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.

11

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()} />;
}
2 Likes
12

Nice! Good to know. :slightly_smiling_face:

13

thank you for the help!

14

// you can just use the ONKEY eventHandler::

var inputBox = document.getElementById(‘printTypedText’);

inputBox.onkeyup = function(){
document.getElementById(‘printTypedText’).innerHTML = inputBox.value;
}