JavaScript do konwersji Markdown / Textile do HTML (i najlepiej z powrotem do Markdown / Textile)

84

Istnieje kilka dobrych edytorów Javascript dla Markdown / Textile (np .: http://attacklab.net/showdown/ , ten, którego teraz używam), ale potrzebuję tylko funkcji JavaScript, która konwertuje ciąg z Markdown / Textile -> HTML iz powrotem.

Jak najlepiej to zrobić? (Idealnie byłoby to przyjazne dla jQuery - np. $("#editor").markdown_to_html())

Edycja: Innym sposobem wyrażenia tego jest to, że szukam implementacji JavaScript dla Railsów textilize()i markdown()pomocników tekstowych

javascript  jquery  markdown  textile 
— Tom Lehman
źródło

Odpowiedzi:

98

Dla Markdown -> HTML jest Showdown

Sam StackOverflow używa języka Markdown do zadawania pytań i odpowiedzi; czy próbowałeś przyjrzeć się, jak to działa?

Wygląda na to, że używa programu PageDown, który jest dostępny na licencji MIT

Pytanie Czy jest jakaś dobra biblioteka lub kontrolka JavaScript Markdown? i jej odpowiedzi też mogą pomóc :-)


Oczywiście pełny edytor nie jest tym, o co prosiłeś; ale muszą użyć jakiejś funkcji, aby przekształcić kod Markdown w HTML; i, w zależności od licencji tych edytorów, możesz mieć możliwość ponownego użycia tej funkcji ...

Właściwie, jeśli przyjrzysz się uważnie Showdown, w jego źródle kodu (plik showdown.js) , znajdziesz następującą część komentarza:

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

Nie jest to składnia jQuery, ale powinna być łatwa do zintegrowania z Twoją aplikacją ;-)


Jeśli chodzi o tekstylia, trochę trudniej jest znaleźć coś przydatnego :-(


Z drugiej strony, HTML -> Markdown, myślę, że sprawy mogą być nieco trudniejsze ...

Co bym zrobił, to przechowywał Markdown i HTML w moim magazynie danych aplikacji (bazie danych?) I używał jednego do edycji, a drugiego do renderowania ... Zajmowałoby to więcej miejsca, ale wydaje się mniej ryzykowne niż „odszyfrowanie” HTML. ..

— Pascal MARTIN
źródło
5
Wydaje się, że linki uległy zmianie. Wersja demonstracyjna znajduje się pod adresem softwaremaniacs.org/playground/showdown-highlight, a kod źródłowy można znaleźć na stronie softwaremaniacs.org/playground/showdown-highlight/showdown.js
— John J. Camilleri
1
@John dzięki za komentarz; zredagowałem swoją odpowiedź, aby zmienić link ;-)
— Pascal MARTIN
Niestety ta biblioteka nie działa w przypadku linków opartych na markdown, czyli: część tekstu nie jest konwertowana. Wydaje się, że brakuje mu części składni, co jest niefortunne. Czego jeszcze brakuje?
— Oddman
25

Pomyślałem, że warto byłoby zrobić tutaj listę dostępnych rozwiązań JavaScript oraz ich zminimalizowany (nieskompresowany) rozmiar i mocne / słabe strony. Skompresowany rozmiar zminimalizowanego kodu będzie wynosił około 50% nieskompresowanego rozmiaru. Do czego to się sprowadza:

  • Użyj showdown (28KB), jeśli potrzebujesz wszechstronnego wsparcia i będziesz mieć edytowane lub dowolne dokumenty przez użytkowników.
  • Użyj pagedown (8KB), jeśli masz edytowane przez użytkownika / dowolne dokumenty, ale nie potrzebujesz takich rzeczy, jak tabele, listy definicji lub przypisy (np. Komentarze w witrynie takiej jak StackExchange).
  • Użyj mojej własnej wypłaty (1,3 KB), jeśli potrzebujesz rozsądnie wysokiej jakości i wsparcia stołu, ale chcesz mieć wagę piórkową i nie potrzebujesz rozpatrywać każdego pojedynczego przypadku krawędzi.
  • Użyj jednej z pozostałych, jeśli potrzebujesz unikalnych funkcji, takich jak bezpieczeństwo lub możliwość rozbudowy.

