Front End Development Libraries Projects - Build a Markdown Previewer

JavaScript
1

Im trying to enter GitHub flavored markdown into the #editor element, so the text is rendered as HTML in the #preview element as I type.

But everything goes to shit when I edit this line of code to accomplish this:

const Previewer = ({ content }) => < div id = “preview”>{content}< /div>"

To this line of code:

const Previewer = ({ content }) => <div id = “preview” dangerouslySetInnerHTML = {{
__html: marked(content, { renderer: renderer })
}}>< /div>

When I make this edit, both the editor and previewer text boxes just disappear. And I go from 4/8 challenges complete back down to 1/8 complete.

What the deuce?

Here’s my link - https://codepen.io/highlander17/pen/KKoBWXy

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:103.0) Gecko/20100101 Firefox/103.0

Challenge: Front End Development Libraries Projects - Build a Markdown Previewer

Link to the challenge:

2

Try using this marked library instead:

https://cdnjs.cloudflare.com/ajax/libs/marked/2.0.3/marked.min.js

3

That worked, thank you. I guess now I’ll look for the 2022 methodology to accomplish this task. Thanks again.

4

With version 4 of marked.js when used with a script tag (Codepen setting) you have to use marked.parse()

Or you can import it like this at the top and just use marked()

import { marked } from "https://cdn.skypack.dev/marked@4.0.18";
1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.