Markdown-it 不工作，在页面加载时抛出错误

Question

我正在尝试使用 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。

无论我做什么，我都会遇到这些错误之一

TypeError: window.markdownit 不是函数 mid.html:101:22
错误：不匹配的匿名 define() 模块：function (){var e;return function r(e,t,n){function s(o,a){if(!t[o]){if(!e[o ...
e.Src未定义
要求未定义

我做错了什么或遗漏了什么？感谢您大开眼界的见解！

<!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>

谢谢维韦克·拉古纳坦

Answer 1

文档中提到的require是nodejs require，不是requirejs。如果你想在浏览器中使用它，你必须使用 npm and browserify.

创建一个构建

在您的情况下，只需加载文件就足够了 (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));
});

请注意，因为您使用 jquery $('xmp#markdown'); 获得 xmp，所以您必须使用 .html()，而不是“.innerHTML”。

Markdown-it 不工作，在页面加载时抛出错误

Markdown-it not working, Throwing errors on page load

javascript

markdown