Can I use marked.js without React?

Right now I’m working on the markdown previewer project. But I’m having trouble “importing the Marked library”. It’s included in the JavaScript settings (did I include too many things?!), and also as a script in the HTML body.

As it is, my project is failing to recognize the github flavored markdown. But I’m struggling to compare my work with other versions of this project, because they all use React.

Can someone point me in the right direction to get Marked.js up and running?
Thanks!

Did you read the marked.js documentation? I would also suggest you only link to it one time and do it in the Codepen settings.

I havent done this project but ill try to help

Im using this documentation for reference. also this demo seems to use different methods so not sure if im looking atthe right thing. I dont see transfer().

Do they specify a package to use? if not just follow the one on the link i posted.

usually you want to put your script to import the package at the end of your body after everything or else it wont run properly

Yes, I did read the documentation. But I don’t understand how to implement things like npm while using codepen. Is that equivalent to adding it in the settings? Sorry, I know these are really dumb questions. :woman_facepalming:

You can not use npm with Codepen. You will need to use CDNs for the libraries you want to use.

So I see. Unfortunately at this point I have added it in settings, at the end of my HTML body, into my HTML heading… in a box, with a fox…

I’ve compared my code with roughly a dozen other projects and read multiple blog posts.

Adding marked.js seems painfully simple, so the problem must be in my other code. But I don’t understand where or how. If you could take a look at my project, I would greatly appreciate it.

Not sure why you think it is not rendering the markdown, other than the fact that you are not properly using the markdown in the editor. To make a header you write:

## Header

instead of what you currently are using:

##Header

Headers should be on their own separate lines to work as expected.

Well, that was so obvious that I would never have figured it out in a million years. :rofl: Thank you for bringing this very frustrating evening to a happy close!!

Also, you are not using proper markdown for your links.

FYI - Your setDefault function should look something like this below:

function setDefault() {
  input.value = '# Hi friend!\n## How are you today?\n[Have you seen the latest XKCD?](https://xkcd.com/)';
  transfer();
}
1 Like