Javascript to convert Markdown/Textile to HTML (an

问题:

There are several good Javascript editors for Markdown / Textile (e.g.: http://attacklab.net/showdown/, the one I'm using right now), but all I need is a Javascript function that converts a string from Markdown / Textile -> HTML and back.

What's the best way to do this? (Ideally it would be jQuery-friendly -- e.g., $("#editor").markdown_to_html())

Edit: Another way to put it is that I'm looking for a Javascript implementation of Rails' textilize() and markdown() text helpers

回答1:

For Markdown -> HTML, there is Showdown

StackOverflow itself uses Markdown language for questions and answers ; did you try to take a look at how it works ?

Well, it seems it is using PageDown which is available under the MIT License

The question Is there any good Markdown Javascript library or control? and its answers might help, too :-)

A full editor is, of course, not exactly what you asked for ; but they must use some kind of function to transform the Markdown code to HTML ; and, depending on the license of these editors, you might be able to re-use that function...

Actually, if you take a close look at Showdown, in its code source (file showdown.js), you'll find this portion of 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 quite easy to integrate in your application ;-)

About Textile, it seems to be a bit harder to find anything useful :-(

In the other side, HTML -> Markdown, I guess things might be a bit harder...

What I would do is store both Markdown and HTML in my application data store (database ? ), and use one for editing, and the other for rendering... Would take more space, but it seems less risky than "decrypting" HTML...

回答2:

Textile

You can find a seemingly very fine Javascript implementation of Textile here, and another one there (maybe not so good, but has a nice convert-as-you-type example page).

Note: there is a bug in the first implementation I made a link to : horizontal bars are not rendered correctly. To fix it, you can add the following code in the file.

for(i=0;i<lines.length;i++) {
    // Add code :Start
    if (lines[i].match(/\s*-{4,}\s*/)){
      html+="<hr/>\n";
      continue;
    }
    // Add code :End
    if (lines[i].indexOf("[") == 0) {continue;}
    //...

回答3:

I am using the tiny minimalistic script - mmd.js, which only supports a subset of Markdown possibilities, but this might be all that one would need anyway, so this script which is less than 1kb is amazing and won't be an overkill.

Supported features

• Headers #
• Blockquotes >
• Ordered lists 1
• Unordered lists *
• Paragraphs
• Links []()
• Images ![]()
• Inline emphasis *
• Inline emphasis **

Unsupported features

• References and IDs
• Escaping of Markdown characters
• Nesting

回答4:

I thought it would be worthwhile to make a list here of the JavaScript solutions out there and their minified (uncompressed) size and strengths/weaknesses. Compressed size for minified code will be around 50% of uncompressed size. What it comes down to is that I recommend pagedown (8KB) if you need comprehensive support because users will be editing documents on your site, and I recommend my own drawdown (1.3KB) if you're presenting information in a web app that is not user edited; does the right thing for vast majority of cases while being extremely small. I believe virtually all of these are MIT license.

npm also has a wide variety of scripts for this purpose, in varying states of quality.

• 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).

回答5:

It’s easy to use Showdown with or without jQuery. Here’s a jQuery example:

// See http://mathiasbynens.be/notes/showdown-javascript-jquery for a plain JavaScript version as well
$(function() {
 // When using more than one `textarea` on your page, change the following line to match the one you’re after
 var $textarea = $('textarea'),
     $preview = $('<div id="preview" />').insertAfter($textarea),
     converter = new Showdown.converter();
 $textarea.keyup(function() {
  $preview.html(converter.makeHtml($textarea.val()));
 }).trigger('keyup');
});

回答6:

The Showdown Attacklab-Link is down so use https://github.com/coreyti/showdown for your conversion needs :)

回答7:

This doesn't address the entire request (it isn't an editor), but textile-js is a javascript rendering library: https://github.com/borgar/textile-js. A demonstration is available at http://borgar.github.io/textile-js/

回答8:

I found this question intriguing, so I decided to start something off (only replaces strong and italic markdown tags). Having spent an hour trying to devise a solution using regexes, I gave up and ended up with the following, which seems to work nicely. That said, it can surely be further optimized and I'm not sure as to just how real-world resilient it will be in this form:

function mdToHtml(str) {
    var tempStr = str;
    while(tempStr.indexOf("**") !== -1) {
        var firstPos = tempStr.indexOf("**");
        var nextPos = tempStr.indexOf("**",firstPos + 2);
        if(nextPos !== -1) {
            var innerTxt = tempStr.substring(firstPos + 2,nextPos);
            var strongified = '<strong>' + innerTxt + '</strong>';
            tempStr = tempStr.substring(0,firstPos) + strongified + tempStr.substring(nextPos + 2,tempStr.length);
        //get rid of unclosed '**'
        } else {
            tempStr = tempStr.replace('**','');
        }
    }
     while(tempStr.indexOf("*") !== -1) {
        var firstPos = tempStr.indexOf("*");
        var nextPos = tempStr.indexOf("*",firstPos + 1);
        if(nextPos !== -1) {
            var innerTxt = tempStr.substring(firstPos + 1,nextPos);
            var italicized = '<i>' + innerTxt + '</i>';
            tempStr = tempStr.substring(0,firstPos) + italicized + tempStr.substring(nextPos + 2,tempStr.length);
        //get rid of unclosed '*'
        } else {
            tempStr = tempStr.replace('*','');
        }
    }
    return tempStr;
}

Test code:

    var s = "This would be *italicized* text and this would be **bold** text, This would be *italicized* text and this would be **bold** text, This would be *italicized* text and this would be **bold** text";
    alert(mdToHtml(s));

Output:

This would be <i>italicized</i>text and this would be <strong>bold</strong> text, This would be <i>italicized</i>text and this would be <strong>bold</strong> text, This would be <i>italicized</i>text and this would be <strong>bold</strong> text

EDIT: New in V 0.024 - Automatic removal of unclosed markdown tags

回答9:

markdown-js is a nice javascript markdown parser, an active project with tests.

回答10:

Have you looked at the Eclipse WikiText library that is part of Mylyn. It will convert from many wiki syntax to xhtml and to xdocs/DITA. It looks way cool.

http://help.eclipse.org/galileo/topic/org.eclipse.mylyn.wikitext.help.ui/help/Markup-Conversion.html

Has anyone found a solution to the HTML->textile problem? All of our current documentation is in M$ Word format and we would love to bring it into Redmine Wiki for collaborative maintenance. We have not found any tool that will make the conversion. We have found the Open Office extension that produces mediawiki formatted text but Redmine Wiki uses a subset of textile.

Anyone know of a tool that converts TO textile from mediawiki, Word, XDocs, or HTML?

回答11:

For Textile:

I've recently patched together an HTML to Textile converter: https://github.com/cmroanirgo/to-textile

For the reverse Textile to HTML, I use and recommend https://github.com/borgar/textile-js, which other answers have already mentioned.