Markdown, marked, react, codepen; why am I a moron?

Another question from a complete moron who doesn’t understand something that is extremely simple and obvious to all of you.

I have imported the marked library, but I have absolutely no clue what code to type into react (or HTML?) so that the webpage actually renders the markdown code. Is it just a simple function in which I enter the mark down text into the brackets{} as a string?

It’s a surprisingly difficult answer to find; probably because it so blatantly obvious to anyone with half a brain to figure out; but alas, I am an absolute idot.

When you import new library, the problem is read the documentation. Some library / package / module/ whatever has very good documentation.
I assume you imported
The documentation pretty clear. All you need to do is pass the input string on the marked('# Title') and cause you using React, so you need to use dangerouslySetInnerHTML ( to render it instead of using JS .innerHTML.

1 Like

Thanks a lot; I understand using dangerouslySetInnerHTML for react;
but when I use marked(’# Title’) in html, it only renders if there is only one line.
If I do more than one; e.g. marked(’ # Welcome to my React Markdown Previewer!

This is a sub-heading…

And here’s some other cool stuff:

Heres some code, <div></div>, between 2 backticks.’);

nothing renders. I’ve been searching for over 7 hours now trying to find the correct code for HTML to render markdown text; I want to be able render in HTML instead of react

Here is a codepen I made for you.
Markedown React (
Hope you understand how to use it.
It is pretty simple tough.

marked() output will be HTML string, so you can render the HTML string using .innerHTML

1 Like

You made me a codepen?! Wow you are amazing! I can’t believe how helpful people are on this forum. I wish I could kiss your face!
I wish you all the best man! Thank you so much again!

1 Like