it-swarm.com.de

Javascript zum Konvertieren von Markdown/Textile in HTML (und idealerweise zurück zu Markdown/Textile)

Es gibt mehrere gute Javascript Editoren für Markdown/Textile (zB: http://attacklab.net/showdown/ , die ich gerade verwende), aber alles was ich brauche ist ein Javascript-Funktion, die einen String aus Markdown/Textile -> HTML und zurück konvertiert.

Was ist der beste Weg dies zu tun? (Im Idealfall wäre es jQuery-freundlich - z. B. $("#editor").markdown_to_html())

Edit: Eine andere Möglichkeit, um es auszudrücken, ist, dass ich nach einer Javascript-Implementierung von Rails textilize() und markdown() Texthelfern suche

79
Tom Lehman

Für Markdown -> HTML gibt es Showdown

StackOverflow selbst verwendet Markdown-Sprache für Fragen und Antworten. hast du versucht zu sehen, wie es funktioniert?

Nun, es scheint, dass es PageDown verwendet, das unter der MIT Lizenz verfügbar ist

Die Frage Gibt es eine gute Markdown-Javascript-Bibliothek oder -Steuerung? und ihre Antworten könnten auch helfen :-)


Ein vollständiger Editor ist natürlich nicht genau das, wonach Sie gefragt haben; Sie müssen jedoch eine Funktion verwenden, um den Markdown-Code in HTML umzuwandeln. und abhängig von der Lizenz dieser Editoren können Sie diese Funktion möglicherweise erneut verwenden ...

Wenn Sie sich Showdown genauer ansehen, finden Sie in der Quelltextdatei (Datei showdown.js) diesen Teil des Kommentars:

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

Es ist keine jQuery-Syntax, aber es sollte ziemlich einfach in Ihre Anwendung integriert werden ;-)


