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

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

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

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.

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

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

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

Link Showdown Attacklab-Link nie działa, więc użyj https://github.com/coreyti/showdown dla swoich potrzeb związanych z konwersją :)

Nie dotyczy to całego żądania (nie jest to edytor), ale textile-js jest biblioteką renderującą javascript: https://github.com/borgar/textile-js . Demonstracja jest dostępna pod adresem http://borgar.github.io/textile-js/

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

markdown-js to fajny parser znaczników javascript, aktywny projekt z testami.

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?

W przypadku tekstyliów:

Niedawno załatałem razem konwerter HTML na Textile: https://github.com/cmroanirgo/to-textile

Do odwrócenia Textile to HTML używam i polecam https://github.com/borgar/textile-js , o którym wspomniały już inne odpowiedzi.