Javascript zur Konvertierung von Markdown / Textile in HTML (und im Idealfall zurück zu Markdown / Textile)

84

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

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

Bearbeiten: Eine andere Möglichkeit ist, dass ich nach einer Javascript-Implementierung von Rails- textilize()und markdown()Text-Helfern suche

javascript  jquery  markdown  textile 
— Tom Lehman
quelle

Antworten:

98

Für Markdown -> HTML gibt es Showdown

StackOverflow selbst verwendet die Markdown-Sprache für Fragen und Antworten. Haben Sie versucht, einen Blick darauf zu werfen, 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 -Kontrolle? und seine 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. Abhängig von der Lizenz dieser Editoren können Sie diese Funktion möglicherweise wiederverwenden ...

Wenn Sie sich Showdown in seiner Codequelle (Datei showdown.js) genauer ansehen , finden Sie 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, sollte aber recht einfach in Ihre Anwendung zu integrieren sein ;-)


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


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

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

— Pascal MARTIN
quelle
5
Die Links scheinen sich geändert zu haben. Die Demo finden Sie unter softwaremaniacs.org/playground/showdown-highlight. Der Quellcode finden Sie unter softwaremaniacs.org/playground/showdown-highlight/showdown.js
— John J. Camilleri,
1
@ John danke für deinen Kommentar; Ich habe meine Antwort bearbeitet, um den Link zu ändern ;-)
— Pascal MARTIN
Leider scheint diese Bibliothek für Markdown-basierte Links nicht zu funktionieren, auch bekannt als: Einige Texte werden nicht konvertiert. Es fehlt ein Teil der Syntax, wie es scheint, was unglücklich ist. Was fehlt noch?
— Oddman
23

Ich dachte, es würde sich lohnen, 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 minimierten Code beträgt ungefähr 50% der unkomprimierten Größe. Es kommt darauf an, dass ich Pagedown (8 KB) empfehle, wenn Sie umfassende Unterstützung benötigen, da Benutzer Dokumente auf Ihrer Website bearbeiten, und ich empfehle meinen eigenen Drawdown (1,3 KB), wenn Sie Informationen in einer Web-App präsentieren nicht vom Benutzer bearbeitet; tut das Richtige für die allermeisten Fälle, während es extrem klein ist. Ich glaube, dass praktisch alle diese MIT-Lizenzen sind.

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

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

  • pagedown : 8KB. Dies ist es, was StackExchange antreibt, 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 Desinfektionsskripte angeboten, die beide auch von StackExchange verwendet werden.

  • Abschlags-it : 104KB. Folgt der CommonMark-Spezifikation; unterstützt Syntaxerweiterungen; erzeugt standardmäßig eine sichere Ausgabe. Schnell; mag tatsächlich so robust wie Showdown sein, aber sehr groß. Ist die Basis für http://dillinger.io/ .

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

  • Mikromarkdown : 5 KB. Unterstützt viele Funktionen, es fehlen jedoch einige häufig verwendete Funktionen wie ungeordnete Listen *und einige häufig verwendete Funktionen, die nicht unbedingt Teil der Spezifikation sind, wie z. B. eingezäunte 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 Dinge, die von den meisten Dokumenten verwendet werden; robuster als Mikromarkdown, aber nicht perfekt; verwendet einen eigenen, sehr einfachen Unit-Test. Ziemlich robust, bricht aber an vielen Randfällen.

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

  • mmd.js : 800 Bytes. Das Ergebnis der Bemühungen, den kleinstmöglichen Parser zu erstellen, der noch funktionsfähig ist. Unterstützt eine kleine Teilmenge; Dokument muss darauf zugeschnitten sein.

  • markdown-js : 54KB (nicht zum Download verfügbar minimiert; würde wahrscheinlich auf ~ 20KB verkleinern). Sieht ziemlich umfassend aus und enthält Tests, aber ich bin nicht sehr vertraut damit.

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

— Adam Leggett
quelle
Danke dafür, wirklich nützlich! Ich habe gerade Showdown verwendet und fetch(mit einem kleinen Scan von Jake Archibalds "That's So Fetch" ) Markdown-Dateien in meine statischen HTML-Seiten eingelesen und in HTML konvertiert. Süß :-)
— Dave Everitt
@ DaveEveritt großartig - vergessen Sie nicht, eine Abruf-Polyfüllung einzuschließen, es sei denn, Sie zielen auf einen festen Browser. Dies wird für Ihren Zweck funktionieren und ist winzig: github.com/developit/unfetch
— Adam Leggett
Einverstanden, und danke für den Link, obwohl ich denke, dass nur wenige Browser dies jetzt benötigen - Samsung unterstützt in der neuen Version und ich strebe nicht mehr nach IE, obwohl ich weiß, dass viele Entwickler… caniuse.com/#feat müssen = holen
— Dave Everitt
13

Textil

Eine scheinbar sehr gute Javascript-Implementierung von Textile finden Sie hier und eine weitere dort (vielleicht nicht so gut, hat aber eine schöne Beispielseite zum Konvertieren nach Typ).

Hinweis: In der ersten Implementierung, zu der ich einen Link erstellt habe, ist ein Fehler aufgetreten: Horizontale Balken werden nicht korrekt gerendert. 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;}
    //...
— glmxndr
quelle
9

Ich verwende das winzige minimalistische Skript - mmd.js , das nur eine Teilmenge der Markdown-Möglichkeiten unterstützt, aber dies könnte ohnehin alles sein, was man braucht. Dieses Skript mit weniger als 1 KB ist also erstaunlich und kein Overkill.

Unterstützte Funktionen

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

Nicht unterstützte Funktionen

  • Referenzen und IDs
  • Flucht vor Markdown-Zeichen
  • Nisten
— vsync
quelle
Es ist wirklich großartig!
— Arthur Araújo
Können wir mmd.js mit npm install installieren? Würde es wirklich gerne in meinem Projekt ausprobieren.
— Sudhir Shakya
1
adamvleggett.github.io/drawdown ist nicht viel größer, unterstützt aber viel mehr Markdown mit mehr Flexibilität.
— Adam Leggett
4

Es ist einfach, Showdown mit oder ohne jQuery zu verwenden . 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');
});
— Mathias Bynens
quelle
2

Ich fand diese Frage faszinierend und beschloss, etwas zu starten (nur Ersetzen strongund italicMarkdown-Tags). Nachdem ich eine Stunde lang versucht hatte, eine Lösung mit regulären Ausdrücken zu finden, gab ich auf und endete mit dem folgenden, was anscheinend gut funktioniert. Das heißt, es kann sicherlich weiter optimiert werden und ich bin mir nicht sicher, wie widerstandsfähig 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 nicht geschlossener Markdown-Tags

— karim79
quelle
0

Haben Sie sich die Eclipse WikiText-Bibliothek angesehen, die Teil von Mylyn ist? Es wird von vielen Wiki-Syntaxen in xhtml und in xdocs / DITA konvertiert. Es sieht sehr 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 sind im M $ Word-Format und wir würden sie gerne zur gemeinsamen Wartung in das Redmine Wiki bringen. Wir haben kein Tool gefunden, mit dem die Konvertierung durchgeführt werden kann. Wir haben die Open Office-Erweiterung gefunden, die mit Mediawiki formatierten Text erzeugt, aber Redmine Wiki verwendet eine Teilmenge von Textilien.

Kennt jemand ein Tool, das TO- Textilien aus Mediawiki, Word, XDocs oder HTML konvertiert?

— Stephen Gissendaner
quelle
Ja
— pihentagy
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.