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

Pour Markdown -> HTML, il y a Showdown

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

Bien, il semble que l'utilisation de PageDown est disponible sous licence MIT

La question Existe-t-il une bonne bibliothèque ou un contrôle bancaire de Markdown? Et ses réponses pourraient aussi aider 🙂

Un éditeur complet n'est évidemment 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 pouvoir réutiliser cette fonction …

En fait, si vous regardez attentivement 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 une syntaxe jQuery, mais devrait être assez facile à intégrer dans votre application 😉

À propos de Textile, il semble être un peu plus difficile de trouver quelque chose d'utile 🙁

De l'autre côté, HTML -> Markdown, je pense que les choses pourraient être un peu plus difficiles …

Ce que je ferais, c'est stocker à la fois Markdown et HTML dans mon magasin de données d'application (base de données?), Et utiliser un pour l'édition, et l'autre pour le rendu … Prendrait plus d'espace, mais il semblerait moins risqué que de décrypter le HTML. ..

Textile

Vous pouvez trouver une implémentation JavaScript apparemment très fine de Textile ici , et une autre là- bas (peut-être pas si bien, mais a une belle page d'exemple de conversion-comme-vous-même).

Remarque: il y a un bug dans la première implémentation sur laquelle j'ai créé un lien: les barres horizontales ne sont pas correctement exécutées. Pour le réparer, 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;} //... 

J'utilise le minuscule script minimaliste – mmd.js , qui prend en charge uniquement un sous-ensemble de possibilités de Markdown, mais ce pourrait être tout ce dont on aurait besoin de toute façon, donc ce script inférieur à 1kb est incroyable et ne sera pas une overkill.

Fonctionnalités prises en charge

• En-têtes #
• Blockquotes >
• Listes commandées 1
• Listes non ordonnées *
• Paragraphes
• Liens []()
• Images ![]()
• Inline emphasis *
• En-tête en ligne **

Fonctionnalités non supportées

• Références et identifiants
• Évasion des personnages de Markdown
• Nesting

Il est facile d' 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'); }); 

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

Cela ne répond pas à la demande entière (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/

J'ai trouvé cette question intriguante, alors j'ai décidé de commencer quelque chose (ne remplace que les balises de marquage strong et italic ). Après avoir passé une heure à essayer de trouver une solution à l'aide de regexes, j'ai abandonné et j'ai fini avec ce qui suit, ce qui semble fonctionner bien. Cela dit, il peut sûrement être encore optimisé et je ne suis pas sûr de savoir comment le monde réel résiliente sera 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: Nouveau dans V 0.024 – Suppression automatique des balises de marque non fermées

Markdown-js est un bon analyseur de javascript, un projet actif avec des tests.

Je pensais qu'il valait la peine de faire une liste ici des solutions JavaScript là-bas et leur taille (non compressée) minifiée et leurs points forts / points faibles. La taille compressée pour le code minifié sera d'environ 50% de la taille non compressée. À quoi cela aboutit-il, je recommande pagedown ( 8KB ) si vous avez besoin d'un support complet car les utilisateurs éditeront des documents sur votre site et je recommanderai mon propre retrait (1.3KB) si vous présentez des informations dans une application Web qui est Pas édité par l'utilisateur; Fait le bon choix pour la grande majorité des cas tout en étant extrêmement petit. Je crois que pratiquement toutes ces licences sont MIT.

Npm a également une grande variété de scripts à cet effet, dans différents états de qualité.

• Confrontation : 28KB. Fondamentalement, l'étalon-or; C'est la base de pagedown.

• Pagedown : 8KB . C'est ce que pilotes StackExchange, afin que vous puissiez voir par vous-même les fonctionnalités qu'il prend en charge. C'est assez complet et extrêmement robuste. En plus du script de convertisseur 8KB, il propose également des scripts d'éditeur et de désinfectant, dont StackExchange utilise également.

• Markdown-it : 104KB. Suit la spécification CommonMark; Prend en charge les extensions de syntaxe. Vite; Peut être aussi robuste que la confrontation, mais très grande. Est-ce la base de http://dillinger.io/ .

• Marqué : 19KB. Complet; Testé contre une unité de tests unitaires; Prend en charge les règles de lexer personnalisées.

• Micromarkdown : 5KB. Prise en charge de nombreuses fonctionnalités, mais manque de certaines communes comme les listes non ordonnées utilisant * et certaines communes qui ne font pas strictement partie de la spécification comme des blocs de code clôturés. Beaucoup de bugs, jette des exceptions sur la plupart des documents plus longs. Je le considère comme expérimental.

• Nano-markdown : 1,9 Ko. Portée limitée aux éléments utilisés par la plupart des documents; Plus robuste que micromarkdown mais pas parfait; Utilise son propre test d'unité très basique. Racilement robuste mais se casse sur de nombreux cas de bord.

• Retrait: 1,3 Ko. La divulgation complète, je l'ai écrit. Domaine de fonctionnalité plus large et plus robuste que nano-markdown tandis que plus petit; Gère la plupart des spécifications CommonMark, mais pas toutes. Manipule certains cas de bord incorrectement; Non recommandé pour les documents édités par l'utilisateur, mais très utile pour la présentation d'informations dans les 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 est encore fonctionnel. Supporte un petit sous-ensemble; Le document doit être adapté pour cela.

• Markdown-js : 54KB (pas disponible pour le téléchargement minifié, serait probablement minable à ~ 20KB). Il semble très complet et comprend des tests, mais je ne le connais pas très bien.

• Fusion: 41KB (pas disponible pour le téléchargement minifié, probablement minifiant à ~ 15KB). JQuery plugin; Markdown Extra (tableaux, listes de définition, notes de bas de page).

Avez-vous regardé la bibliothèque Eclipse WikiText qui fait partie de Mylyn. Il convertira de nombreuses syntaxe wiki à xhtml et à xdocs / DITA. Il 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 en format M $ Word et nous aimerions l'intégrer à Redmine Wiki pour la maintenance collaborative. Nous n'avons trouvé aucun outil pour effectuer la conversion. Nous avons trouvé l'extension Open Office qui produit du texte formaté Mediawiki, mais Redmine Wiki utilise un sous-ensemble de textile.

Quelqu'un connait-il un outil qui convertit TO textile de mediawiki, Word, XDocs ou HTML?

Pour le textile:

J'ai récemment complété un convertisseur HTML to Textile: https://github.com/cmroanirgo/to-textile

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