Czym jest Podgląd Markdown?
Markdown to lekka składnia formatowania stojąca za plikami README, wpisami na blogu, wiadomościami czatu, dokumentacją i niezliczonymi innymi miejscami, w których chcesz prostego, czytelnego formatowania bez pisania surowego HTML. Ponieważ Markdown to zwykły tekst, łatwo go pisać wszędzie — ale równie łatwo jest lekko pomylić składnię i nie zauważyć tego, dopóki już nie opublikujesz treści.
Ten podgląd renderuje Twój Markdown w miarę pisania, obok źródła, dzięki czemu możesz od razu wychwycić błędy formatowania — brakującą spację po #, niezamknięty blok ogrodzenia kodu lub listę, która nie oddzieliła się od akapitu powyżej — zanim zatwierdzisz plik README, opublikujesz wpis lub wyślesz sformatowaną wiadomość.
Kiedy używać tego kalkulatora
- Pisanie README GitHub lub GitLab i chęć sprawdzenia formatowania przed zatwierdzeniem
- Opracowywanie posta Markdown dla platformy blogowej, strony dokumentacji lub wiki
- Sprawdzanie czy e-mail lub wiadomość czat w Markdown renderuje się poprawnie przed wysłaniem
- Nauka składni Markdown poprzez eksperymentowanie z różnym formatowaniem i widzenie natychmiastowych wyników
- Konwersja krótkiego fragmentu Markdown do HTML w celu wklejenia do CMS lub szablonu e-mail
- Debugowanie dokumentu Markdown, w którym niektóre formatowanie nie renderuje się zgodnie z oczekiwaniami
Kroki:
- Wpisz lub wklej swój Markdown w lewym panelu.
- Obserwuj, jak podgląd renderowanego HTML aktualizuje się natychmiast po prawej stronie.
- Dostosuj swoją składnię, aż podgląd będzie odpowiadał temu, co zamierzałeś.
- Skopiuj gotowe źródło Markdown, gdy będziesz zadowolony z wyniku.
Wzór
# Nagłówek →
Nagłówek
**pogrubienie** → pogrubienie *kursywa* → kursywa `kod` →kod
[tekst](url) → tekst
- element → - element
Przypadki użycia
- Podgląd pliku README z GitHub lub GitLab przed jego commitem
- Tworzenie sformatowanych wiadomości dla Slack, Discord lub innych aplikacji czatu obsługujących Markdown
- Sprawdzanie formatowania wpisu na blogu lub dokumentacji przed publikacją
- Nauka składni Markdown poprzez eksperymentowanie i natychmiastowe obserwowanie wyników
- Szybkie konwertowanie krótkiego fragmentu Markdown na HTML w celu wklejenia go gdzie indziej
Kluczowe korzyści
- Zobacz swój Markdown renderowany natychmiast, obok źródła
- Wychwytuj błędy składni, zanim opublikujesz treść gdziekolwiek
- Działa całkowicie offline w Twojej przeglądarce — nic nie jest przesyłane
- Darmowe, bez rejestracji, bez limitu rozmiaru pliku dla typowego użycia
Wskazówki
- Dodaj pustą linię przed i po listach oraz blokach kodu dla najbardziej niezawodnego renderowania w różnych parserach Markdown
- Używaj podwójnych gwiazdek dla pogrubienia i pojedynczych gwiazdek (lub podkreśleń) dla kursywy, aby uniknąć niejednoznaczności
- Podglądaj najpierw w tym narzędziu, a następnie sprawdź docelową platformę (GitHub, Slack itp.), ponieważ niektóre obsługują dodatkową składnię, np. tabele
- Zachowuj sekwencyjność nagłówków (nie przeskakuj z # do ###) dla lepszej struktury dokumentu i dostępności
Częste błędy
- Zapominanie o pustej linii potrzebnej między akapitem a następującą po nim listą
- Pominięcie spacji po symbolach # w nagłówkach, co uniemożliwia ich renderowanie
- Pozostawienie niezamkniętego bloku ogrodzenia kodu (```), co pochłania resztę dokumentu jako kod
- Używanie pojedynczych gwiazdek dla pogrubienia zamiast podwójnych, co daje kursywę zamiast pogrubienia
Kluczowe pojęcia
- CommonMark: Standaryzowana specyfikacja składni Markdown, zaprojektowana w celu zmniejszenia niespójności
- GFM: GitHub-Flavored Markdown, rozszerzony dialekt obsługujący tabele i listy zadań
- Ogrodzenie kodu: Blok ograniczony potrójnymi znakami backtick (```), używany do formatowania wielowierszowego kodu
- Formatowanie wewnątrzwierszowe: Formatowanie stosowane w obrębie jednej linii, takie jak *kursywa* czy `kod`, w przeciwieństwie do elementów blokowych
Powiązane pojęcia
- Formatator JSON
- Tester regex
- Generator haseł
- Konwerter kolorów
- Koder/dekoder URL
Przykład
Wpisanie "## Cześć
To jest **pogrubione** a to jest *kursywa*." renderuje się jako nagłówek poziomu 2, po którym następuje akapit z pogrubionym i kursywnym tekstem.
Interpretacja wyników
Lewy panel pokazuje surowy tekst źródłowy Markdown, a prawy renderuje go w czasie rzeczywistym jako sformatowany HTML. Każde naciśnięcie klawisza natychmiast aktualizuje podgląd, więc możesz od razu zobaczyć efekt każdego elementu składni.
Typowe problemy z renderowaniem zwykle wynikają ze spacji. Większość rendererów wymaga pustej linii między akapitem a następującą po nim listą. Nagłówki wymagają spacji po symbolach #. Ogrodzenia kodu (```) muszą znajdować się w osobnej linii, aby uruchomić renderowanie bloku kodu.
Podgląd jest bliskim przybliżeniem tego, jak Twój Markdown będzie wyglądać na większości platform (GitHub, Slack, Discord itp.), ale każda platforma ma własny renderer z drobnymi różnicami. W przypadku wszystkiego, co wykracza poza podstawowe formatowanie, zawsze wykonaj ostateczną kontrolę na platformie docelowej.