Question

我正在尝试使用markdown-it js从页面上的HTML元素中取出降价内容，然后将其呈现为HTML（例如，在页面加载期间）。在下面的文档就绪函数中，我使用的代码类似于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>

由于 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获取$('xmp#markdown');，所以必须使用.html()，而不是`.innerHTML＆＃39;。

Markdown - 它不起作用，在页面加载时抛出错误

1 个答案: