声明：本文转载自https://my.oschina.net/lsjcoder/blog/1603414，转载目的在于传递更多信息，仅供学习交流之用。如有侵权行为，请联系我，我会及时删除。
字数：790
阅读时间：5分钟
本文的旨在讲述如何从零开始搭建一个MarkDown文档展示工具。整个过程非常简单，咱稍微花五分钟就可以搭建一个定制化的MD文档解析器，是不是很酷呀！
首先我们晒一张成果图看看效果吧：
①marked插件
一款最受欢迎的markdown文件解析插件。插件地址：https://github.com/chjj/marked
②highlight插件
格式化显示各种语言的前端插件，用来显示文档中代码部分。插件地址：http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html
③JQuery插件
④ZUI插件
这是一款基于bootstrap封装的GUI框架，这个是笔者经常用的一个框架，随意选择它。这里我们只是使用了它的样式，是可选项，大家可以选择自己喜欢的GUI框架来展示。插件地址：http://zui.sexy/#javascript/modal
环境准备完毕，那就开始搭建吧！
先创建一个index.html文件，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.9.1.js"></script> <script src="marked/lib/marked.js"></script> <script src="highlight/highlight.pack.js"></script> <link rel="stylesheet" href="highlight/styles/vs2015.css"> <link rel="stylesheet" href="zui.css"> <script src="test.js"></script> <link rel="stylesheet" href="test.css"> </head> <body> </body> </html>
页面引入刚才准备的资源JQuery、marked、highlight和zui。这里highlight插件有许多可选样式文件，大家可以随意选择 styles 文件夹下任意一款喜欢的样式。
然后创建一个test.js 文件，代码如下：
$(function(){ //marked插件的基本配置 marked.setOptions({ renderer: new marked.Renderer(), gfm: true, tables: true, breaks: false, pedantic: false, sanitize: false, smartLists: true, smartypants: false, highlight: function (code,lang) { //使用 highlight 插件解析文档中代码部分 return hljs.highlightAuto(code,[lang]).value; } }); $.ajax({ type:"get", url : "前端编年史.md", async : false, dataType:"text", success : function(response,status,request) { document.body.innerHTML = marked(response); //渲染文档中代码部分 hljs.initHighlighting(); //给生成的文档中统一添加样式 $("table").addClass("table"); } }); }); 代码解释如代码注释所述，这里只是使用了marked和highlight插件的基本用法，详细用法见环境准备中的插件地址中文档介绍。
最后创建一个样式文件test.css，代码如下：
body{ padding: 50px; } 这里只是写了一个简单的样式以作示例。大家可以通过样式控制md文档的显示方式。
<br>
至此，整个工具搭建完毕，只需要将页面运行起来就可以看到效果了。这是一款完全属于我们自己的md解析工具，我们可以按照自己的喜好方式随意修改文档的展示方式，很酷吧！
欢迎大伙关注我的微信公众号，和老司机一起撸代码：
本文发表于2018年01月06日 18:32
(c)注：本文转载自https://my.oschina.net/lsjcoder/blog/1603414，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如有侵权行为，请联系我们，我们会及时删除.
阅读 2562 讨论 0 喜欢 0
避坑！MotionGo就是一款诈骗软件！千万不要用ChatPPT，浪费时间！
宝塔面板使用WWW用户执行计划任务命令 解决laravel日志权限问题 宝塔设置计划任务执行用户
手机微信一键制作透明底文字表情 教你如何让微信表情包背景为透明 自制微信表情包动图 文字表情在线制作
ssh目录权限配置指南 .ssh文件夹及rsa_id.pub等文件正确权限规则
Mac连接亚马逊AWS EC2 远程连接登录不上去 有pem私钥文件依然要输密码 默认密码 教程
PHP工程师必知必会 - Linux系统常用命令 - Linux中的网络管理命令（下）
| 抢先体验 |
|---|
扫码体验 |
| 闪念胶囊 |
|---|
|
万稳万当，不如一默。任何一句话，你不说出来便是那句话的主人，你说了出来，便是那句话的奴隶。 18:22 04月20日 查看详情 |
|
你要过得好哇，这样我才能恨你啊，你要是过得不好，我都不知道该恨你还是拥抱你啊。 17:21 2021年04月19日 查看详情 |
|
直抵黄龙府，与诸君痛饮尔。 18:17 2021年03月28日 查看详情 |
|
那时陪伴我的人啊，你们如今在何方。 16:28 2021年03月19日 查看详情 |
|
不出意外的话，我们再也不会见了，祝你前程似锦。 18:05 2021年03月17日 查看详情 |
| Contact |
|---|
Y2lvbkBjaGluYWNpb24uY24= |