Wszystkie korzystają z licencji MIT, większość na npm.

  • showdown : 28 KB. Zasadniczo złoty standard; jest podstawą do pagedown.

  • pagedown : 8KB. To właśnie napędza StackExchange, więc możesz sam zobaczyć, które funkcje obsługuje (jest bardzo solidny, ale brakuje tabel, list definicji, przypisów itp.). Oprócz skryptu konwertera 8KB, oferuje również skrypty edytora i skrypty dezynfekujące, z których również korzysta StackExchange.

  • Spadek wartości : 1.3KB. Pełne ujawnienie, napisałem to. Szerszy zakres funkcji niż jakikolwiek inny lekki konwerter; obsługuje większość specyfikacji CommonMark, ale nie wszystkie. Niezalecane do edycji przez użytkownika, ale bardzo przydatne do prezentowania informacji w aplikacjach internetowych. Brak wbudowanego kodu HTML.

  • markdown-it : 104 KB. Zgodny ze specyfikacją CommonMark; obsługuje rozszerzenia składni; domyślnie tworzy bezpieczne wyjście. Szybki; w rzeczywistości może być tak mocny jak showdown, ale bardzo duży. Jest podstawą dla http://dillinger.io/ .

  • oznaczone : 19KB. Wszechstronny; testowane względem zestawu testów jednostkowych; obsługuje niestandardowe reguły leksera.

  • micromarkdown : 5 KB . Obsługuje wiele funkcji, ale brakuje niektórych typowych, takich jak nieuporządkowane listy, które używają *i niektórych popularnych, które nie są ściśle częścią specyfikacji, takich jak ogrodzone bloki kodu. Wiele błędów, wyrzuca wyjątki w większości dłuższych dokumentów. Uważam to za eksperymentalne.

  • nano-przecena : 1,9 KB. Zakres funkcji ograniczony do rzeczy używanych w większości dokumentów; bardziej wytrzymały niż micromarkdown, ale nie doskonały; używa własnego, bardzo podstawowego testu jednostkowego. Dość solidne, ale pęka w wielu skrajnych przypadkach.

  • mmd.js : 800 bajtów. Wynik starań o stworzenie możliwie najmniejszego parsera, który nadal działa. Obsługuje mały podzbiór; dokument musi być do tego dostosowany.

  • markdown-js : 54KB (niedostępny do pobrania w postaci zminimalizowanej; prawdopodobnie zostałby zminimalizowany do ~ 20 KB). Wygląda dość obszernie i zawiera testy, ale nie jestem z tym zaznajomiony.

  • meltdown : 41 KB (nie jest dostępne do pobrania w postaci zminimalizowanej; prawdopodobnie zostanie zminimalizowane do ~ 15 KB). wtyczka jQuery; Markdown Extra (tabele, listy definicji, przypisy).

  • unified.js : różne, 5–100 KB. Oparty na wtyczkach system do konwersji między html, markdown i prozą. W zależności od potrzebnych wtyczek (sprawdzanie pisowni, podświetlanie składni, oczyszczanie danych wejściowych) rozmiar pliku będzie się różnił. Prawdopodobnie używany bardziej po stronie serwera niż po stronie klienta.

