Javascript pour convertir le format Markdown/Textile au format HTML (et, idéalement, de retour à l'Markdown/Textile)

Question

Il y a plusieurs bonnes Javascript éditeurs pour Markdown / Textile (par ex.: http://attacklab.net/showdown/, celui que j'utilise en ce moment), mais tout ce que je besoin est une fonction Javascript qui convertit une chaîne de Markdown / Textile -> HTML et le dos.

Quelle est la meilleure façon de le faire? (Idéalement, il serait jQuery-convivial-par exemple, $("#editor").markdown_to_html())

Edit: une Autre façon de le dire, c'est que je suis à la recherche d'un Javascript de mise en œuvre de Rails' textilize() et markdown() texte aides

Answer 1

Pour Markdown -> HTML, il n'y a Showdown (ce lien pointe vers une page de démonstration, qui, lui-même, des liens vers certains .zip, vous pouvez le télécharger)

StackOverflow lui-même utilise Markdown langue pour les questions et les réponses, avez-vous essayer de prendre un coup d'oeil à la façon dont il fonctionne ?

Eh bien, il semble que c'est à l'aide de PageDown qui est disponible sous la Licence MIT

La question Est-il un bon Démarque de la bibliothèque Javascript ou de contrôle? et ses réponses peuvent aider, aussi :-)

Un complet éditeur est, bien sûr, pas exactement ce que vous avez demandé ; mais il doit utiliser une sorte de fonction de transformer le code Markdown HTML ; et, selon la licence de ces éditeurs, vous pourriez être en mesure de ré-utiliser cette fonction...

En fait, si vous regardez de plus près à l'épreuve de force, dans son code source (fichier showdown.js), vous trouverez cette partie de commentaire :

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

Ce n'est pas jQuery syntaxe, mais il devrait être assez facile à intégrer dans votre application ;-)

Sur Textile, il semble être un peu plus difficile de trouver quelque chose d'utile :-(

De l'autre côté, HTML -> Markdown, je suppose que les choses pourraient être un peu plus difficile...

Ce que je voudrais faire est de stocker à la fois les Démarques et HTML dans mon application magasin de données (base de données ? ), et d'utiliser l'un pour l'édition, et l'autre pour le rendu... faudrait plus d'espace, mais il semble moins risqué que de "décoder" HTML...

Answer 2

Textile

Vous pouvez trouver un semblant de très beaux Javascript mise en œuvre de Textile iciet un autre là (peut-être pas si bonne, mais qui a une belle convertir-que-vous-type exemple de page).

Remarque: il y a un bug dans la mise en œuvre d'abord j'ai fait un lien vers : les barres horizontales ne sont pas rendus correctement. Pour résoudre ce problème, vous pouvez ajouter le code suivant dans le fichier.

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;}
    //...

Answer 3

Je suis à l'aide de la petite minimaliste script mmd.jsqui prend en charge uniquement un sous-ensemble de Markdown possibilités, mais cela pourrait être tout ce que l'on aurait besoin de toute façon, donc ce script qui est à moins de 1 ko est incroyable et ne sera pas inutile.

Fonctionnalités prises en charge

• Les en-têtes #
• Les citations >
• Listes ordonnées 1
• Les listes à puces *
• Les paragraphes
• Liens
• Images
• Inline accent *
• Inline accent **

Fonctionnalités non prises en charge

• Les références et les Id
• S'échapper de Markdown caractères
• Nidification

Answer 4

Il est facile à utiliser épreuve de force avec ou sans jQuery. Voici un jQuery exemple:

// 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');
});

Answer 5

L'épreuve de force Attacklab-Lien est en bas afin de l'utiliser https://github.com/coreyti/showdown pour vos besoins de conversion :)