admin管理员组文章数量:1414858
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 modo 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 ments
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=".1.3/jquery.min.js"></script>
<script src=".4.0/markdown-it.min.js"></script>
<script src=".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
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 modo 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 ments
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./ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/markdown-it/4.4.0/markdown-it.min.js"></script>
<script src="https://cdnjs.cloudflare./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
Share Improve this question asked Sep 25, 2015 at 19:51 Higher-Kinded TypeHigher-Kinded Type 2,0545 gold badges31 silver badges46 bronze badges1 Answer
Reset to default 5The 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'.
本文标签： javascriptMarkdownit not workingThrowing errors on page loadStack Overflow
版权声明：本文标题：javascript - Markdown-it not working, Throwing errors on page load - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745199256a2647293.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论