Podgląd Markdown z tabelami, zadaniami i obrazami
Tabela w Markdown to kreski pionowe, myślniki i dwukropki, a przy ręcznym pisaniu łatwo o jedną kreskę za mało. Ten podgląd Markdown rysuje wynik w trakcie pisania. Po lewej jest kod źródłowy, po prawej gotowa strona. Narzędzie przyda się do pliku README, listy zmian albo komentarza do zgłoszenia. Licznik nad panelami pokazuje liczbę słów i znaków tekstu.
Jak zapisać tabelę
Pierwszy wiersz to nagłówek. Pod nim stoi wiersz rozdzielający z myślników. Dwukropki w tym wierszu ustalają wyrównanie: :-- do lewej, :-: do środka, --: do prawej. Zewnętrzne kreski pionowe są opcjonalne. Gdy w komórce ma stać kreska, wpisz \|. W komórkach działają pogrubienie, kursywa, kod i linki.
Zbyt krótki wiersz dostaje puste komórki na końcu. Komórki ponad liczbę kolumn nagłówka są odrzucane. Przed tabelą nie potrzeba pustego wiersza, może zaczynać się tuż pod linią tekstu. Komórka mieści jednak tylko jedną linię zwykłego tekstu. Lista lub drugi akapit się nie zmieszczą, a wpisane <br> pojawi się jako tekst. Szeroka tabela przewija się poziomo wewnątrz podglądu.
Składnia, którą podgląd wyświetla
Strona używa biblioteki marked w trybie GitHub. Wyświetla nagłówki od poziomu 1 do 6, pogrubienie, kursywę, ~~przekreślenie~~, kod w tekście, ogrodzone bloki kodu, cytaty, listy numerowane i punktowane, listy zagnieżdżone, listy zadań, linie poziome, linki, obrazy i tabele. Goły adres, na przykład https://example.com, staje się linkiem bez nawiasów. Pól wyboru na listach zadań nie da się klikać.
Jedno złamanie wiersza w źródle daje jedno złamanie wiersza w wyniku, a pusty wiersz zaczyna nowy akapit. Nazwa języka po ogrodzeniu, na przykład js, jest przyjmowana, ale kod nie dostaje kolorów.
Obsługa paneli i separatora
- Wpisz lub wklej Markdown do panelu "Kod źródłowy Markdown". Panel "Podgląd na żywo" odświeża się przy każdym klawiszu.
- Przeciągnij separator między panelami myszą, palcem lub rysikiem. Dwukrotne kliknięcie przywraca podział 50/50. Z klawiatury ustaw fokus na separatorze i użyj strzałki w lewo lub w prawo (2 procent), Shift ze strzałką (10 procent), Home, End albo Enter (reset).
- "Widok powiększony" wypełnia ekran i zachowuje ustawioną szerokość.
- "Kopiuj HTML" kopiuje oczyszczoną treść HTML. "Zapisz jako HTML" pobiera plik
document.htmlz krótkim arkuszem stylów, który obejmuje też tabele.
Szerokość mieści się między 15 a 85 procent, a przeglądarka zapamiętuje ją na tym urządzeniu w pamięci lokalnej. Poniżej 860 px panele układają się jeden pod drugim, a separator znika.
Surowy HTML, linki i obrazy zewnętrzne
HTML wpisany w źródle widać jako tekst i nigdy się nie uruchamia. Linki zachowują tylko te cele: http, https, mailto, #kotwica i ścieżki względne. Każdy inny link traci cel.
Podgląd nie wczytuje obrazów zewnętrznych, bo przy wczytaniu przeglądarka łączy się z serwisem, który je hostuje. W ich miejscu stoi zastępnik z tekstem alternatywnym. Przełącznik "Wczytuj obrazy zewnętrzne" je pokazuje. Obrazy osadzone jako data:image/png;base64, (także JPEG, GIF, WebP i AVIF) widać zawsze. Skopiowany i zapisany HTML zachowuje każdy znacznik obrazu wraz z adresem.
Czego brakuje i dokąd trafia tekst
Nie ma kolorowania składni, przypisów, wzorów, kodów emoji w rodzaju :smile: ani front matter. Blok między dwiema liniami --- pojawia się jako linia i nagłówek. Oba panele nie przewijają się razem.
Biblioteki marked i dompurify wczytują się przy otwarciu strony. Jeśli wczytanie się nie uda, podgląd pokazuje komunikat. Potem przeglądarka zamienia Markdown na HTML i niczego nie wysyła; możesz to sprawdzić w zakładce sieci. Schowek jest używany tylko po kliknięciu "Kopiuj HTML", a plik powstaje tylko po kliknięciu "Zapisz jako HTML".
Często zadawane pytania (FAQ)
| --- | --- |.