Podgląd Markdown

Podgląd Markdown jako HTML w czasie rzeczywistym.

Programista

O podglądzie Markdown

Markdown to lekki język znaczników używany w plikach README, dokumentacji i komentarzach. To narzędzie renderuje Twój Markdown do HTML w czasie rzeczywistym, abyś mógł zobaczyć, jak będzie wyglądał. Parsowanie odbywa się w przeglądarce za pomocą biblioteki marked — nic nie jest wysyłane na serwer.

Jak używać Markdown Preview

  1. Wpisz lub wklej swoją zawartość Markdown do edytora Markdown po lewej stronie.
  2. Panel Podgląd po prawej aktualizuje się w czasie rzeczywistym, pokazując, jak Twój Markdown renderuje się jako HTML.
  3. Używaj standardowej składni Markdown: # dla nagłówków, **pogrubienie** dla pogrubienia, *kursywa* dla kursywy, [tekst](url) dla linków itp.
  4. Sprawdź podgląd, aby zweryfikować formatowanie, a następnie skopiuj swój Markdown do docelowej platformy.

Kluczowe funkcje

  • Podgląd na żywo w czasie rzeczywistym — wyrenderowany HTML aktualizuje się natychmiast podczas pisania Markdown.
  • Pełna obsługa Markdown — nagłówki, pogrubienie, kursywa, przekreślenie, linki, obrazy, listy, bloki kodu, cytaty i tabele.
  • Zgodność z GFM — obsługuje rozszerzenia GitHub Flavored Markdown, w tym tabele i listy zadań.
  • Ochrona przed XSS — renderowany HTML jest sanityzowany za pomocą DOMPurify, co zapobiega wstrzykiwaniu skryptów z niezaufanych danych wejściowych.
  • Prywatność w przeglądarce — całe renderowanie odbywa się lokalnie w Twojej przeglądarce. Twoja treść nigdy nie opuszcza urządzenia.
  • Bez rejestracji — zacznij pisać i przeglądać natychmiast, bez zakładania konta.

Kiedy używać tego narzędzia

  • Tworzenie plików README.md dla repozytoriów GitHub lub GitLab i sprawdzanie formatowania.
  • Pisanie dokumentacji lub wpisów blogowych w Markdown i weryfikacja wyrenderowanego wyniku.
  • Nauka składni Markdown z natychmiastową wizualną informacją zwrotną o renderowaniu każdego elementu.
  • Podgląd zawartości Markdown przed wklejeniem na platformy takie jak Notion, Jira lub Confluence.
  • Szybkie sprawdzanie renderowania fragmentów Markdown udostępnionych w przeglądach kodu lub czacie.

Szczegóły techniczne

Narzędzie wykorzystuje bibliotekę JavaScript marked do parsowania Markdown, która implementuje specyfikację CommonMark z rozszerzeniami dla GitHub Flavored Markdown (GFM). Markdown jest parsowany do ciągu HTML, a następnie przepuszczany przez DOMPurify w celu usunięcia potencjalnie niebezpiecznych elementów (tagi script, obsługa zdarzeń itp.) przed wyrenderowaniem w panelu podglądu. Ten krok sanityzacji sprawia, że narzędzie jest bezpieczne do wklejania niezaufanego Markdown z zewnętrznych źródeł. Podgląd aktualizuje się przy każdym naciśnięciu klawisza za pomocą funkcji renderowania z debounce'em dla płynnej wydajności. Bloki kodu obsługują podstawowe podświetlanie składni dla popularnych języków. Narzędzie działa całkowicie po stronie klienta, bez komunikacji z serwerem.

Podsumowanie

Markdown Preview zapewnia szybki, prywatny i intuicyjny sposób pisania i podglądu Markdown z renderowaniem w czasie rzeczywistym. Niezależnie od tego, czy tworzysz dokumentację, piszesz wpisy blogowe, czy uczysz się składni Markdown, to narzędzie przeglądarkowe zapewnia natychmiastową wizualną informację zwrotną bez zależności od serwera.

Najczęściej zadawane pytania

Jakie funkcje Markdown są obsługiwane?
Nagłówki, pogrubienie/kursywa, listy, linki, obrazy, bloki kodu, cytaty i tabele. Narzędzie używa biblioteki marked do parsowania.
Czy moje dane są wysyłane na serwer?
Nie. Parsowanie i renderowanie odbywają się wyłącznie w przeglądarce. Twój tekst nigdy nie opuszcza urządzenia.
Czy podgląd jest bezpieczny dla niezaufanych danych?
Podgląd sanityzuje renderowany HTML za pomocą DOMPurify, więc skrypty i niebezpieczne znaczniki są usuwane. Zmniejsza to ryzyko XSS przy wklejaniu Markdown z niezaufanych źródeł.
Czy mogę używać tego do plików README na GitHubie?
Tak. Narzędzie obsługuje GitHub Flavored Markdown (GFM), więc podgląd jest zbliżony do tego, jak Twój plik README.md będzie wyglądał na GitHubie. Jednak niektóre funkcje specyficzne dla GitHuba (jak automatyczne linkowanie zgłoszeń) mogą nie być obsługiwane.