Search code examples
javascriptjquerymarkdowntextile

Javascript to convert Markdown/Textile to HTML (and, ideally, back to Markdown/Textile)


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


Solution

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