Przeglądarka Markdown online (MD Viewer)

Przeglądarka Markdown online – podgląd, spis treści i konwersja MD na HTML

Markdown jest prosty do pisania, dopóki nie musisz szybko sprawdzić, jak wyjdzie w HTML, czy nagłówki są po kolei albo gdzie zgubił się zamykający ```. Ta przeglądarka Markdown online pokazuje podgląd na żywo obok edytora: wklejasz tekst albo wczytujesz plik .md, a po chwili widzisz wyrenderowany dokument, spis treści, statystyki i listę problemów ze strukturą. Gotowy wynik kopiujesz jako Markdown lub HTML albo pobierasz jako plik .html. Bez logowania i bez instalowania edytora.

Co potrafi przeglądarka Markdown online

Jak używać przeglądarki Markdown online krok po kroku

1. Przeciągnij plik Markdown na pole u góry albo kliknij „wybierz go z dysku”. Możesz też po prostu wkleić tekst do edytora lub zacząć od jednego z przykładów.
2. Pisz i poprawiaj w lewym panelu. Podgląd po prawej odświeża się kilka dziesiątych sekundy po ostatnim naciśnięciu klawisza.
3. Pod edytorem sprawdź sekcję „Analiza dokumentu”: kafelki ze statystykami i listę uwag do struktury.
4. Przełącz widok na „Spis treści”, żeby przejrzeć nagłówki, odfiltrować je i skopiować spis w Markdown.
5. Gdy potrzebujesz kodu do CMS albo strony, kliknij „Kopiuj HTML” lub otwórz widok „Kod HTML” i pobierz plik .html.
6. Przycisk „Wyczyść” opróżnia edytor, gdy chcesz zacząć od nowa.

Widoki: edytor, podgląd, spis treści i kod HTML

Spis treści Markdown i kotwice nagłówków

Spis treści powstaje z nagłówków wyrenderowanego dokumentu, więc komentarze # w blokach kodu bash nie trafiają do niego jako nagłówki. Pole filtra przyjmuje fragment tytułu albo poziom (np. „instalacja” lub „H2”), a kliknięcie pozycji przewija podgląd do tej sekcji.

Pod spodem dostajesz gotowy spis w Markdown z kotwicami liczonymi jak na GitHubie: małe litery, bez interpunkcji, spacje zamienione na myślniki, polskie litery bez zmian. Pojedynczy tytuł H1 jest pomijany, a wcięcia odpowiadają poziomom nagłówków. Przykład dla dokumentu z dwiema sekcjami „Instalacja”:

Opcja „Enter = nowa linia” a wygląd README na GitHubie

W standardowym Markdownie pojedynczy Enter nie łamie linii: dwie kolejne linie tekstu łączą się w jeden akapit. Nowy akapit tworzy pusta linia, a twarde złamanie dwie spacje lub \ na końcu linii. Opcja „Enter = nowa linia” (domyślnie włączona) zamienia każdy Enter na <br>, tak jak w komentarzach i issues na GitHubie. Pliki README.md GitHub wyświetla bez tej zamiany, więc przed publikacją README wyłącz opcję i sprawdź, czy akapity nie posklejały się w jeden blok.

Kontrola struktury i statystyki dokumentu

Pod edytorem narzędzie wypisuje uwagi do struktury, oznaczone jako OK, Uwaga lub Problem:

• niezamknięty blok kodu ``` lub ~~~ z numerem linii, w której go otwarto (cała dalsza treść wyświetla się wtedy jako kod)
• brak nagłówków, brak tytułu H1 albo kilka nagłówków H1
• przeskoki poziomów, np. z H2 od razu do H4
• linki bez adresu lub z niedozwolonym adresem, np. javascript:
• obrazy bez tekstu alternatywnego

Słowa liczone są po usunięciu znaczników Markdown, a czas czytania przy tempie 200 słów na minutę. Dokument z 450 słowami to 450 / 200 × 60 = 135 s, czyli „~2 min 15 s”. Kafelek „Zadania” pokazuje postęp listy zadań GFM, np. „2 z 4” wykonanych.

Eksport: kopiuj Markdown lub HTML, pobierz plik .html

Najczęstszy scenariusz: piszesz w Markdown, sprawdzasz podgląd, a potem potrzebujesz HTML do CMS, maila, systemu ticketowego albo strony. Masz do tego trzy drogi:

• Kopiuj Markdown – przenosi aktualne źródło do schowka,
• „Kopiuj HTML” – kopiuje sam fragment HTML, bez <head>, do wklejenia w edytor kodu CMS,
• widok „Kod HTML” – oprócz fragmentu daje pełny dokument z meta viewport i prostym stylem do skopiowania lub pobrania jako dokument.html.

Bezpieczny render Markdown: co jest wspierane

Podgląd obsługuje składnię CommonMark i rozszerzenia GitHub Flavored Markdown. Surowy HTML wpisany w dokument (np. <script>, <details>, <img width>) jest pokazywany jako zwykły tekst, a linki javascript: tracą adres. Dzięki temu podgląd jest bezpieczny, ale plik z osadzonym HTML-em wygląda tu inaczej niż na GitHubie.

Nie są obsługiwane rozszerzenia spoza GFM: diagramy Mermaid, wzory matematyczne i przypisy pokażą się jako zwykły tekst lub blok kodu.

Przykłady zastosowań

• README, instrukcje wdrożeń i opisy endpointów: sprawdzasz wygląd i spis treści bez wypychania zmian do repozytorium.
• Notatki ze spotkań i plany sprintu: lista zadań pokazuje, ile punktów jest już zamkniętych.
• Artykuł pisany w Markdown, który ma trafić do CMS albo newslettera jako HTML.
• Plik .md otrzymany mailem, którego nie masz czym otworzyć: przeciągasz go na stronę i czytasz w widoku „Podgląd”.

Wczytaj własny plik albo zacznij od przykładowego README i od razu sprawdź podgląd, spis treści oraz kod HTML.