Bei Textile scheint es etwas schwieriger zu sein, etwas Nützliches zu finden :-(


Auf der anderen Seite, HTML -> Markdown, könnte es etwas schwieriger werden ...

Was ich tun würde, ist, sowohl Markdown als auch HTML in meinem Anwendungsdatenspeicher (Datenbank?) Zu speichern und eines für die Bearbeitung und das andere für das Rendern zu verwenden. ..

95
Pascal MARTIN

Textil

Sie finden eine scheinbar sehr feine Javascript-Implementierung von Textile hier und eine andere dort (vielleicht nicht so gut, hat aber eine Nizza-Konvertierungsseite).

Hinweis: Es gibt einen Fehler in der ersten Implementierung, zu der ich einen Link erstellt habe: horizontale Balken werden nicht korrekt dargestellt. Um dies zu beheben, können Sie der Datei den folgenden Code hinzufügen.

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

Ich verwende das winzige minimalistische Skript - mmd.js , das nur eine Teilmenge der Markdown-Möglichkeiten unterstützt, aber dies könnte alles sein, was man sowieso brauchen würde. Dieses Skript, das weniger als 1 KB groß ist, ist erstaunlich und wird kein Overkill sein.

Unterstützte Funktionen

  • Header # 
  • Blockquotes >
  • Bestellte Listen 1
  • Ungeordnete Listen *
  • Absätze
  • Links []()
  • Bilder ![]()
  • Inline-Hervorhebung *
  • Inline-Hervorhebung **

Nicht unterstützte Funktionen

  • Referenzen und IDs
  • Flucht von Markdown-Zeichen
  • Verschachtelung
8
vsync

Ich dachte, es würde sich lohnen, hier eine Liste der JavaScript-Lösungen und ihrer verminderten (nicht komprimierten) Größe und Stärken/Schwächen aufzulisten. Die komprimierte Größe für den minimierten Code beträgt etwa 50% der unkomprimierten Größe. Es kommt darauf an, dass ich pagedown (8KB) ​​empfehle, wenn Sie umfassende Unterstützung benötigen, da Benutzer Dokumente auf Ihrer Website bearbeiten und ich empfehle mein eigenes drawdown (1.3KB) Präsentieren von Informationen in einer Webanwendung, die nicht vom Benutzer bearbeitet werden kann; tut für die große Mehrheit der Fälle das Richtige und ist dabei extrem klein. Ich glaube, dass praktisch alle diese MIT Lizenz sind.

npm bietet zu diesem Zweck eine Vielzahl von Skripten in unterschiedlichen Qualitätsstufen an.

  • showdown : 28KB. Grundsätzlich der Goldstandard; es ist die Basis für Pagedown.

  • pagedown : 8 KB. Dies ist, was StackExchange unterstützt, sodass Sie selbst sehen können, welche Funktionen es unterstützt. Es ist ziemlich umfassend und extrem robust. Neben dem 8-KB-Konverter-Skript werden auch Editor- und Sanitizer-Skripts angeboten, die StackExchange ebenfalls verwendet.

  • markdown-it : 104KB. Folgt der CommonMark-Spezifikation. unterstützt Syntaxerweiterungen. Schnell; Ist zwar so robust wie Showdown, aber sehr groß. Ist die Basis für http://dillinger.io/ .

  • markiert : 19KB. Umfassend; getestet gegen Unit-Test-Suite; unterstützt benutzerdefinierte Lexer-Regeln.

  • micromarkdown : 5 KB. Unterstützt eine Vielzahl von Funktionen, es fehlen jedoch einige gebräuchliche wie ungeordnete Listen, die * verwenden, und einige, die nicht unbedingt Teil der Spezifikation sind, wie z. B. abgeschirmte Codeblöcke. Viele Fehler, wirft Ausnahmen bei den meisten längeren Dokumenten. Ich halte es für experimentell.

  • Nano-Markdown : 1,9 KB. Funktionsumfang beschränkt auf die von den meisten Dokumenten verwendeten Funktionen; robuster als Micromarkdown, aber nicht perfekt; verwendet einen eigenen sehr einfachen Unit-Test. Einigermaßen robust, bricht aber bei vielen Edge-Fällen.

  • Drawdown : 1,3 KB. Vollständige Offenlegung, ich habe es geschrieben. Breiterer Funktionsumfang und robuster als Nano-Markdown, jedoch kleiner; verarbeitet die meisten, aber nicht alle CommonMark-Spezifikationen. Behandelt einige Edge-Fälle falsch; Nicht für vom Benutzer bearbeitete Dokumente empfohlen, aber sehr nützlich für die Darstellung von Informationen in Web-Apps. Kein Inline-HTML.

  • mmd.js : 800 Bytes. Das Ergebnis einer Anstrengung, einen möglichst kleinen, noch funktionsfähigen Parser zu erstellen. Unterstützt eine kleine Untermenge; Dokument muss darauf abgestimmt sein.

  • markdown-js : 54KB (nicht zum Download verfügbar, minified; würde wahrscheinlich auf ~ 20KB minimieren). Sieht recht umfangreich aus und beinhaltet Tests, aber ich bin nicht sehr vertraut damit.

  • meltdown : 41KB (nicht zum Download verfügbar, minimiert; würde wahrscheinlich auf ~ 15KB herabsetzen). jQuery-Plugin; Markdown Extra (Tabellen, Definitionslisten, Fußnoten).

7
Adam Leggett

Verwenden Sie Showdown mit oder ohne jQuery . Hier ist ein jQuery-Beispiel:

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

Der Showdown-Attacklab-Link ist nicht verfügbar. Verwenden Sie also https://github.com/coreyti/showdown für Ihre Konvertierungsanforderungen :)

4
Bijan

Dies behandelt nicht die gesamte Anfrage (es ist kein Editor), aber textile-js ist eine JavaScript-Rendering-Bibliothek: https://github.com/borgar/textile-js . Eine Demonstration ist verfügbar unter http://borgar.github.io/textile-js/

3
Nathan

markdown-js ist ein JavaScript-Markdown-Parser von Nice, ein aktives Projekt mit Tests.

1
foz

Ich fand diese Frage faszinierend, also entschied ich mich, etwas zu starten (ersetzt nur strong und italic markdown-Tags). Nachdem ich eine Stunde lang versucht hatte, eine Lösung mit Regex zu finden, gab ich auf und endete mit dem Folgenden, was scheinbar gut funktioniert. Das heißt, es kann sicherlich weiter optimiert werden, und ich bin mir nicht sicher, wie realitätsbeständig es in dieser Form sein wird:

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

Testcode:

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

Ausgabe:

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: Neu in V 0.024 - Automatisches Entfernen nicht geschlossener Markdown-Tags

1
karim79

Für Textilien:

Ich habe kürzlich einen HTML-Text-Konverter zusammen gepatcht: https://github.com/cmroanirgo/to-textile

Für das Reverse Textile to HTML benutze und empfehle ich https://github.com/borgar/textile-js , die andere Antworten bereits erwähnt haben.

0
cmroanirgo

Haben Sie sich die Eclipse WikiText-Bibliothek angesehen, die zu Mylyn gehört. Es wird von vielen Wiki-Syntax in xhtml und xdocs/DITA konvertiert. Es sieht ziemlich cool aus.

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

Hat jemand eine Lösung für das HTML-> Textilproblem gefunden? Alle unsere aktuellen Dokumentationen liegen im M $ Word-Format vor, und wir würden es sehr gerne in das Redmine-Wiki aufnehmen, um sie gemeinsam zu warten. Wir haben kein Tool gefunden, das die Konvertierung durchführt. Wir haben die Open Office-Erweiterung gefunden, die Text im Mediawiki-Format erzeugt, aber Redmine Wiki verwendet eine Teilmenge von Textilien.

Kennt jemand ein Werkzeug, das IN -Textil aus Mediawiki, Word, XDocs oder HTML konvertiert?

0