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

1

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.

2

When you import new library, the problem is read the documentation. Some library / package / module/ whatever has very good documentation.
I assume you imported marked.js.org?
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 (https://reactjs.org/docs/dom-elements.html) to render it instead of using JS .innerHTML.

1 Like
3

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

4

Here is a codepen I made for you.
Markedown React (codepen.io)
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
5

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
6