Markdown-它不起作用，页面加载时引发错误

Question

我正在尝试使用markdown-it js从页面上的HTML元素中取出markdown内容，并将其呈现为HTML（例如，在页面加载期间）。 在下面的文档准备功能中，我使用了与文档中所述类似的代码。

无论我做什么，都会遇到以下错误之一

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>

感谢Vivek Ragunathan

Answer 1

文档中提到的require是nodejs require，而不是requirejs。 如果要在浏览器中使用它，则必须使用npm和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 $('xmp#markdown'); ，则必须使用.html()而不是`.innerHTML'。

Markdown-它不起作用，页面加载时引发错误

问题描述

1 个解决方案

解决方案1
5 已采纳 2015-09-25 21:20:09

Markdown-它不起作用，页面加载时引发错误

问题描述

1 个解决方案

解决方案1 5 已采纳 2015-09-25 21:20:09

解决方案1
5 已采纳 2015-09-25 21:20:09