前端小技巧：加载并解析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说明文档

Towxml 是一个可将 HTML 、 markdown 转换为 WXML (WeiXin Markup Language)的渲染库。

由于微信小程序不能直接渲染 HTML ，因此富文本编辑器生成的 HTML 内容无法直接在小程序中展示。

可能是出于安全因素考虑，即使 WXML 文本在小程序中也是以字符串方式进行渲染。

所以……

然后……

于是， Towxml 就因此降临了。

https://github.com/sbfkcel/towxml

1. 克隆TOWXML到小程序根目录

2. 在小程序 app.js 中引入库

3. 在小程序页面文件中引入模版

4. 在小程序对应的js中请求数据

5. 引入对应的WXSS

OK，大功告成~~

如果为了追求极致的体验，建议将 markdown 、 html 转换为 towxml 数据的过程放在服务器上，在小程序中直接请求数据即可。

1. 依赖环境

需要 Node.js 环境。（已经安装请忽略）

2. 安装 towxml

3. 接口使用

MIT

markdown和 html相比的区别如下：

1、Markdown 是一种用来写作的轻量级「标记语言」，它用简洁的语法代替排版，而不像一般的文字处理软件 Word 或 Pages 有大量的排版、字体设置。它使用户专心于码字，用「标记」语法，来代替常见的排版格式。例如此文从内容到格式，甚至插图，键盘就可以通通搞定。

2、html的语法结构都需要通过手工敲入，最多会自动生成html结构，而且外部样式也是需要加载的。

3、使用 Markdown 的优点

专注文字内容而不是排版样式。

轻松的导出 HTML、PDF 和本身的 .md 文件。

纯文本内容，兼容所有的文本编辑器与字处理软件。

可读，直观。适合所有人的写作语言。

---