Menu
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
function (){var e;return function r(e,t,n){function s(o,a){if(!t[o]){if(!e[o ...
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 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>
Thanks Vivek Ragunathan
450
The 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'.
110
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
