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


84

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

Risposte:


98

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


5
I collegamenti sembrano essere cambiati. La demo è su softwaremaniacs.org/playground/showdown-highlight e il codice sorgente può essere trovato su softwaremaniacs.org/playground/showdown-highlight/showdown.js
John J. Camilleri

1
@ John grazie per il tuo commento; ho modificato la mia risposta per cambiare il collegamento ;-)
Pascal MARTIN

Sfortunatamente questa libreria non sembra funzionare per i collegamenti basati su markdown, ovvero: alcuni testi non vengono convertiti. Sembra che manchi parte della sintassi, il che è un peccato. Cos'altro manca?
Oddman

26

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.


Grazie per questo, davvero utile! Ho appena usato showdown e fetch(con una piccola scansione di "That's So Fetch" di Jake Archibald ) per leggere i file Markdown nelle mie pagine HTML statiche e convertirli in HTML. Sweet :-)
Dave Everitt

@DaveEveritt fantastico: non dimenticare di includere un polyfill di recupero a meno che non stia prendendo di mira un browser fisso. Funzionerà per il tuo scopo ed è minuscolo: github.com/developit/unfetch
Adam Leggett

D'accordo, e grazie per il collegamento, anche se penso che ora solo pochi browser ne abbiano bisogno - Samsung supporta nella nuova versione e non sto più mirando a IE, anche se so che molti sviluppatori devono ... caniuse.com/#feat = recupero
Dave Everitt

Hai in programma di aggiungere funzionalità <table> al drawdown ? Ho provato ad aggiungerlo da solo, ma è ben oltre la mia comprensione. ; (
jack

@AdamLeggett Grazie!
jack

13

Tessile

Puoi trovare un'implementazione Javascript apparentemente molto buona di Textile qui e un'altra (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;}
    //...

9

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

È davvero fantastico!
Arthur Araújo

Possiamo installare mmd.js usando npm install? Mi piacerebbe davvero provarlo nel mio progetto.
sudhir shakya

1
adamvleggett.github.io/drawdown non è molto più grande, ma supporta molto di più Markdown con maggiore flessibilità.
Adam Leggett

4

È 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');
});



2

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



0

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?



Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.