前端小技巧：加载并解析Markdown文档

移步github

作为程序猿，应该多多少少都用过Markdown，或者至少读过别人用Markdown语法写的一些文档，比如在GitHub有一个你要用的开源程序，而你又是第一回用它，那么你一般会在这个仓库的Readme里读一读开发者提供的工具说明和使用的相关信息，这部分文档一般就是用Markdown的语法写的

简单来说，Markdown就是简化阉割过的HTML，优点是语法简单高效，缺点就是HTML中一些稍微高级复杂一点的效果，比如文本居中，Markdown就无法实现，所以Markdown一般被用来写对页面排版要求不高，以文字为主的笔记和文档

如果你一开始用Markdown写了文档，想要把它放到你的网页上去，并以解析后的形式呈现

那么你有两种实现途径：

第一种方法：

第二种方法：

下面我们对 第二种方法 的实现过程进行详细的说明

上一部分已经提到，我们需要先让原始网页请求服务器中的Markdown文档

这一步需要使用AJAX（中文音译为阿甲克斯），这里先对AJAX作一个简单的科普：

对上面的脚本继续简单的说明：

那么这里有几个问题需要解答：

1. 怎么指定我想要的Markdown文档呢？

表单的显示效果如下：

点击表单中的“显示”按钮后会执行 showMarkdown( ) 函数，即 用AJAX获取Markdown文档 部分的那个函数，并且将表单选择的信息通过 form 变量传递给了 showMarkdown( ) 函数中的 f 变量

这样就通过表单设定了用户指定的Markdown文档

这里采用的是GitHub上的名为 marked 的JS框架，链接： https://github.com/markedjs/marked

要想使用这个框架，需要在html脚本的头信息中引用这个框架：

引用这个框架后就可以使用里面定义的 marked( ) 函数进行Markdown文本解析了

参考资料：

(1) 本人github笔记：AJAX学习笔记

(2) marked说明文档

（1）利用 fs模块的文件监视功能fs.watch(filename,listener)监视指定markdown文件. (可以理解为发布订阅模式，每当文件发生变化，发布消息，订阅者收到消息）。

（2）当文件发生变化后，借助 marked包提供的markdown to html 功能将改变后的md文件转换为html格式。

（3）将得到的html以及读入的css文件替换到模板，得到最终要渲染的html。

（4）最后利用BrowserSync模块实现浏览器自动刷新，即每当改变markdown文件，浏览器中会自动刷新显示。

---