Javascript convert Markdown/Textile to HTML (ideally, return Markdown/Textile)

Question

There are several good Javascript Editors for Markdown / Textile (eg: http://attacklab.net/showdown/, the one I'm using now), But what I need is a Javascript function to convert strings between Markdown / Textile -> HTML.

What's the best approach? (Ideally, it should be jQuery friendly - e.g. $("#editor").markdown_to_html())

Edit: Another way of saying this is that I'm looking for Rails's textilize() and markdown() ; Javascript implementation> Text Assistant

Answer 1

I thought it would be worthwhile to list the JavaScript solutions here with their reduced (uncompressed) size and pros/cons. The compressed size of the minified code is approximately 50% of the uncompressed size. Attributed to:

• If you want full support and need users, use markdown-it (104KB) for editing or arbitrary documentation, but don't care much about size/bandwidth.
• If you need fairly high quality and table support, use my own drawdown (1.3KB), but want something lightweight and don't require any functionality except conversion, or solve every an edge case.
• If you need unique features like security or scalability, use one of the other features.

All use the MIT license and most are on npm.

• markdown-it: 104KB. Providing support for StackExchange since CommonMark migration . Follows the CommonMark specification, now more or less the gold standard; supports syntax extensions; produces safe output by default. Quickly; just as powerful as Showdown, but on a much larger scale. Has tons of features (like synchronized scrolling). It is also the basis of http://dillinger.io/.

• showdown: 28KB. Has full CommonMark support and was the former gold standard; significantly smaller than Markdown-It but slower. It is the basis for page down.

• Page down: 8KB. Providing support for StackExchange prior to CommonMark migration . It's very powerful, but lacks tables, definition lists, footnotes, etc. In addition to the 8KB converter script, it also provides editor and cleaner scripts.

• Reduce: 1.3KB. Full disclosure, I wrote it. Wider functionality than any other lightweight converter; handles most but not all CommonMark specifications. Not recommended for user editing, but useful for presenting information in web applications. No inline HTML.

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

• micromarkdown: 5KB. A lot of functionality is supported, but some common ones are missing, like unordered lists using *, and some common ones that aren't strictly part of the specification, like isolated blocks of code. Many errors, throwing exceptions on most longer documents. I consider it experimental.

• nano-markdown: 1.9KB. Feature scope is limited to what most documentation uses; more powerful than micromarkdown, but not perfect; uses its own very basic unit tests. Pretty robust, but problematic in many edge cases.

• mmd.js: 800 bytes. The result of striving to make the smallest possible parser that is still usable. A small subset is supported; documentation needs to be tailored for it.

• markdown-js: 54KB (cannot download minified version; minified version may be available) to ~20KB). Looks comprehensive and includes testing, but I'm not very familiar with it.

• meltdown: 41KB (cannot be downloaded when minified; may be reduced to approximately 15KB). jQuery plugin; Markdown Extra (tables, definition lists, footnotes).

• unified.js: Varies, 5-100KB. A plugin-based system for converting between html, markdown, and prose. Depending on which plugins you need (spell check, syntax highlighting, input cleaning), the file size will vary. Probably use server side more than client side.

Answer 2

For Markdown -> HTML, there is Showdown

StackOverflow itself uses the Markdown language for Q&A; have you tried it to see how it works?

Well, it seems to be using PageDown, which is available under the MIT license p>

Question Are there any good Markdown Javascript libraries or controls? and its answers may also be helpful :-)

Of course, full editors aren't exactly what you're asking for; but they must use some function to convert the Markdown code to HTML; and, depending on the license of those editors, you might be able to reuse that functionality...

In fact, if you look closely at Showdown, in its code source (file showdown.js) , you will find this part of the comment:

//
// Showdown usage:
//
//   var text = "Markdown *rocks*.";
//
//   var converter = new Showdown.converter();
//   var html = converter.makeHtml(text);
//
//   alert(html);
//
// Note: move the sample code to the bottom of this
// file before uncommenting it.
//

It's not jQuery syntax, but should be easy to integrate into your application ;-)

Regarding textiles, it seems hard to find anything useful :-(

HTML -> Markdown, on the other hand, I guess things might be a little more difficult...

What I would do is store both Markdown and HTML in my app's data store (database?) and use one for editing and the other for rendering... would take up more space, but seems better than " Decrypt "Less risk" HTML...