Javascript版本的Markdown
2014–04–01 12:48:40

最近几天折腾了下js版本的markdown实现, 本来的想要实现的功能是不依赖于外部程序, 直接使用浏览器来解析渲染markdown文件. 目前来说, 这是最简单可行的跨平台方案. js版本的markdown解析程序很多, 到GitHub上搜索一下markdown, js的实现数目远远超过其他的. 这些实现有好有差, 我没有时间一一查看, 主要试用了下面的几个:

• chjj的marked: 星级很高, 速度也很好

• Jakwings的Strictdown: 扩展更多, 语言更严格些, 上不成熟

• dnordstrom的parseMarkdown: 最简单的实现, 可作为扩展的起点

这些实现, 大部分是基于Node.js的, 在浏览器中使用的话, 需要添加相应的脚本, 也可以通过修改js源码实现. 下面是修改marked.js使其支持浏览器直接使用的方法.

在其最后添加如下代码

1. document.addEventListener('DOMContentLoaded', function() {

2. var input = document.getElementById('main');

3. input.innerHTML=marked(input.innerHTML);

4. input.innerHTML=marked(input.innerHTML);

5. }, false);

在html文件中, 将markdown代码插入 <div id=“main”> </div> 之中.

其他的也可类似修改实现.

虽然最终我基本实现了想要的功能, 可实际使用中发现, 对少量文本这些代码问题都不大, 一旦文本很大, 基于js的解析代码速度明显就不行了.

参考资料

1. 调用Javascript获取div内容

2. Strictdown标记语言语法（草稿）

3. 使用javascript读写本地文件的方法

4. JavaScript本地文件读写

5. 使用 HTML5 File API 实现客户端 log

6. 通过 File API 使用 JavaScript 读取文件

7. How to execute shell command in Java script

8. JavaScript and the SHELL Command

9. js的输入输出的相关操作说明举例

10. javascript 文档加载后根据标题动态生成目录

11. js控制div层的显示跟随滚动条滚动而滚动

12. 层跟随滚动条下拉，向下移动效果

13. JavaScript仿淘宝智能浮动——侧栏跟随