Wpisz albo wklej Markdown po lewej stronie i zobacz go wyrenderowany jako HTML po prawej, na bieżąco podczas pisania. Nagłówki, pogrubienie i kursywa, listy, tabele, cytaty i bloki kodu w ogrodzeniach renderują się od razu, wraz z dodatkami z GitHub Flavored Markdown, takimi jak tabele i przekreślenia.

Jak działa podgląd na żywo?

Parsowanie odbywa się przez bibliotekę marked z włączonym wsparciem GFM, ten sam parser, który stoi za konwerterem Markdown na HTML na tej stronie. Każde naciśnięcie klawisza parsuje na nowo całą treść i odświeża panel podglądu, więc nie ma osobnego kroku „renderuj” ani przycisku do kliknięcia, ani opóźnienia między wpisaniem nagłówka a jego pojawieniem się po prawej stronie. Zanim HTML trafi na stronę, jest oczyszczany przez DOMPurify, bibliotekę stworzoną specjalnie do usuwania niebezpiecznego kodu z niezaufanego HTML-a. Oznacza to, że wklejona treść nie może uruchomić znacznika script ani obsługi zdarzenia onerror przez podgląd, co ma znaczenie, bo Markdown pozwala wstawiać surowy HTML bezpośrednio, a taki kod bez oczyszczenia renderowałby się bez żadnych zmian.

Czy to, co piszę, trafia na serwer?

Nie. Parsowanie, renderowanie i oczyszczanie odbywają się w przeglądarce dzięki kodowi JavaScript dołączonemu do strony. Żaden wpisany tekst nie opuszcza twojego komputera, co ma znaczenie przy nieopublikowanych szkicach, notatkach z czymś prywatnym albo dokumencie, którego jeszcze nie chcesz nigdzie zapisywać. Skoro nic nie trafia na serwer, nie ma też później żadnej historii do wyczyszczenia. Wystarczy zamknąć kartę.

Do czego to się przydaje?

Użyj go, żeby sprawdzić, jak będzie wyglądać README przed commitem, podejrzeć komentarz albo treść zgłoszenia przed wysłaniem na GitHub czy GitLab, albo sprawdzić wyrównanie kolumn w tabeli bez publikowania na platformie, która sama renderuje Markdown. To też szybki sposób, żeby upewnić się, że blok surowego HTML-a wklejony do pliku Markdown, na przykład osadzony <iframe> albo stylizowany <div>, renderuje się tak, jak oczekujesz, albo sprawdzić, czy zagnieżdżona lista ma poprawne wcięcia, zanim trafi gdzieś publicznie.

Podstawową składnię znajdziesz w specyfikacji CommonMark, rozszerzenia dla tabel i przekreśleń w specyfikacji GFM GitHuba, a więcej o samym oczyszczaniu w projekcie DOMPurify.