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

there are several good Javascript editors for Markdown / Textile (e.g.: http://attacklab.net/showdown / , celui que j'utilise en ce moment), mais tout ce dont j'ai besoin est une fonction Javascript qui convertit une chaîne de caractères à partir de Markdown / Textile -> HTML et retour.

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

Edit: une Autre façon pour le dire c'est que je suis à la recherche d'une implémentation Javascript de Rails textilize() et markdown() text helpers

76
demandé sur Tom Lehman 2009-08-24 01:46:18

11 réponses

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 jeter un oeil à la façon dont il fonctionne ?

Eh bien, il semble qu'il utilise 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 peut aider, aussi :-)



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 pourriez être en mesure de 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 du 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 devrait être assez facile à intégrer dans votre application; -)



En ce qui concerne le Textile, il semble 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 ferais est de stocker à la fois Markdown et HTML dans mon application data store (base de données ? ), et utilisez l'un pour éditer, et l'autre pour rendre... Cela prendrait plus de Place, mais cela semble moins risqué que le "décryptage" HTML...

95
répondu Pascal MARTIN 2017-05-23 12:09:39

Textile

vous pouvez trouver une implémentation Javascript apparemment très fine de Textile ici , et un autre (peut-être pas si bon, mais a une page d'exemple converter-as-you-type sympa).

Note: il y a un bug dans la première implémentation à laquelle j'ai fait un lien : les barres horizontales ne sont pas rendues 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
répondu glmxndr 2010-01-18 22:27:06

j'utilise le minuscule script minimaliste - mmd.js , qui ne supporte 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 qui est moins de 1kb est incroyable et ne sera pas une exagération.

fonctionnalités prises en charge

  • en-Têtes #
  • les citations >
  • Listes ordonnées 1
  • listes non ordonnées *
  • paragraphes
  • Liens []()
  • Images ![]()
  • Inline accent *
  • Inline accent **

fonctionnalités non prises en charge

  • Références et les Id
  • Echappement des caractères de Markdown
  • nidification
6
répondu vsync 2015-12-09 12:39:56

j'ai pensé qu'il serait intéressant de faire une liste ici des solutions JavaScript là-bas et de leur taille réduite (non compressée) et leurs forces/faiblesses. Taille compressée pour minifiés code sera d'environ 50% de la taille non compressée. Ce qu'il vient à dire est que je recommande pagedown (8KB) si vous avez besoin d'un soutien complet parce que les utilisateurs seront l'édition de documents sur votre site, et je recommande mon propre drawdown (1.3 KB) si vous êtes présenter l'information dans une application web qui n'est pas éditée par l'utilisateur; fait la bonne chose pour la grande majorité des cas tout en étant extrêmement petit. Je crois que presque tous sont sous licence MIT.

npm a également une grande variété de scripts à cette fin, dans des états de qualité variables.

  • showdown : 28KB. Fondamentalement l'étalon-or; c'est la base de la pagedown.

  • pagedown : 8KB. C'est ce qui alimente StackExchange, de sorte que vous pouvez voir par vous-même quelles fonctionnalités il supporte. Il est assez complet et extrêmement robuste. En plus du script de convertisseur de 8KB, il offre également des scripts d'éditeur et de nettoyage, les deux qui StackExchange utilise également.

  • markdown-it : 104KO. Suit les spécifications de CommonMark; supporte les extensions de syntaxe. Rapide; peut en fait être aussi robuste que l'abattage, mais très grand. Est la base de http://dillinger.io / .

  • marqué : 19kb. Complet; testé par rapport à la suite de test de l'unité; prend en charge les règles de lexer personnalisées.

  • micromarkdown : 5kb. Prend en charge un grand nombre de fonctionnalités, mais il manque certaines communes comme les listes non ordonnées en utilisant * et certains communs qui ne font pas strictement partie de la spécification comme les blocs de code clôturés. Beaucoup de bogues, jette des exceptions sur la plupart des documents plus longs. Je considère ça comme expérimental.

  • nano-markdown : 1.9 KB. Fonctionnalité portée limitée aux choses utilisées par la plupart des documents; plus robuste que micromarkdown mais pas parfait; utilise son propre test unitaire très basique. Assez robuste mais cassée sur de nombreux cas de bord.

  • rabattement : 1.3 KB. La divulgation complète, je l'ai écrit. Portée plus large et plus robuste que nano-markdown tout en étant plus petit; traite la plupart des spécifications de CommonMark, mais pas toutes. Gère quelques cas de bordures incorrectement; pas recommandé pour les documents édités par l'utilisateur, mais très utile pour la présentation de l'information dans les applications web. Pas de HTML en ligne.

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

  • markdown-js : 54KO (non disponible pour téléchargement réduit; serait probablement réduit à ~20KO). Ça a l'air assez complet et inclut des tests, mais je ne suis pas très familier avec ça.

  • meltdown : 41KO (non disponible pour télécharger minimisé; serait probablement rapetisser à ~15 KO). jQuery plugin; Markdown Extra (tables, listes de définition, notes de bas de page).

5
répondu Adam Leggett 2016-10-28 15:05:08

il est facile de utiliser Showdown avec ou sans jQuery . Voici un exemple de 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
répondu Mathias Bynens 2010-05-02 18:13:19

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

4
répondu Bijan 2011-04-24 09:19:06

cela ne répond pas à toute la requête (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 à http://borgar.github.io/textile-js /

3
répondu Nathan 2014-01-31 19:34:09

j'ai trouvé cette question intrigante, donc j'ai décidé de commencer quelque chose (remplace seulement strong et italic Markdown tags). Après avoir passé une heure à essayer de trouver une solution en utilisant regexes, j'ai abandonné et j'ai fini avec ce qui suit, qui semble bien fonctionner. Cela dit, il peut certainement être optimisé davantage et je ne suis pas sûr à quel point il sera résistant dans le 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 D'essai:

    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: Nouvelle en V 0.024 - la suppression Automatique de unclosed démarque des balises

1
répondu karim79 2009-08-24 00:19:45

markdown-js est une belle javascript démarque de l'analyseur, un projet en cours avec des tests.

1
répondu foz 2011-09-19 06:04:08

avez-vous regardé la bibliothèque wikitext Eclipse qui fait partie de Mylyn. Il passera de beaucoup de syntaxe wiki à xhtml et à xdocs/DITA. Il ressemble de manière cool.

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

Quelqu'un a-t-il trouvé une solution au problème HTML - >textile? Toute notre documentation actuelle est dans le format m$ Word et nous aimerions l'apporter dans Redmine Wiki pour la maintenance collaborative. Nous n'avons trouvé aucun outil qui fera la conversion. Nous avons trouvé L'extension Open Office qui produit du texte formaté par mediawiki mais Redmine Wiki utilise un sous-ensemble de textile.

Quelqu'un connaît un outil qui convertit en textile de mediawiki, Word, XDocs, ou HTML?

0
répondu Stephen Gissendaner 2010-12-09 17:33:20

Pour Le Textile:

j'ai récemment assemblé un convertisseur HTML à Textile: https://github.com/cmroanirgo/to-textile

pour le textile inversé À HTML, j'utilise et recommande https://github.com/borgar/textile-js , que d'autres réponses ont déjà mentionnées.

0
répondu cmroanirgo 2017-03-25 03:25:18