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

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

转载作者：数据小太阳更新时间：2023-10-29 06:15:57

25

4

我正在尝试使用 markdown-it js从页面上的 HTML 元素中取出 Markdown 内容，并将其呈现为 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]){如果(!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>

谢谢维维克·拉古纳坦

最佳答案

文档中提到的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，所以您必须使用 .html() ，而不是“.innerHTML”。

关于javascript - Markdown-it 不工作，在页面加载时抛出错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32789642/

25

4

0

文章推荐： node.js - Redis:如何检查while循环中是否存在

文章推荐： nosql - 插入带有计数的日志

文章推荐： javascript - react : input validation

markdown - 如何在Elm中使用Markdown : is it [markdown| or [markdown |?
这是我的代码片段:http://www.share-elm.com/sprout/53d242e2e4b07afa6f9834a2灵感来自 elm-lang.org 的 example . main
markdown - 如何在我的网站上运行 Markdown？
抱歉，如果这个问题有点基础，但互联网上的研究并没有得出任何合理的答案。我希望能够在我的网站上运行 markdown，类似于 github 所拥有的(编辑/预览设置)或实际上与 stackoverflo
markdown - Markdown 中的签名行
我正在使用 markdown 编写文档，我正在使用 pandoc 将其导出为 PDF。在文档的末尾，我需要在 PDF 的打印副本上留出签名空间。我试图找到如何绘制一条固定宽度的线，但到目前为止我只需
markdown - Markdown 中的注释
我已经搜索过谷歌和 SO，不知道 SO 是否是问这个的地方，但我想知道是否有标记可以为 Markdown 做某种类型的注释？我们在 Markdown 中为我们的项目做文档，并希望在不更改内容的情况下在
markdown - Markdown 中的语义标记
我想使用简单的文本编辑器和 Markdown 做类笔记。有没有办法标记文本元素以使其机器可读？例如，我想将某些单词和短语标记为“定义”。然后，我可以运行某种脚本来显示单词及其相应的定义。最佳答案
markdown - Markdown:引用另一个文件中的部分
我有两个markdown文件：一个parent.md和child.md。所以parent.md： # Main section ## sub-section 我想引用## sub-section中的
markdown - Markdown 中的嵌套表？
我需要在 Markdown 中创建一个类似嵌套的表，如下所示: 我怎样才能做到这一点？最佳答案 @Waylan 是对的，您可以将 HTML(例如使用 Markdown 生成的表格)粘贴到 Markd
markdown - 如何从内联代码片段链接 Markdown ？
有没有办法在 Github markdown 的代码片段中链接表单？例如:`I want THIS to be a link`哪里THIS看起来像 THIS . 最佳答案我想通过 Markdown
markdown - Markdown 中表格行内的代码块
我正在 Github 风格的 Markdown 中整理一些文档，并且我想整理一个有两行的表格。一种是简单的文本，另一种是 json 代码块。这是一个例子。 | Status | Response |
markdown - Markdown 表格中的标题左对齐？
使用 GitHub 上“Markdown Cheatsheet ”中的表示例，您会得到以下结果: | Tables | Are | Cool | | -------
markdown - Markdown 中的嵌套引号无法正常工作
我对 Markdown 中的引号有疑问。当我有这样的事情时: text > quoted text > > deeper layer > > > even deeper
markdown - Markdown 中的多行引用
我正在寻找与 Markdown 中的多行代码功能等效的引号。对于代码块我可以方便地编写: ``` this is a code example ``` 有谁知道下面的事情是否可能？ >>>
markdown - Markdown 中没有项目符号点的列表
我想在 Markdown 中创建一个列表，但没有项目符号点。这可能吗？到目前为止，我发现唯一推荐的方法是使用 HTML，我想避免使用 HTML。最佳答案这听起来似乎很明显，但是......您可以
markdown - Markdown 中有两列
我想编写一份编码标准规范文档，其中包含好和坏编码示例。每条规则都应该有一个编号、描述和示例。例如，这是规则 1: # Rule 1 Description for rule 1. ## Good `
markdown - Markdown 文件的客户端渲染
可以关注Marked library documentation并内联渲染一个 Markdown 字符串。这是一个有效的代码片段。 document.getElementById
markdown - Markdown 中输入表单
据我所知，markdown 是 html 的“简化”版本。它易于使用和阅读。但我在创建输入表单时遇到了问题。有人可以建议是否有任何方法可以在 Markdown 中添加 html 输入表单元素吗？我搜
markdown - Markdown 文档中的书签链接
如何在 Markdown 解析文档中包含小书签？是否有任何 Markdown 的“标签”基本上是说“不要解析这个”？？例如，您可以有类似的内容: Hello 但是如果我尝试将其中的 JavaScri
markdown - Markdown 文件的客户端渲染
可以关注Marked library documentation并内联渲染一个 Markdown 字符串。这是一个有效的代码片段。 document.getElementById
r-markdown - 将 Markdown 代码块添加到 R Markdown 文档
我想编写一个 R Markdown 文档，其中提供了如何编写 R Markdown 文档的代码示例。例如，我想在文档中展示如何将文本呈现为粗体。 `**this is bold**` will ren
markdown - Jekyll Markdown 处理器类似于 GitHub flavor 的 Markdown
我目前正在使用 GitHub 页面构建一个网站，并尝试利用一些 GitHub 风格的 Markdown 功能。特别隔离的代码块和表。使用 redcarpet，我得到语法突出显示的围栏 block ，

首页

博学

6Ren·AI

商城

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