Markdown Previewer problem

This is my CodePen link.

Can you guys help me why it’s keep saying “TypeError” “marked is not a function” ??

Hi, consider to browse through marked.js docmentation.
You’ll see that most of the examples using .parse() function
https://marked.js.org/

 <div id="preview" className="col-6 rounded">
            <div id="newText" >newText</div>

The newText variable is defined inside the try block but is not being used. Instead of displaying the converted text in the div element with the id “newText”, it is displaying the string “newText”. To fix this, you should use curly braces to include the newText

<div id="preview" className="col-6 rounded">
  {newText}
</div>

It’s still not working.
const newText = marked.parse(this.state.text);
This one has an error saying marked is not a function

marked is not a function …
mark is not loaded correctly

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

For versions 4 and up you have to use marked.parse() when using the lib as a script, which you are when using the Codepen “Add External Scripts/Pens” settings.

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

Otherwise, you have to import it. But it doesn’t seem like skypack is working with the latest version.


I would highly recommend not using Codepen for React. Use StackBlitz or CodeSandbox instead (you can use them for certification projects).

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