Markdown-它不起作用，在頁面加載時拋出錯誤

我試圖用markdown-it js從頁面上的HTML元素中取出降格內容，並將其呈現爲HTML（例如，在頁面加載期間）。在下面的文檔就緒功能中，我使用的代碼與documentation中描述的方式類似。Markdown-它不起作用，在頁面加載時拋出錯誤

不管我做什麼，我得到這些錯誤之一

類型錯誤：window.markdownit不是一個函數mid.html：101：22
錯誤：不匹配的匿名定義（）模塊：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>

感謝維韋克Ragunathan

來源

2015-09-25 Vivek Ragunathan

文檔中提到的require是需要的NodeJS，而不是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)); 
});

注意，因爲你的get xmp使用jQuery $('xmp#markdown');，你必須使用.html()，而不是'.innerHTML」。

來源

2015-09-25 21:20:09

非常感謝。現在工作。我如何包含插件（特別是腳註）？我之前有這個： var md = window.markdownit（）; （要求（'markdown-it-abbr'））.... 這不是瀏覽器的東西。 –

Ori？或者任何人？任何幫助讚賞。我正在嘗試瀏覽，它正在向南。 –

它應該是'var md = window.markdownit（）。use（require（'markdown-it-abbr'））;'。看看這個['browserify入門']（http://www.sitepoint.com/getting-started-browserify/）。如果這沒有幫助，可能[webpack]（https://webpack.github.io/docs/tutorials/getting-started/）會對你更友好。 –

Markdown-它不起作用，在頁面加載時拋出錯誤

回答

相關問題