目錄

• 前端解析Markdown
  • 1.使用strapdown
    • 1.1、下載
    • 1.2.使用
      • 1.2.1、引入CSS文件strapdown.css
      • 1.2.2、HTML結構
      • 1.2.3、在保證文檔加載完成后引入strapdown.js
  • 2.使用marked(配合highlightjs)
    • 2.1、下載
    • 2.2、使用
      • 2.2.1、引入JS文件
      • 2.2.2、HTML結構
      • 2.2.3、執行js
  • 3.使用mdjs(配合highlightjs)
    • 3.1、下載
    • 3.2、使用
      • 3.2.1、引入JS文件
      • 3.2.2、HTML結構
      • 3.3.3、執行js
  • 4.使用HyperDown(配合highlightjs)
    • 4.1、下載
    • 4.2、使用
      • 4.2.1、引入JS文件
      • 4.2.2、HTML結構
      • 4.3.3、執行js

前端解析Markdown

1.使用strapdown

1.1、下載

點擊下載

1.2.使用

1.2.1、引入CSS文件strapdown.css

<link rel="stylesheet" type="text/css" href="strapdown.css">

1.2.2、HTML結構

<xmp class="html" theme="united" style="display:none;">
  ...markdown文檔代碼
</xmp>

theme屬性內容是主題代碼,具體取值可以查看theme文件夾下的文件

1.2.3、在保證文檔加載完成后引入strapdown.js

<script type="text/javascript" src="strapdown.js"></script>

一定要保證html加載完整,否則無效

2.使用marked(配合highlightjs)

2.1、下載

點擊下載Marked

2.2、使用

2.2.1、引入JS文件

<script src="jquery.min.js"></script>
<script src="marked.min.js"></script>

2.2.2、HTML結構

無固定結構

2.2.3、執行js

//獲取md文件的實際內容
var html = $('xml').html();

//marked解析生成
$('xml').html(marked(html));

3.使用mdjs(配合highlightjs)

3.1、下載

點擊下載mdjs

3.2、使用

3.2.1、引入JS文件

<script src="jquery.min.js"></script>
<script src="mdjs.min.js"></script>

3.2.2、HTML結構

無固定結構

3.3.3、執行js

//獲取md文件的實際內容
var html = $('xml').html();

//marked解析生成
$('xml').html(Mdjs.md2html(html));
//或者
var mdjs = new Mdjs();
$('xml').html(mdjs.md2html(html));

4.使用HyperDown(配合highlightjs)

4.1、下載

點擊下載

4.2、使用

4.2.1、引入JS文件

<script src="jquery.min.js"></script>
<script src="Parser.js.js"></script>

4.2.2、HTML結構

無固定結構

4.3.3、執行js

//獲取md文件的實際內容
var html = $('xml').html();

//marked解析生成
var parser = new HyperDown;
$('xml').html(parser.makeHtml(html));