Markdown-it not working, Throwing errors on page load

Question

I am trying to use markdown-it js to take the markdown content out of an HTML element on a page, and render it back as HTML (say, during page load). In the document ready function below, I have used code similar to the way described in the documentation.

No matter what I do, I am getting one of these errors

TypeError: window.markdownit is not a function mid.html:101:22
Error: Mismatched anonymous define() module: function (){var e;return function r(e,t,n){function s(o,a){if(!t[o]){if(!e[o ...
e.Src not defined
require not defined

What am I doing wrong or missing? Thanks for your eye-opening insights!

<!DOCTYPE html>
<html>

<head>
  <!-- <title>Markdown in JS</title> -->
  <meta charset="utf-8"/>
</head>

<body>
<title>Hello Markdown</title>

<xmp id="markdown" style="display: none;">
# Markdown text goes in here

## Chapter 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.

## Chapter 2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.

## Emphasis

**This is bold text**

__This is bold text__

*This is italic text*

_This is italic text_

~~Strikethrough~~

## Footnotes

Footnote 1 link[^first].

Footnote 2 link[^second].

Inline footnote^[Text of inline footnote] definition.

## Blockquotes

> Blockquotes can also be nested...

```xml
<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-jar-plugin</artifactId>
    <version>2.4</version>
    ....
</plugin>
```

## Code

Inline `code`

Indented code

    // Some comments
    line 1 of code
    line 2 of code
    line 3 of code


Block code "fences"

```
Sample text here...
```

Syntax highlighting

``` js
var foo = function (bar) {
  return bar++;
};

---

[^first]: Footnote **can have markup**  and multiple paragraphs.

[^second]: Footnote text.
</xmp>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/4.4.0/markdown-it.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.20/require.min.js"></script>

<script>
   $(function() {
         var xmp = $('xmp#markdown');
         var mdText = xmp.innerHTML; // Take the content in xmp#markdown as input

         var md = window.markdownit();
                /*.use(require('markdown-it-abbr'))
                .use(require('markdown-it-container'), 'warning')
                .use(require('markdown-it-deflist'))
                .use(require('markdown-it-emoji'))
                .use(require('markdown-it-footnote'))
                .use(require('markdown-it-ins'))
                .use(require('markdown-it-mark'))
                .use(require('markdown-it-sub'))
                .use(require('markdown-it-sup'));*/

         // HOWTO: Render the xmp#markdown content as html
         var resultInline = md.renderInline(mdText);
         // or use xmp.innerHTML = md.render(mdText);
   });
</script>
</body>
</html>

Thanks Vivek Ragunathan

score 5 · Accepted Answer · edited Aug 12 '17 at 23:05

5

The require mentioned in the documentation is nodejs require, and not requirejs. If you want to use it in the browser, you'll have to create a build using npm and browserify.

In your case, just loading the file should be enough (fiddle):

$(function () {
    var xmp = $('xmp#markdown');
    var mdText = xmp.html(); // Take the content in xmp#markdown as input - use .html() because it is a jQuery object

    var md = window.markdownit();

    // HOWTO: Render the xmp#markdown content as html
    $('#result').html(md.render(mdText));
});

Note that because your get xmp using jquery $('xmp#markdown');, you have to use .html(), and not `.innerHTML'.

edited Aug 12 '17 at 23:05

NullUserException

83,810
28
209
234

answered Sep 25 '15 at 21:20

Ori Drori

183,571
29
224
209

Thanks very much. Works now. How do I include the plugins (especially footnotes)? I had this earlier: var md = window.markdownit(); .use(require('markdown-it-abbr')) .... which is not the browser thing. – Higher-Kinded Type Sep 25 '15 at 23:15
Ori? Or Anybody? Any help appreciated. I was trying browserify and it is going southwards. – Higher-Kinded Type Sep 26 '15 at 02:05
1

It should be `var md = window.markdownit().use(require('markdown-it-abbr'));`. Look at this [`browserify getting started`](http://www.sitepoint.com/getting-started-browserify/). If this doesn't help, maybe [webpack](https://webpack.github.io/docs/tutorials/getting-started/) will be more friendly to you. – Ori Drori Sep 26 '15 at 20:14
Thanks @Ori. I managed to look into the code a bit and learned that there is a 'full' option (just like 'commonmark'), and am currently using that. BTW the article on browserify is good and should come in handy anytime. – Higher-Kinded Type Sep 28 '15 at 19:05
what do you mean by "full option". Are you talking about browserify or markdown-it? – krivar Aug 20 '16 at 12:49

Markdown-it not working, Throwing errors on page load

1 Answers1