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


Es gibt einige gute Javascript Redakteure für Markdown / Textil (z.B .: http://attacklab.net/showdown/, die, die ich gerade benutze), aber alles, was ich brauche, ist eine Javascript - Funktion, die eine Zeichenfolge aus Markdown / Textile -> HTML und zurück konvertiert.

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

Bearbeiten: Eine andere Möglichkeit ist, dass ich eine Javascript-Implementierung von Rails suche. textilize() und markdown() Texthelfer


76
2017-08-23 21:46


Ursprung


Antworten:


Für Markdown -> HTML gibt es Showdown

StackOverflow selbst verwendet Markdown-Sprache für Fragen und Antworten; Hast du versucht, einen Blick darauf zu werfen, wie es funktioniert?

Nun, es scheint zu benutzen PageDown welches unter der MIT-Lizenz verfügbar ist

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


Ein vollständiger Redakteur ist natürlich nicht genau das, wonach du gefragt hast; aber sie müssen irgendeine Art von Funktion verwenden, um den Markdown-Code in HTML umzuwandeln; Abhängig von der Lizenz dieser Editoren können Sie diese Funktion möglicherweise erneut verwenden ...

Eigentlich, wenn Sie sich Showdown in seiner Quelltextquelle anschauen (Datei showdown.js), Sie werden diesen Teil des Kommentars finden:

//
// 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, sollte aber relativ einfach in Ihre Anwendung integriert werden ;-)


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


Auf der anderen Seite, HTML -> Markdown, denke ich, die Dinge könnten ein bisschen schwieriger sein ...

Was ich tun würde, ist sowohl Markdown und HTML in meinem Anwendungsdatenspeicher (Datenbank?) Zu speichern, und eines zum Bearbeiten, und das andere zum Rendern ... Wäre mehr Platz, aber es scheint weniger riskant als "Entschlüsseln" HTML. ..


95
2017-08-23 22:16



Textil

Sie können eine scheinbar sehr gute Javascript-Implementierung von Textile finden Hier, und noch einer Dort (vielleicht nicht so gut, aber hat eine nette Convert-as-you-type Beispielseite).

Hinweis: Es gibt einen Fehler in der ersten Implementierung, zu der ich eine Verbindung hergestellt habe: horizontale Balken werden nicht korrekt gerendert. Um es zu beheben, können Sie den folgenden Code in der Datei 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
2018-01-18 18:45



Ich benutze die winzige minimalistische Schrift - mmd.js, die nur eine Teilmenge von Markdown-Möglichkeiten unterstützt, aber das könnte alles sein, was man sowieso braucht, also ist dieses Skript, das weniger als 1kb groß ist, erstaunlich und wird kein Overkill sein.

Unterstützte Funktionen

  • Kopfzeilen # 
  • Block Zitate >
  • Geordnete Listen 1
  • Ungeordnete Listen *
  • Absätze
  • Links []()
  • Bilder ![]()
  • Inline-Betonung *
  • Inline-Betonung **

Nicht unterstützte Funktionen

  • Referenzen und IDs
  • Entkommen von Markdown-Zeichen
  • Verschachteln

6
2018-06-05 14:13



Ich dachte mir, dass es sich lohnen würde, hier eine Liste der JavaScript-Lösungen und ihrer minimierten (unkomprimierten) Größe und Stärken / Schwächen zu erstellen. Die komprimierte Größe für den minimierten Code beträgt etwa 50% der unkomprimierten Größe. Worauf es ankommt, ist, dass ich empfehle Seitenaufruf (8KB) ​​wenn Sie umfassende Unterstützung benötigen, weil Benutzer Dokumente auf Ihrer Website bearbeiten werden, und ich empfehle meine eigene Drawdown (1,3 KB) wenn Sie Informationen in einer Web-App präsentieren, die nicht vom Benutzer bearbeitet wird; macht in den allermeisten Fällen das Richtige und ist dabei extrem klein. Ich glaube, dass fast alle diese MIT-Lizenz sind.

Zu diesem Zweck verfügt npm auch über eine Vielzahl von Skripten in unterschiedlichen Qualitätsstufen.

  • Showdown: 28KB. Grundsätzlich der Goldstandard; Es ist die Grundlage für den Seitenaufruf.

  • Seitenaufruf: 8KB. Dies ist die Stärke von StackExchange, damit Sie selbst sehen können, welche Funktionen unterstützt werden. Es ist ziemlich umfassend und extrem robust. Neben dem 8KB-Konverter-Skript bietet es auch Editor- und Desinfizierungs-Skripts, die auch von StackExchange verwendet werden.

  • Abschrift-es: 104KB. Folgt der CommonMark-Spezifikation; unterstützt Syntax-Erweiterungen. Schnell; kann tatsächlich so robust wie Showdown sein, aber sehr groß. Ist die Grundlage für http://dillinger.io/.

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

  • Mikromarkierung: 5KB. Unterstützt viele Funktionen, aber es fehlen einige gängige wie ungeordnete Listen mit * und einige gebräuchliche, die nicht streng zur Spezifikation gehören wie umzäunte Codeblöcke. Viele Bugs, löst Ausnahmen bei den meisten längeren Dokumenten aus. Ich halte es für experimentell.

  • Nanomarkierung: 1,9KB. Feature-Umfang beschränkt sich auf Dinge, die von den meisten Dokumenten verwendet werden; robuster als Micromarkdown, aber nicht perfekt; verwendet einen eigenen, sehr grundlegenden Komponententest. Ziemlich robust, aber bricht viele Randfälle.

  • Drawdown: 1.3KB. Volle Offenlegung, ich habe es geschrieben. Breitere Funktionsumfang und robuster als Nano-Markdown, während kleiner; behandelt die meisten, aber nicht alle CommonMark-Spezifikationen. Behandelt ein paar Randfälle falsch; nicht für vom Benutzer bearbeitete Dokumente empfohlen, aber sehr nützlich zum Präsentieren von Informationen in Web-Apps. Kein Inline-HTML.

  • mmd.js: 800 Bytes. Das Ergebnis einer Bemühung, den kleinstmöglichen Parser zu machen, der noch funktioniert. Unterstützt eine kleine Teilmenge; Das Dokument muss darauf zugeschnitten sein.

  • Abschrift-js: 54KB (nicht zum Herunterladen verfügbar; würde wahrscheinlich zu ~ 20KB verkleinern). Sieht ziemlich umfassend aus und beinhaltet Tests, aber ich bin nicht sehr vertraut damit.

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


5
2017-10-16 02:40



Es ist einfach zu 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
2018-05-02 18:13



Der Showdown Attacklab-Link ist down also nutze https://github.com/coreyti/showdown für deine Umwandlungsbedürfnisse :)


4
2018-04-24 09:19



Dies betrifft 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
2018-01-31 19:34



Ich fand diese Frage faszinierend, also entschied ich, etwas anzufangen (nur ersetzt strong und italic Markdown-Tags). Nachdem ich eine Stunde damit verbracht hatte, eine Lösung mit Regexes zu entwickeln, gab ich auf und endete mit dem Folgenden, was gut zu funktionieren scheint. Das heißt, es kann sicherlich weiter optimiert werden und ich bin mir nicht sicher, wie real-resistenter 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

BEARBEITEN: Neu in V 0.024 - Automatisches Entfernen von nicht geschlossenen Markdown-Tags


1
2017-08-23 23:29



Abschrift-js ist ein netter Javascript Markdown Parser, ein aktives Projekt mit Tests.


1
2017-09-19 06:04