前端解析Markdown

目录

• 前端解析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));