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.

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