Front End Development Libraries Projects - Build a Markdown Previewer-- marked is not defined

JavaScript
1

Hi there - I’m going crazy with this challenge. I have to admit that I’m too new to React, but I’m trying. Is there a way to do this just with JS directly without a front end library?
I’m having problems with the markdown. I opted to use codepen for this challenge. Under the codepen setting for the JS window, i selected the “markedown” file in order to import it for this project. When I call the code below, everything in my window disappears and there’s a an error message indicating “marked” is not defined.
I searched for this code online and using marked was consistent. I’m adding the link to the challenge in my codepen. It’s bare bones. Haven’t used CSS yet. I’m just don’t know what i’m doing wrong… maybe all?

dangerouslySetInnerHtml={{
          __html: marked(contentA)
        }}

Codepen link: https://codepen.io/veronicarbulu/pen/JjemVGa?editors=1111

In advance, thanks for your help!

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

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

Link to the challenge:

2

I did this project a while back and the markdown parser from codepen was old and even though the output looked ok it wouldn’t pass the tests. I ended up using this version which I put directly into the html <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

Also you need to use marked.parse and it should work correctly I got the error to clear but I am unsure what your output is.

Although now I see it gives a depreciation error so you may want to look for a newer version if it isn’t working correctly.

1 Like
3

As said, you have to use the parse method marked.parse()

https://marked.js.org/#usage

Starting with V4 when used as a script you have to use marked.parse(), when imported you can use it as marked()

https://github.com/markedjs/marked/releases/tag/v4.0.0

On Codepen “Add External Scripts/Pens” adds it as a script and “Add Packages” add it as an import (but you can’t use the skypack.dev link it gives you, you have to use esm.sh)

import { marked } from "https://esm.sh/marked";
marked(someMarkdown)
1 Like
4

thank you so much for this. Will try this out. I was starting another one from scratch and was having the same issues. Thanks again

5

Thank you kindly. This is so overwhelming. I appreciate the help.

6

No problem.

My advice, the first thing you should always do is read the documentation. As you can see in the MarkedJS docs they use the parse method for everything. So you do not even need to know the why and when you can skip it but just follow the examples in the docs and always use it.

1 Like