Javascript per convertire Markdown / Textile in HTML (e, idealmente, tornare a Markdown / Textile)

Esistono diversi buoni editor Javascript per Markdown / Textile (ad esempio: http://attacklab.net/showdown/ , quello che sto usando in questo momento), ma tutto ciò di cui ho bisogno è una funzione Javascript che converta una stringa da Markdown / Textile -> HTML e ritorno.

Qual'è il miglior modo per farlo? (Idealmente sarebbe jQuery-friendly, ad esempio $("#editor").markdown_to_html())

Modifica: un altro modo per dirlo è che sto cercando un'implementazione Javascript di Rails textilize()e markdown()aiutanti di testo

Per Markdown -> HTML, c'è Showdown

StackOverflow stesso utilizza il linguaggio Markdown per domande e risposte; hai provato a dare un'occhiata a come funziona?

Bene, sembra che stia usando PageDown, disponibile con la licenza MIT

La domanda Esiste una buona libreria o controllo Javascript Markdown? e anche le sue risposte potrebbero aiutare :-)

Un editor completo, ovviamente, non è esattamente quello che hai chiesto; ma devono usare qualche tipo di funzione per trasformare il codice Markdown in HTML; e, a seconda della licenza di questi editor, potresti essere in grado di riutilizzare quella funzione ...

In realtà, se dai un'occhiata da vicino a Showdown, nel suo codice sorgente (file showdown.js) , troverai questa parte del commento:

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

Non è la sintassi jQuery, ma dovrebbe essere abbastanza facile da integrare nella tua applicazione ;-)

Per quanto riguarda il tessile, sembra essere un po 'più difficile trovare qualcosa di utile :-(

Dall'altro lato, HTML -> Markdown, immagino che le cose potrebbero essere un po 'più difficili ...

Quello che dovrei fare è memorizzare sia Markdown che HTML nel mio archivio dati dell'applicazione (database?), E usarne uno per la modifica e l'altro per il rendering ... Richiederebbe più spazio, ma sembra meno rischioso della "decrittografia" dell'HTML. ..

Ho pensato che sarebbe valsa la pena fare un elenco qui delle soluzioni JavaScript disponibili e delle loro dimensioni ridotte (non compresse) e dei loro punti di forza / debolezza. La dimensione compressa per il codice minimizzato sarà circa il 50% della dimensione non compressa. Di cosa si tratta:

• Usa showdown (28KB) se hai bisogno di un supporto completo e avrai documenti modificati dall'utente o arbitrari.
• Usa pagedown (8KB) ​​se hai documenti modificati / arbitrari dall'utente ma non hai bisogno di cose come tabelle, elenchi di definizioni o note a piè di pagina (ad esempio commenti su un sito come StackExchange).
• Usa il mio drawdown (1.3KB) se hai bisogno di una qualità ragionevolmente alta e di un supporto da tavolo, ma vuoi un peso piuma e non hai bisogno di risolvere ogni singolo caso limite.
• Usa uno degli altri se hai bisogno di funzionalità uniche come la sicurezza o l'espandibilità.

Tutti questi utilizzano la licenza MIT, la maggior parte sono su npm.

• resa dei conti : 28 KB. Fondamentalmente il gold standard; è la base per pagedown.

• pagedown : 8KB. Questo è ciò che alimenta StackExchange, quindi puoi vedere di persona quali funzionalità supporta (è molto robusto ma mancano tabelle, elenchi di definizioni, note a piè di pagina, ecc.). Oltre allo script di conversione da 8 KB, offre anche script di editor e disinfettante, entrambi utilizzati da StackExchange.

• drawdown : 1.3KB. Divulgazione completa, l'ho scritta. Ampia gamma di funzionalità rispetto a qualsiasi altro convertitore leggero; gestisce la maggior parte ma non tutte le specifiche CommonMark. Non consigliato per la modifica da parte dell'utente ma molto utile per presentare le informazioni nelle app Web. Nessun HTML in linea.

• markdown-it : 104 KB. Segue le specifiche CommonMark; supporta le estensioni della sintassi; produce un output protetto per impostazione predefinita. Veloce; può effettivamente essere robusto come lo showdown, ma molto grande. È la base per http://dillinger.io/ .

• contrassegnato : 19KB. Completo; testato rispetto alla suite di test unitari; supporta regole lexer personalizzate.

• micromarkdown : 5KB. Supporta molte funzionalità, ma ne mancano alcune comuni come gli elenchi non ordinati che utilizzano *e alcuni comuni che non fanno strettamente parte delle specifiche come i blocchi di codice protetti. Molti bug, genera eccezioni sulla maggior parte dei documenti più lunghi. Lo considero sperimentale.

