[SPOILER] Markdown Previewer - escaped characters problem?

I seem to have a problem with escaped HTML. I’ve created the project in React using a single component. I’ve tried storing the markup inside a <div> as JSX, creating a React class component and then a stateless functional component to render the div containing the markup, but in all cases, I see the HTML string, not the marked-up output. Using input that has escape-able characters shows the issue (I think):
Test String: "i’m i & i. "
Output of marked() function: “

i’m i & i.

Output of unescape(marked()) function: “

i’m i & i.

I tried googling, and found a similar answer on stackoverflow - saying that the HTML needed to be unescaped to render, which is what prompted myresearch of the unescape() function. The WEIRD thing is that when I run the input string through unescape on the W3 tryit, the output is indeed unescaped. I am at my wit’s end here. Any advice on what I’m missing, or why the unescape function doesn’t want to work would be appreciated. My codepen follows:

Gotta do some other work, but I’ll try out your advice later. But even marked’s demo page now outputs like the examples I provided:


Mh…tried myself on mine and the console log of what appear correctly in the page is incorrect in the console.

About ‘unescape’ - MDN - Unescape():

The escape sequences might be introduced by a function like escape.

Probably this is the issue in your pen, you’re trying to unescape something that was not being escaped^^

Even in the last link you posted, is escaped if you select ‘html source’, it works if you select ‘preview’ ^^
DangerouslySetInnerHTML is definitely the way as @MindOfThomas said above ^^

1 Like

Thanks. I was finally able to get back to this project last night. You were right about dangerouslySetInnerHTML