— Adam Leggett
źródło
Dzięki za to, naprawdę przydatne! Po prostu użyłem showdown i fetch(z małym skanem „That's So Fetch” Jake'a Archibalda ) wczytywałem pliki Markdown na moje statyczne strony HTML i konwertowałem je na HTML. Słodko :-)
— Dave Everitt
@DaveEveritt świetnie - nie zapomnij dołączyć wypełnienia pobierania, chyba że celujesz w stałą przeglądarkę. To zadziała dla twojego celu i jest małe: github.com/developit/unfetch
— Adam Leggett
Zgadzam się i dziękuję za link, chociaż myślę, że tylko kilka przeglądarek tego potrzebuje teraz - Samsung wspiera w nowej wersji i już nie celuję
— Dave Everitt
Czy planujesz dodanie funkcji <table> do wypłaty ? Próbowałem dodać to sam, ale jest to daleko poza moim zrozumieniem. ; (
— jack
1
@VictorLee gotowe!
— Adam Leggett
13

Włókienniczy

Możesz znaleźć pozornie bardzo dobrą implementację Textile w Javascript tutaj i inną tam (może nie tak dobra, ale ma ładną przykładową stronę konwersji podczas pisania).

Uwaga: w pierwszej implementacji, do której utworzyłem łącze, jest błąd: poziome paski nie są renderowane poprawnie. Aby to naprawić, możesz dodać następujący kod w pliku.

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
źródło
9

Używam malutkiego minimalistycznego skryptu - mmd.js , który obsługuje tylko podzbiór możliwości Markdown, ale i tak może to być wszystko, czego potrzeba, więc ten skrypt, który ma mniej niż 1kb, jest niesamowity i nie będzie przesadą.

Obsługiwane funkcje

  • Nagłówki #
  • Cytaty blokowe >
  • Listy uporządkowane 1
  • Nieuporządkowane listy *
  • Akapity
  • Spinki do mankietów []()
  • Zdjęcia ![]()
  • Nacisk w linii *
  • Nacisk w linii **

Nieobsługiwane funkcje

  • Referencje i identyfikatory
  • Ucieczka przed postaciami Markdown
  • Zagnieżdżanie
— vsync
źródło
To jest naprawdę niesamowite!
— Arthur Araújo
Czy możemy zainstalować mmd.js przy użyciu instalacji npm? Naprawdę chciałbym to wypróbować w moim projekcie.
— sudhir shakya
1
adamvleggett.github.io/drawdown nie jest dużo większy, ale obsługuje znacznie więcej Markdown z większą elastycznością.
— Adam Leggett
4

Showdown jest łatwy w użyciu z jQuery lub bez niego . Oto przykład 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');
});
— Mathias Bynens
źródło
2

Uznałem to pytanie za intrygujące, więc postanowiłem zacząć od czegoś (tylko zastępuje strongi italictagi przeceny). Spędziwszy godzinę próbując wymyślić rozwiązanie przy użyciu wyrażeń regularnych, zrezygnowałem i skończyłem z następującym, co wydaje się działać dobrze. To powiedziawszy, z pewnością można go dalej zoptymalizować i nie jestem pewien, jak odporny będzie w świecie rzeczywistym w tej formie:

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

Kod testowy:

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

Wynik:

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

EDYCJA: Nowość w wersji 0.024 - Automatyczne usuwanie niezamkniętych znaczników przeceny

— karim79
źródło
0

Czy spojrzałeś na bibliotekę Eclipse WikiText, która jest częścią Mylyn. Konwertuje wiele składni wiki na xhtml i xdocs / DITA. Wygląda fajnie.

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

Czy ktoś znalazł rozwiązanie problemu HTML-> tekstylnego? Cała nasza aktualna dokumentacja jest w formacie M $ Word i chcielibyśmy przenieść ją do Redmine Wiki w celu wspólnego utrzymania. Nie znaleźliśmy żadnego narzędzia, które dokona konwersji. Znaleźliśmy rozszerzenie Open Office, które tworzy tekst w formacie mediawiki, ale Redmine Wiki używa podzbioru tekstyliów.

Ktoś wie o narzędzie, które konwertuje DO włókienniczych z MediaWiki, Word, XDocs lub HTML?

— Stephen Gissendaner
źródło
— pihentagy
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.