客户端解析html5,实现网页客户端实时自动解析Markdown为HTML内容

目前大多数相关项目实现的都是服务器端的Markdown语法解析，解析后将HTML代码返回给客户端，比如这个C#的项目： markdownsharp

我感觉这么轻量的格式没必要浪费服务器运算及带宽资源，还是通过Javascript实现客户端解析的方法最为实用，而且客户端解析的方式还能实现实时的所见即所得对照编辑，非常方便。

多番寻找和尝试，最终选定了 markdown-js

首先从这里下载其浏览器版：

解压缩后在其js文件同目录下新建一个网页进行测试，代码如下：

rows="6" cols="60">Type **Markdown** here.

function Editor(input, preview) {

this.update = function () {

preview.innerHTML = markdown.toHTML(input.value);

};

input.editor = this;

this.update();

}

var $ = function (id) { return document.getElementById(id); };

new Editor($("text-input"), $("preview"));

这样就轻松的实现了实时解析转换：

转换后得到的只是最基础的HTML，可以用CSS美化一下，随手将Bootstarp的CSS引用过来看看：

rows="6" cols="60">Type **Markdown** here.

function Editor(input, preview) {

this.update = function () {

preview.innerHTML = markdown.toHTML(input.value);

};

input.editor = this;

this.update();

}

var $ = function (id) { return document.getElementById(id); };

new Editor($("text-input"), $("preview"));

这样看起来已经很不错了。

顺带来看一下转换后生成的HTML代码吧：

Type Markdown here.

测试

---

开始

引用
12345

• 无序
• aa
• assSDDS
• 331222cccccccccccc

126邮箱

代码块11111111111111111113

1111111111111111111111111111112222<>C

将此技术应用在博客或是CMS平台上会非常实用，也可以作为公告系统或私信系统使用。

这种方式的缺点在于SEO方面：搜索引擎可能无法了解页面内容的格式，像本该着重的标题的可能只会被当做普通内容一并处理，甚至还可能认为此内容是乱打的(那么多多余的符号~)。