• nano- markdown: 1.9KB. L'ambito delle funzionalità è limitato alle cose utilizzate dalla maggior parte dei documenti; più robusto del micromarkdown ma non perfetto; utilizza il proprio unit test di base. Ragionevolmente robusto ma si rompe su molti casi limite.

• mmd.js : 800 byte. Il risultato di uno sforzo per creare il parser più piccolo possibile che sia ancora funzionante. Supporta un piccolo sottoinsieme; il documento deve essere adattato.

• markdown-js : 54KB (non disponibile per il download minimizzato; probabilmente ridurrebbe a ~ 20KB). Sembra piuttosto completo e include test, ma non ne ho molta familiarità.

• fusione : 41 KB (non disponibile per il download minimizzato; probabilmente ridurrebbe a ~ 15 KB). plugin jQuery; Markdown Extra (tabelle, elenchi di definizioni, note a piè di pagina).

• unified.js : varia, 5-100 KB. Un sistema basato su plugin per la conversione tra html, markdown e prose. A seconda dei plug-in necessari (controllo ortografico, evidenziazione della sintassi, sanificazione dell'input), la dimensione del file varierà. Probabilmente utilizzato più lato server che lato client.

Tessile

Puoi trovare un'implementazione Javascript apparentemente molto buona di Textile qui e un'altra lì (forse non così buona, ma ha una bella pagina di esempio di conversione durante la digitazione).

Nota: c'è un bug nella prima implementazione a cui ho creato un collegamento: le barre orizzontali non vengono visualizzate correttamente. Per risolverlo, puoi aggiungere il seguente codice nel file.

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

Sto usando il minuscolo script minimalista - mmd.js , che supporta solo un sottoinsieme di possibilità di Markdown, ma questo potrebbe essere tutto ciò di cui uno avrebbe bisogno comunque, quindi questo script che è inferiore a 1kb è sorprendente e non sarà eccessivo.

Funzionalità supportate

• Intestazioni #
• Blockquotes >
• Elenchi ordinati 1
• Elenchi non ordinati *
• Paragrafi
• Collegamenti []()
• immagini ![]()
• Enfasi in linea *
• Enfasi in linea **

Funzionalità non supportate

• Riferimenti e ID
• Fuga dai personaggi di Markdown
• Nidificazione

È facile usare Showdown con o senza jQuery . Ecco un esempio di 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');
});

Lo Showdown Attacklab-Link è inattivo, quindi usa https://github.com/coreyti/showdown per le tue esigenze di conversione :)

Questo non risolve l'intera richiesta (non è un editor), ma textile-js è una libreria di rendering javascript: https://github.com/borgar/textile-js . Una dimostrazione è disponibile su http://borgar.github.io/textile-js/

Ho trovato questa domanda intrigante, quindi ho deciso di iniziare qualcosa (solo tag sostituzioni stronge italicmarkdown). Dopo aver passato un'ora a cercare di escogitare una soluzione utilizzando le espressioni regolari, ho rinunciato e ho finito con quanto segue, che sembra funzionare bene. Detto questo, può sicuramente essere ulteriormente ottimizzato e non sono sicuro di quanto sarà resiliente nel mondo reale in questa forma:

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

Codice di prova:

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

Produzione:

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: Novità nella V 0.024 - Rimozione automatica dei tag markdown non chiusi

markdown-js è un simpatico parser markdown javascript, un progetto attivo con test.

Hai esaminato la libreria WikiText di Eclipse che fa parte di Mylyn. Convertirà da molte sintassi wiki in xhtml e in xdocs / DITA. Sembra fantastico.

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

Qualcuno ha trovato una soluzione al problema HTML-> tessile? Tutta la nostra documentazione attuale è in formato M $ Word e ci piacerebbe portarla in Redmine Wiki per la manutenzione collaborativa. Non abbiamo trovato alcuno strumento che possa effettuare la conversione. Abbiamo trovato l'estensione Open Office che produce testo formattato in mediawiki ma Redmine Wiki utilizza un sottoinsieme di tessile.

Qualcuno sa di uno strumento che converte A tessile di MediaWiki, Word, XDocs, o HTML?

Per il tessile:

Di recente ho messo insieme un convertitore da HTML a tessile: https://github.com/cmroanirgo/to-textile

Per l'inverso Textile to HTML, utilizzo e consiglio https://github.com/borgar/textile-js , che altre risposte hanno già menzionato.