web-dev-qa-db-fra.com

Javascript pour convertir Markdown/Textile en HTML (et, idéalement, revenir à Markdown/Textile)

Il existe plusieurs bons Javascript editors pour Markdown/Textile (par exemple: http://attacklab.net/showdown/ , celui que j'utilise actuellement), mais tout ce dont j'ai besoin est une fonction Javascript qui convertit une chaîne de Markdown/Textile -> HTML et retour.

Quelle est la meilleure façon de faire cela? (Dans l’idéal, jQuery-friendly - par exemple, $("#editor").markdown_to_html())

Edit: Une autre façon de le dire est que je recherche une implémentation Javascript des helpers de texte textilize() et markdown() de Rails.

javascriptjquerymarkdowntextile
79
Tom Lehman

Pour Markdown -> HTML, il y a Showdown

StackOverflow lui-même utilise le langage Markdown pour les questions et les réponses; Avez-vous essayé de voir comment cela fonctionne?

Eh bien, il semble qu’il utilise PageDown qui est disponible sous la licence MIT

La question Existe-t-il une bonne bibliothèque ou contrôle Javascript Markdown? et ses réponses pourraient aussi aider :-)


Un éditeur complet n’est, bien sûr, pas exactement ce que vous avez demandé; mais ils doivent utiliser une sorte de fonction pour transformer le code Markdown en HTML; et, selon la licence de ces éditeurs, vous pourrez peut-être réutiliser cette fonction ...

En fait, si vous regardez de près Showdown, dans sa source de code (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 la syntaxe jQuery, mais cela devrait être assez facile à intégrer dans votre application ;-)


À propos du 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 difficiles ...

Ce que je ferais serait de stocker Markdown et HTML dans mon magasin de données d'application (base de données?), Et utiliser l'un pour l'édition et l'autre pour le rendu ... prendrait plus de place, mais cela semble moins risqué que le "décryptage" HTML. ..

95
Pascal MARTIN

Textile

