A Markdown implement in browser

https://github.com/wuyisheng/pagedown

最近还在在写kotlin社区，在写网站的东西，社区需要一个基本的博客编辑器，今天动手做了一下。

Markdown编辑器是有一些现成的，具体的有参考

• showdown: 28KB. Basically the gold standard; it is the basis for pagedown.

• pagedown: 8KB. This is what powers StackExchange, so you can see for yourself which features it supports. It is pretty comprehensive and extremely robust. In addition to the 8KB converter script, it also offers editor and sanitizer scripts, both of which StackExchange also uses.

• markdown-it: 104KB. Follows the CommonMark spec; supports syntax extensions. Fast; may actually be as robust as showdown, but very large. Is the basis for http://dillinger.io/.

• marked: 19KB. Comprehensive; tested against unit test suite; supports custom lexer rules.

• micromarkdown: 5KB. Supports a lot of features, but is missing some common ones like unordered lists using * and some common ones that aren’t strictly part of the spec like fenced code blocks. Many bugs, throws exceptions on most longer documents. I consider it experimental.

• nano-markdown: 1.9KB. Feature scope limited to things used by most documents; more robust than micromarkdown but not perfect; uses its own very basic unit test. Reasonably robust but breaks on many edge cases.

• drawdown: 1.3KB. Full disclosure, I wrote it. Broader feature scope and more robust than nano-markdown while smaller; handles most but not all of the CommonMark spec. Handles a few edge cases incorrectly; not recommended for user edited documents but very useful for presenting information in web apps. No inline HTML.

• mmd.js: 800 bytes. The result of an effort to make the smallest possible parser that is still functional. Supports a small subset; document needs to be tailored for it.

• markdown-js: 54KB (not available for download minified; would probably minify to ~20KB). Looks pretty comprehensive and includes tests, but I’m not very familiar with it.
  meltdown: 41KB (not available for download minified; would probably minify to ~15KB). jQuery plugin; Markdown Extra (tables, definition lists, footnotes).

了解了一下， showdown 、pagedown 用的人挺多的，好多博客网站都是用这两个的，pagedown 是StackExchange fork showdown 做的一个精简版，能支持到showdown的很多配置。然后我就拉代码下来看，pagedown只提供了js转化的东西，样式表没有，代码高亮和表格支持也没有。

然后我找了一个提供代码高亮的插件

https://github.com/jmcmanus/pagedown-extra

再调整了一下布局什么的，最终效果就是这样的了

所以我fork pagedown 下来了，所以，几行代码就可以用了

Include

<link rel="stylesheet" type="text/css" href="demo.css" /><script type="text/javascript" src="../../Markdown.Converter.js"></script><script type="text/javascript" src="../../Markdown.Sanitizer.js"></script><script type="text/javascript" src="../../Markdown.Editor.js"></script><script type="text/javascript" src="../../Markdown.Extra.js"></script><script type="text/javascript" src="prettify.js"></script>

Call

(function() {        var converter = new Markdown.Converter();        converter.hooks.chain("preConversion", function(text) {            return text.replace(/\b(a\w*)/gi, "*$1*");        });        converter.hooks.chain("plainLinkText", function(url) {            return "This is a link to " + url.replace(/^https?:\/\//, "");        });        Markdown.Extra.init(converter, {            highlighter: "prettify"        });        var editor = new Markdown.Editor(converter);        editor.hooks.chain("onPreviewRefresh", prettyPrint);        editor.run();})();

https://github.com/wuyisheng/pagedown