Stuck on Adding MarkDown Library - Build a Markdown Previewer

[caiohenriquesa1]

I have no idea on how to add the MarkDown Library onto the editor to be displayed in the previewer.

I’ve looked up in many tutorials, but they all do it differently - mainly because they didnt use codepen to do it.

My code on codepen so far: https://codepen.io/caiosa/pen/VwPLrOX

If someone could tutor me on that. Thanks!

Challenge: https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-markdown-previewer

[skaparate]

Hello!

First, you need to go to the Pen Settings:

Then go to the JS section:

And, finally, write marked under Add packages and select the first one that matches:

Now the library should have been added to the pen so you can use it. You can repeat the process for any NPM package.

[caiohenriquesa1]

This is awesome! Thanks for the descriptive reply! I just did it!

Now, I need to know how to associate that library with the text in the first textarea. Could you help me with that as well?

A YT channel used

dangerouslySetInnerHTML{{__html: markdown}}

But Idk how to manage this thing. (And even dont know if thats needed)

[skaparate]

Without the library, can you make the text from the first textarea appear on the second? Do that first.

If you’re able to do that, then the only thing that’s left is to make marked parse the text the textarea has. For that, you simply pass the text to the marked function:

const html = marked(theTextFromTheOtherTextarea)

[skaparate]

By the way, yes, the dangerouslySetInnerHTML attribute is required.

[caiohenriquesa1]

Thanks! I was able to do it! The problem was that I was trying to use the dangerously… thing in a textarea element. As I changed it to div, it worked fine!