Jak wyświetlić podgląd Markdown online bez wysyłania plików

Markdown jest zaprojektowany tak, by dało się go czytać jako zwykły tekst, ale i tak chcesz widzieć, jak wygląda gotowy dokument: czy tabela jest wyrównana, lista poprawnie zagnieżdżona, a blok kodu podświetlony. Podgląd na żywo pokazuje wyrenderowany wynik obok źródła i aktualizuje go przy każdym naciśnięciu klawisza.

Ten poradnik porównuje popularne sposoby podglądu Markdown, wymienia funkcje, które na co dzień naprawdę robią różnicę, i pokazuje szybki sposób pracy z lokalnymi plikami w przeglądarce — bez instalowania czegokolwiek i bez wysyłania ich na serwer.

Trzy sposoby na podgląd Markdown

1. Podgląd w edytorze kodu

VS Code, środowiska JetBrains i wiele innych edytorów ma wbudowany podgląd Markdown. To dobre rozwiązanie, jeśli i tak spędzasz czas w takim edytorze. Wady: edytor trzeba zainstalować, do wzorów i diagramów często potrzebne są rozszerzenia, a trudno go szybko polecić koledze, który chce tylko przeczytać plik README.md.

2. Podgląd Markdown online

Strona z edytorem po lewej i podglądem po prawej to najszybsza opcja: otwierasz kartę i zaczynasz pisać. Haczyk polega na tym, że narzędzia online bardzo się różnią. Niektóre wysyłają tekst na serwer, aby go wyrenderować, inne bez informowania Cię zapisują dokumenty w przeglądarce, a wiele obsługuje tylko podstawową składnię — bez tabel, list zadań i wzorów.

3. Podgląd na własnym serwerze

Statyczna aplikacja internetowa, którą hostujesz samodzielnie, łączy wygodę strony internetowej z pełną kontrolą: działa w Twojej domenie, wygląda tak samo dla całego zespołu, a Ty decydujesz, co może, a czego nie może robić. Szczegółowo opisujemy tę opcję w artykule jak hostować edytor Markdown na własnym serwerze.

Na co zwrócić uwagę w podglądzie Markdown

Nie każdy podgląd jest równie wygodny. Oto funkcje, które mają znaczenie, gdy korzystasz z niego codziennie:

• Natychmiastowe renderowanie. Podgląd powinien aktualizować się podczas pisania, bez przycisku „Renderuj” i bez zauważalnego opóźnienia.
• Synchroniczne przewijanie. W długim dokumencie podgląd musi podążać za edytorem, aby edytowany akapit był zawsze widoczny po prawej stronie.
• GitHub-Flavored Markdown. Tabele, listy zadań, przekreślenie, przypisy i ramki powinny wyglądać tak samo jak na GitHub. Jeśli nie wiesz, czym są, zajrzyj do ściągawki Markdown.
• Podświetlanie kodu dla języków, których używasz.
• Wzory i diagramy, jeśli piszesz dokumentację techniczną: wzory LaTeX i diagramy Mermaid.
• Otwieranie plików lokalnych. Przeciąganie i upuszczanie powinno działać dla pojedynczych plików, wielu plików i całych folderów — łącznie z obrazami, do których odwołuje się dokument.
• Eksport. Gdy dokument jest gotowy, zwykle potrzebujesz go jako HTML, PDF lub czysty plik .md.
• Przetwarzanie lokalne. Najlepiej, gdy tekst jest renderowany w przeglądarce i nigdy nie opuszcza Twojego komputera. Ma to znaczenie przy dokumentacji wewnętrznej, umowach, szkicach i notatkach.

Szybki sposób pracy z Markdown Preview Editor

Markdown Preview Editor to darmowy edytor open source zbudowany właśnie wokół tej listy. Oto typowa sesja.

Krok 1: Otwórz edytor

Otwórz wersję online lub własną kopię. Nie trzeba się rejestrować ani niczego instalować. Interfejs jest dostępny w 15 językach i automatycznie dopasowuje się do języka przeglądarki.

Krok 2: Otwórz pliki

Przeciągnij plik .md na edytor — albo kilka plików naraz, albo cały folder. Każdy dokument otwiera się we własnej karcie z własną historią cofania. Obrazy, audio i wideo upuszczone razem z dokumentem pojawiają się w podglądzie, ponieważ ścieżki względne są rozwiązywane na podstawie upuszczonego folderu.

Wolisz klawiaturę? Naciśnij Ctrl+O (⌘O na Macu), aby wybrać pliki, albo użyj przycisku Folder, aby otworzyć katalog.

Krok 3: Pisz z podglądem obok

Pisz w edytorze po lewej; podgląd po prawej aktualizuje się od razu i przewija razem z Tobą. Pasek formatowania wstawia nagłówki, listy, linki, tabele i bloki kodu. Rzadziej używane narzędzia — przypisy, ramki, wzory, diagramy — znajdują się w zwijanym rzędzie Edytor zaawansowany, więc pasek narzędzi pozostaje przejrzysty.

Przełączaj się jednym kliknięciem między trzema trybami widoku: tylko edytor, widok podzielony i tylko podgląd. Na telefonie układ dopasowuje się automatycznie, a pasek narzędzi chowa się, dopóki go nie potrzebujesz.

Krok 4: Zapisz lub wyeksportuj

Po skończeniu pracy zapisz dokument jako .md, wyeksportuj go jako samodzielny plik HTML lub wydrukuj do PDF. Artykuł o konwersji Markdown do HTML i PDF szczegółowo omawia te opcje.

Dokąd trafiają Twoje pliki?

W przypadku wielu narzędzi internetowych trudno stwierdzić, czy tekst jest wysyłany. Przydatny test: otwórz narzędzia deweloperskie przeglądarki, przejdź na kartę Sieć (Network) i zacznij pisać. Jeśli podczas pisania pojawiają się nowe żądania, Twój tekst może opuszczać stronę.

Markdown Preview Editor renderuje wszystko w przeglądarce. Otwierane pliki są odczytywane lokalnie, a dokumenty są przechowywane tylko w otwartej karcie, chyba że włączysz w ustawieniach opcję Zapamiętuj dokumenty. Zewnętrzne obrazy i linki w dokumencie nie są wczytywane, dopóki na nie nie zezwolisz, więc samo otwarcie pliku również nie łączy się z innymi serwerami.

Wskazówki dla wygodniejszego podglądu

• Trzymaj obrazy obok dokumentu w folderze images/ lub assets/ i linkuj je ścieżkami względnymi. Potem upuść cały folder, a wszystko się wyświetli.
• Używaj jednego nagłówka # na plik. Staje się on tytułem wyeksportowanego HTML i ułatwia nawigację po długich dokumentach.
• Włącz numery wierszy w ustawieniach, gdy pracujesz nad dokumentacją zespołowo — komentarze w stylu „wiersz 42” stają się łatwe do odnalezienia.
• Wieczorem używaj ciemnego motywu. Podgląd zmienia motyw razem z edytorem.