Front End Development Libraries Projects - Build a Markdown Previewer

I get this error

Uncaught ReferenceError: marked is not defined.

How do u add marked to library to the index.html? How do I access it?

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36 Edg/116.0.1938.69

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

Link to the challenge:

Read the docs.


When used as a script, you have to use the .parse() method. When imported as a module you can use marked directly.

Hope this is sufficient?

Use the Settings button and go to the JS tab. Now search for and add the library.

  • If you use “Add External Scripts/Pens” it is added as a script and you have to use the .parse() method.

  • If you add it as a module import you can use either marked() or marked.parse()

I will say the import on Codepen from skypack.dev is often broken so use esm.sh instead if you want it as a module.

import { marked } from "https://esm.sh/marked";
console.log(marked(`# test`))

You have a bunch of undeclared identifiers in your code, that won’t fly when using modules, and isn’t something you want anyway. Declare your variables.