Markdown na HTML i z powrotem: konwerter z podglądem na żywo
Wklej Markdown — zobaczysz gotową stronę i czysty HTML obok. Wklej HTML — dostaniesz Markdown nadający się do README albo wpisu na blogu. Oba kierunki działają w Twojej przeglądarce: tekst nigdzie nie jest wysyłany ani zapisywany.
.md — jest czytany lokalnie. Obsłużono CommonMark w typowym zakresie plus rozszerzenia GFM: tabele, przekreślenie, listy zadań.
Wklej Markdown powyżej — HTML pojawi się tutaj.
.html — jest czytany lokalnie. Analiza idzie przez DOMParser, więc działa i z fragmentem, i z całą stroną.
Wklej HTML powyżej — Markdown pojawi się tutaj.
Tekst nie opuszcza Twojej przeglądarki — przekształcenie wykonuje się lokalnie, bez wysyłania na serwer.
Co dokładnie jest obsługiwane
Od strony Markdowna — CommonMark w typowym zakresie plus rozszerzenia GFM: nagłówki kratkami i podkreśleniem, akapity, linie poziome; listy punktowane, numerowane i zagnieżdżone, w formie zwartej i luźnej; listy zadań w nawiasach kwadratowych; cytaty, w tym z leniwą kontynuacją wiersza; kod w ogrodzeniu z nazwą języka i kod wcięciem; tabele GFM z wyrównaniem kolumn; odnośniki, obrazy, autoodnośniki, odnośniki do definicji na dole dokumentu; pogrubienie, kursywa, przekreślenie, kod w wierszu, znaki escapowane, twarde przełamanie. Od strony HTML analiza idzie przez DOMParser samej przeglądarki, więc działa i fragment, i cała strona z head. Tabele ze scalonymi komórkami nie przenoszą się do Markdowna — takiej składni tam nie ma, więc zostają znacznikami, a narzędzie o tym mówi. Czego świadomie nie ma: podświetlania składni w blokach kodu, przypisów, wzorów i dyrektyw konkretnych generatorów stron statycznych. To już nie Markdown, tylko dialekt pojedynczego narzędzia.
Jedno przełamanie wiersza: dwa różne Markdowny
Najczęstszym źródłem rozbieżności między konwerterami jest właśnie pojedyncze przełamanie wewnątrz akapitu. Według CommonMarka to zwykła spacja: dwa wiersze sklejają się w jeden akapit. Tak zachowują się Pandoc, generatory dokumentacji i większość stron statycznych. GitHub w komentarzach, opisach zgłoszeń i recenzjach robi odwrotnie: każde przełamanie staje się znacznikiem br. Właśnie dlatego tekst, który dobrze wyglądał w zgłoszeniu, po przeniesieniu do README zlepia się w jeden ciągły akapit. Pole «Pojedyncze przełamanie wiersza to br» przełącza między tymi dwoma nawykami. Domyślnie obowiązuje reguła CommonMarka.
Dlaczego podgląd nie pokazuje wszystkiego, co jest w HTML-u
Markdown ze specyfikacji dopuszcza HTML wewnątrz siebie. To wygodne i jednocześnie oznacza, że każdy wklejony tekst może zawierać wykonywalny kod. Popularne przeglądarki online wkładają wynik do innerHTML bez zmian. Biblioteka marked, na której są zbudowane, od czwartej wersji nie ma wbudowanej sanityzacji w ogóle — znacznik script z cudzego Markdowna po prostu się tam wykona. Tutaj podgląd budowany jest z węzłów DOM według białej listy: script, iframe, object, obsługa zdarzeń w rodzaju onclick i odnośniki ze schematem javascript: do niego nie trafiają, a lista wyciętego pokazuje się pod wynikiem. Na karcie «Kod HTML» widzisz pełne wyjście bez skrótów — to tekst, a nie strona, i wykonać go nie sposób. HTML ze źródła może trafić do podglądu tylko wtedy, gdy sam włączysz odpowiednie pole. Domyślnie znaczniki są escapowane i pokazywane jako tekst.