Vous pouvez trouver une implémentation Javascript très fine de Textile ici , et une autre là ((peut-être pas si bien, mais a une belle page d’exemple convert-as-you-type).

Note: il y a un bogue dans la première implémentation à laquelle j'ai fait un lien: les barres horizontales ne sont pas restituées 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;}
    //...
12
glmxndr

J'utilise le petit script minimaliste - mmd.js , qui ne prend en charge qu'un sous-ensemble de possibilités de Markdown, mais c'est peut-être tout ce dont on aurait besoin de toute façon, donc ce script de moins de 1 ko est incroyable et ne sera pas une overkill.

Fonctions prises en charge

  • En-têtes # 
  • Devis >
  • Listes ordonnées 1
  • Listes non ordonnées *
  • Les paragraphes
  • Liens []()
  • Images ![]()
  • Soulignement en ligne *
  • Soulignement en ligne **

Fonctionnalités non supportées

  • Références et identifiants
  • Échapper à des personnages de Markdown
  • Nidification
8
vsync

J'ai pensé qu'il serait utile de dresser ici une liste des solutions JavaScript, de leur taille réduite (non compressée), de leurs forces/faiblesses. La taille compressée pour le code minifié sera d'environ 50% de la taille non compressée. En résumé, je recommande pagedown (8 Ko) si vous avez besoin d’une assistance complète, car les utilisateurs modifieront des documents sur votre site. Je recommande donc mon propre drawdown (1,3 Ko) si vous êtes présentation d'informations dans une application Web non modifiée par l'utilisateur; fait la bonne chose pour la grande majorité des cas tout en étant extrêmement petit. Je pense que la quasi-totalité d’entre elles sont des licences MIT.

npm propose également une grande variété de scripts à cette fin, dans différents états de qualité.

  • épreuve de force : 28 Ko. Fondamentalement, l'étalon-or; c'est la base pour pagedown.

  • pagedown : 8KB. C'est ce qui fait fonctionner StackExchange, vous pouvez ainsi voir par vous-même quelles fonctionnalités sont prises en charge. C'est assez complet et extrêmement robuste. En plus du script de conversion de 8 Ko, il propose également des scripts d’éditeur et d’assainisseur, que StackExchange utilise également.

  • markdown-it : 104KB. Suit les spécifications CommonMark; prend en charge les extensions de syntaxe. Vite; peut être aussi robuste que l’épreuve de force, mais très volumineux. Est la base de http://dillinger.io/ .

  • marqué : 19KB. Complet; testé contre la suite de tests unitaires; prend en charge les règles de lexer personnalisées.

  • micromarkdown : 5KB. Prend en charge un grand nombre de fonctionnalités, mais il en manque certaines communes telles que les listes non ordonnées utilisant * et d'autres qui ne font pas strictement partie de la spécification, comme les blocs de code clôturés. Beaucoup de bugs lèvent des exceptions sur la plupart des documents plus longs. Je considère que c'est expérimental.

  • nano-markdown : 1,9 Ko. Portée des fonctionnalités limitée aux éléments utilisés par la plupart des documents; plus robuste que le micromarkdown mais pas parfait; utilise son propre test unitaire très basique. Raisonnablement robuste mais casse sur de nombreux cas Edge.

  • drawdown : 1,3Ko. Divulgation complète, je l'ai écrit. Portée des fonctionnalités plus large et plus robuste que le nano-markdown tout en étant plus petite; gère la plupart des spécifications CommonMark, mais pas toutes. Traite quelques cas Edge de manière incorrecte; non recommandé pour les documents modifiés par l'utilisateur, mais très utile pour la présentation d'informations dans des applications Web. Pas de HTML en ligne.

  • mmd.js : 800 octets. Le résultat d'un effort pour faire le plus petit analyseur possible qui soit toujours fonctionnel. Prend en charge un petit sous-ensemble; document doit être adapté pour cela.

  • markdown-js : 54 Ko (non disponible pour le téléchargement; il serait probablement réduit à ~ 20 Ko). Cela semble assez complet et comprend des tests, mais je ne le connais pas très bien.

  • meltdown : 41 Ko (non disponible pour le téléchargement; il faudrait probablement environ 15 Ko). plugin jQuery; Markdown Extra (tableaux, listes de définitions, notes de bas de page).

7
Adam Leggett

Il est facile de utiliser Showdown avec ou sans jQuery . Voici un exemple jQuery:

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

Showdown Attacklab-Link est en panne alors utilisez https://github.com/coreyti/showdown pour vos besoins de conversion :)

4
Bijan

Cela ne concerne pas la totalité de la demande (ce n'est pas un éditeur), mais textile-js est une bibliothèque de rendu javascript: https://github.com/borgar/textile-js . Une démonstration est disponible sur http://borgar.github.io/textile-js/

3
Nathan

markdown-js est un analyseur syntaxique javascript de Nice, un projet actif avec des tests.

1
foz

J'ai trouvé cette question intrigante et j'ai donc décidé de commencer quelque chose (remplace uniquement les balises strong et italic). Après avoir passé une heure à essayer de concevoir une solution utilisant des regex, j’ai abandonné et j’ai fini avec ce qui suit, qui semble bien fonctionner. Cela dit, il peut sûrement être optimisé davantage et je ne suis pas sûr de la résilience réelle du monde réel sous cette forme:

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

Code de test:

    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));

Sortie:

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: Nouveau dans V 0.024 - Enlèvement automatique des balises de démarquage non fermées

1
karim79

Pour le textile:

J'ai récemment corrigé un convertisseur HTML vers textile: https://github.com/cmroanirgo/totextile

Pour l'inverse Textile to HTML, j'utilise et recommande https://github.com/borgar/textile-js , que d'autres réponses ont déjà mentionné.

0
cmroanirgo

Avez-vous consulté la bibliothèque Eclipse WikiText qui fait partie de Mylyn. Il convertira de nombreuses syntaxes wiki en xhtml et en xdocs/DITA. Ça a l'air cool.

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

Quelqu'un at-il trouvé une solution au problème HTML-> textile? Toute notre documentation actuelle est au format M $ Word et nous aimerions la publier dans Redmine Wiki pour une maintenance en collaboration. Nous n'avons trouvé aucun outil permettant d'effectuer la conversion. Nous avons trouvé l'extension Open Office qui produit du texte au format mediawiki, mais Redmine Wiki utilise un sous-ensemble de textiles.

Quelqu'un connaît-il un outil qui convertit EN textile à partir de mediawiki, Word, XDocs ou HTML?

0
Stephen Gissendaner