Javascript pentru a converti Markdown/Textile în HTML (și, în mod ideal, înapoi în Markdown/Textile) (Programare, Javascript, Jquery, Markdown, Textile)

Tom Lehman a intrebat.
a intrebat.

Există mai multe aplicații Javascript bune editorii pentru Markdown / Textile (de ex: http://attacklab.net/showdown/, cel pe care îl folosesc acum), dar tot ce am nevoie este o funcție Javascript care să convertească un șir de caractere din Markdown / Textile -> HTML și înapoi.

Care este cea mai bună modalitate de a face acest lucru? (În mod ideal, ar fi jQuery-friendly — de ex, $("#editor").markdown_to_html())

Editați: Un alt mod de a pune problema este că sunt în căutarea unei implementări Javascript a lui Rails’ textilize() și markdown() text helpers

11 răspunsuri
Pascal MARTIN

Pentru Markdown -> HTML, există Showdown

StackOverflow însuși folosește limbajul Markdown pentru întrebări și răspunsuri ; ați încercat să aruncați o privire la modul în care funcționează ?

Ei bine, se pare că folosește PageDown care este disponibil sub licența MIT

Întrebarea Există o bibliotecă sau un control Javascript Markdown bun? și răspunsurile sale ar putea fi de ajutor 🙂

Un editor complet nu este, desigur, exact ceea ce ați cerut ; dar acestea trebuie să folosească un fel de funcție pentru a transforma codul Markdown în HTML ; și, în funcție de licența acestor editori, s-ar putea să puteți reutiliza această funcție…

De fapt, dacă vă uitați cu atenție la Showdown, în codul său sursă (fișier showdown.js), veți găsi această porțiune de comentariu :

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

Nu este sintaxa jQuery, dar ar trebui să fie destul de ușor de integrat în aplicația dvs. 😉

În legătură cu Textile, se pare că este un pic mai greu de găsit ceva util 🙁

În cealaltă parte, HTML -> Markdown, cred că lucrurile ar putea fi un pic mai dificile…

Ceea ce aș face eu ar fi să stochez atât Markdown, cât și HTML în magazinul de date al aplicației mele (bază de date ? ) și să folosesc unul pentru editare, iar celălalt pentru redare… Ar ocupa mai mult spațiu, dar pare mai puțin riscant decât să „decriptez” HTML…

Comentarii

  • Link-urile par să se fi schimbat. Demonstrația este la softwaremaniacs.org/playground/showdown-highlight iar codul sursă poate fi găsit la softwaremaniacs.org/playground/showdown-highlight/showdown.js –  > Por John J. Camilleri.
  • @John mulțumesc pentru comentariu ; am editat răspunsul meu pentru a schimba link-ul 😉 –  > Por Pascal MARTIN.
  • Din păcate, această bibliotecă nu pare să funcționeze pentru link-uri bazate pe markdown, aka: unele texte nu este convertit. Se pare că îi lipsește o parte din sintaxă, ceea ce este regretabil. Ce altceva îi mai lipsește? –  > Por Oddman.
Adam Leggett

M-am gândit că ar merita să fac aici o listă a soluțiilor JavaScript existente și a dimensiunii lor minificate (necomprimate) și a punctelor forte/punctelor slabe. Dimensiunea comprimată pentru codul minificat va fi în jur de 50% din dimensiunea necomprimată. La ce se reduce totul:

  • Utilizați showdown (28KB) dacă aveți nevoie de un suport cuprinzător și dacă veți avea documente editate de utilizator sau arbitrare.
  • Utilizați pagedown (8KB) dacă aveți documente editate de utilizator/arbitrare, dar nu aveți nevoie de lucruri precum tabele, liste de definiții sau note de subsol (de exemplu, comentarii pe un site precum StackExchange).
  • Folosiți propriul meu drawdown (1.3KB) dacă aveți nevoie de o calitate rezonabil de ridicată și de suport pentru tabele, dar doriți o greutate mai mică și nu aveți nevoie să fie abordat fiecare caz limită.
  • Folosiți una dintre celelalte dacă aveți nevoie de capacități unice, cum ar fi securitatea sau capacitatea de extindere.

Toate acestea folosesc licența MIT, majoritatea sunt pe npm.

  • showdown: 28KB. Practic, standardul de aur; este baza pentru pagedown.

  • pagedown: 8KB. Aceasta este ceea ce alimentează StackExchange, așa că puteți vedea singuri ce caracteristici suportă (este foarte robust, dar îi lipsesc tabelele, listele de definiții, notele de subsol etc.). Pe lângă scriptul de conversie 8KB, oferă și scripturi de editare și de igienizare, ambele folosite și de StackExchange.

  • drawdown: 1.3KB. Dezvăluire completă, eu l-am scris. Sfera de cuprindere a caracteristicilor mai largă decât orice alt convertor ușor; gestionează majoritatea, dar nu toate specificațiile CommonMark. Nu este recomandat pentru editarea de către utilizator, dar este foarte util pentru prezentarea informațiilor în aplicațiile web. Nu conține HTML în linie.

  • markdown-it: 104KB. Urmează specificațiile CommonMark; suportă extensii de sintaxă; produce ieșire securizată în mod implicit. Rapid; poate fi de fapt la fel de robust ca showdown, dar foarte mare. Este baza pentru http://dillinger.io/.

  • marcat: 19KB. Complet; testat pe baza suitei de teste unitare; suportă reguli de lexicare personalizate.

  • micromarkdown: 5KB. Suportă o mulțime de caracteristici, dar îi lipsesc unele comune, cum ar fi listele neordonate care utilizează * și unele comune care nu fac parte strict din specificații, cum ar fi blocurile de cod îngrădite. Multe bug-uri, aruncă excepții pe majoritatea documentelor mai lungi. Îl consider experimental.

  • nano-markdown: 1.9KB. Domeniul de aplicare al funcțiilor este limitat la lucruri utilizate de majoritatea documentelor; mai robust decât micromarkdown, dar nu este perfect; utilizează propriul test unitar foarte elementar. Destul de robust, dar se rupe în multe cazuri limită.

  • mmd.js: 800 de octeți. Rezultatul unui efort de a face cel mai mic parser posibil care să fie totuși funcțional. Suportă un subset mic; documentul trebuie adaptat pentru acesta.

  • markdown-js: 54KB (nu este disponibil pentru descărcare minificat; probabil că ar fi minificat la ~20KB). Pare destul de cuprinzător și include teste, dar nu sunt foarte familiarizat cu el.

  • meltdown: 41KB (nu este disponibil pentru descărcare minificat; probabil că ar fi minificat la ~15KB). jQuery plugin; Markdown Extra (tabele, liste de definiții, note de subsol).

  • unified.js: variază, 5-100KB. Un sistem bazat pe plugin pentru conversia între html, markdown și proză. În funcție de plugin-urile de care aveți nevoie (verificare ortografică, evidențiere a sintaxei, igienizare a intrărilor), dimensiunea fișierului va varia. Probabil că este folosit mai mult pe partea de server decât pe partea de client.

Comentarii

  • Mulțumesc pentru acest lucru, foarte util! Tocmai am folosit showdown și fetch (cu o mică scanare de Jake Archibald’s „That’s So Fetch”) pentru a citi în fișierele Markdown în paginile mele HTML statice și a le converti în HTML. Drăguț 🙂 –  > Por Dave Everitt.
  • @DaveEveritt grozav – nu uitați să includeți un polyfill fetch dacă nu vizați un browser fix. Acest lucru va funcționa pentru scopul dvs. și este mic: github.com/developit/unfetch –  > Por Adam Leggett.
  • De acord, și mulțumesc pentru link, deși cred că doar câteva browsere au nevoie de acest lucru acum – Samsung oferă suport în noua versiune și nu mai am ca obiectiv IE, deși știu că mulți dezvoltatori au nevoie… caniuse.com/#feat=fetch –  > Por Dave Everitt.
  • Aveți planuri pentru adăugarea de funcții <table> pe drawdown? Am încercat să-l adaug eu însumi, dar este mult peste înțelegerea mea. ;( –  > Por jack.
  • @AdamLeggett Vă mulțumesc! –  > Por jack.
glmxndr

Textile

Puteți găsi o implementare Javascript aparent foarte fină a lui Textile aici, și o alta acolo (poate nu la fel de bună, dar are o pagină de exemplu frumoasă de convertire pe măsură ce se face).

Notă: există o eroare în prima implementare la care am făcut un link : barele orizontale nu sunt redate corect. Pentru a o rezolva, puteți adăuga următorul cod în fișier.

for(i=0;i<lines.length;i++) {
    // Add code :Start
    if (lines[i].match(/s*-{4,}s*/)){
      html+="<hr/>
";
      continue;
    }
    // Add code :End
    if (lines[i].indexOf("[") == 0) {continue;}
    //...

vsync

Eu folosesc micul script minimalist – mmd.js, care suportă doar un subset de posibilități Markdown, dar s-ar putea să fie tot ce ar fi nevoie oricum, așa că acest script care are mai puțin de 1kb este uimitor și nu va fi o suprasolicitare.

Caracteristicile suportate

  • Headers #
  • Blockquotes >
  • Liste ordonate 1
  • Liste neordonate *
  • Paragrafe
  • Legături []()
  • Imagini ![]()
  • Accentuare în linie *
  • Accentuare în linie **

Caracteristici nesuportate

  • Referințe și ID-uri
  • Evadarea caracterelor Markdown
  • Nesting

Comentarii

  • Este cu adevărat minunat! –  > Por Arthur Araújo.
  • Putem instala mmd.js folosind npm install? Mi-ar plăcea foarte mult să îl încerc în proiectul meu. –  > Por sudhir shakya.
  • adamvleggett.github.io/drawdown nu este cu mult mai mare, dar suportă mult mai mult Markdown cu mai multă flexibilitate. –  > Por Adam Leggett.
Mathias Bynens

Este ușor să utilizați Showdown cu sau fără jQuery. Iată un exemplu cu 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');
});

Bijan

Legătura Showdown Attacklab-Link nu mai funcționează, așa că folosiți https://github.com/coreyti/showdown pentru nevoile de conversie 🙂

Nathan

Acest lucru nu se adresează întregii cereri (nu este un editor), dar textile-js este o bibliotecă de randare javascript: https://github.com/borgar/textile-js. O demonstrație este disponibilă la http://borgar.github.io/textile-js/

Comentarii

  • Pentru mine, această bibliotecă nu interpretează corect listele numerotate (folosind #). –  > Por david.
karim79

Am găsit această întrebare intrigantă, așa că am decis să încep ceva (înlocuiește doar strong și italic etichete markdown). După ce am petrecut o oră încercând să concep o soluție folosind regexuri, am renunțat și am ajuns la următorul lucru, care pare să funcționeze bine. Acestea fiind spuse, cu siguranță poate fi optimizat în continuare și nu sunt sigur de cât de rezistent în lumea reală va fi în această formă:

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

Cod de testare:

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

Ieșire:

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: Nou în V 0.024 – Îndepărtarea automată a etichetelor markdown neînchise.

foz

markdown-js este un parser markdown javascript frumos, un proiect activ cu teste.

Stephen Gissendaner

V-ați uitat la biblioteca Eclipse WikiText care face parte din Mylyn. Aceasta va converti din multe sintaxe wiki în xhtml și în xdocs/DITA. Arată foarte bine.

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

A găsit cineva o soluție la problema HTML->textile? Toată documentația noastră actuală este în format M$ Word și ne-ar plăcea să o aducem în Redmine Wiki pentru întreținere colaborativă. Nu am găsit niciun instrument care să facă conversia. Am găsit extensia Open Office care produce text formatat mediawiki, dar Redmine Wiki folosește un subset de textile.

Cunoaște cineva un instrument care să convertească ÎN textile din mediawiki, Word, XDocs sau HTML?

Comentarii

  • Da, vezi stackoverflow.com/questions/3711384/… –  > Por pihentagy.
cmroanirgo

Pentru textile:

Recent am pus laolaltă un convertor HTML în Textile: https://github.com/cmroanirgo/to-textile

Pentru conversia inversă de la Textile la HTML, folosesc și recomand https://github.com/borgar/textile-js, pe care alte răspunsuri l-au menționat deja.