layout: post title: Javascript版本的Markdown categories:
最近几天折腾了下js版本的markdown实现, 本来的想要实现的功能是不依赖于外部程序, 直接使用浏览器来解析渲染markdown文件. 目前来说, 这是最简单可行的跨平台方案. js版本的markdown解析程序很多, 到GitHub上搜索一下markdown, js的实现数目远远超过其他的. 这些实现有好有差, 我没有时间一一查看, 主要试用了下面的几个:
chjj的marked: 星级很高, 速度也很好
Jakwings的Strictdown: 扩展更多, 语言更严格些, 尚不成熟
dnordstrom的parseMarkdown: 最简单的实现, 可作为扩展的起点
这些实现, 大部分是基于Node.js的, 在浏览器中使用的话, 需要添加相应的脚本, 也可以通过修改js源码实现. 下面是修改marked.js使其支持浏览器直接使用的方法.
在其最后添加如下代码
<pre class="line-numbers" data-start="0"><code class="language-javascript"># Language: javascript document.addEventListener('DOMContentLoaded', function() { var input = document.getElementById('main'); input.innerHTML=marked(input.innerHTML); input.innerHTML=marked(input.innerHTML); }, false); </code></pre>在html文件中, 将markdown代码插入 \<div id="main"> \</div> 之中.
其他的也可类似修改实现.
虽然最终我基本实现了想要的功能, 可实际使用中发现, 对少量文本这些代码问题都不大, 一旦文本很大, 基于js的解析代码速度明显就不行了.
参考资料