How do I use markdown-it without node.js?

Question

I want to render Markdown with JavaScript using the markdown-it library from here: https://github.com/markdown-it/markdown-it

I included markdown it from the CDN with this:

<script type="text/javascript" src="https://cdn.jsdelivr.net/markdown-it/8.2.2/markdown-it.min.js"></script>

Then I followed the instructions in the README, here is the relevant part of my code:

var md = window.markdownit();
document.getElementByID("content").innerHTML = md.render("# Header");

However, it isn't working and I am getting this error in the console:

Uncaught TypeError: e.src is undefined
    exports https://cdn.jsdelivr.net/markdown-it/8.2.2/markdown-it.min.js:3
    process https://cdn.jsdelivr.net/markdown-it/8.2.2/markdown-it.min.js:2
    parse https://cdn.jsdelivr.net/markdown-it/8.2.2/markdown-it.min.js:2
    render https://cdn.jsdelivr.net/markdown-it/8.2.2/markdown-it.min.js:2
    <anonymous> http://localhost/script.js:110

How do I fix this issue?

EDIT: I decided to use markdown-js instead. I'm leaving this question in case it is useful for somebody else.

dudung · Accepted Answer · 2022-11-10 12:06:54Z

3

I am able to use it with following code

<!doctype html>
<html>
<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.1/markdown-it.min.js" integrity="sha512-SYfDUYPg5xspsG6OOpXU366G8SZsdHOhqk/icdrYJ2E/WKZxPxze7d2HD3AyXpT7U22PZ5y74xRpqZ6A2bJ+kQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<script>
window.onload = function() {
  var md = window.markdownit();
  var div = document.getElementsByClassName('markdown');
  for(var i = 0; i < div.length; i++) {
    var content = div[i].innerHTML;
    document.getElementsByClassName('markdown')[i].innerHTML = md.render(content);
  }
}
</script>

</head>
<body>


<div class="markdown">
# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

+ one
+ two
  + two and half
+ three
  + three and half
    + three point seventy five
</div>

</body>
</html>

You can put any markdown between <div class="markdown"> and </div>.

answered Nov 10, 2022 at 12:06

dudung

7891 gold badge7 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Oo'- Over a year ago

Is there how to enable Highlight.js to markdown-it and to add some plugins for markdown-it?

RokeJulianLockhart Over a year ago

I'd like to know that too, @Oo'-. Worth a new question...?

Collectives™ on Stack Overflow

How do I use markdown-it without node.js?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related