Menu

Edytor Markdown

Pisz w Markdownie z podglądem na żywo obok.

Autor: Nethanel Bar, Co-founder & CEO

Ostatnia aktualizacja

Chcesz naprawdę nauczyć się programować?

Coddy uczy cię przez pisanie prawdziwego kodu w przeglądarce: interaktywne lekcje, natychmiastowa informacja zwrotna i pomoc AI, gdy utkniesz.

Czym jest edytor Markdown?

Edytor Markdown to środowisko do pisania z dwoma panelami: po jednej stronie wpisujesz zwykły tekst w Markdown, a po drugiej na żywo aktualizuje się wyrenderowany podgląd. W tym formacie powstają pliki README na GitHubie, portale z dokumentacją, generatory stron statycznych, platformy blogowe, aplikacje do notatek takie jak Obsidian oraz komunikatory takie jak Discord i Slack.

Cała idea Markdown polega na tym, że jest czytelny jako zwykły tekst, a po wyrenderowaniu staje się uporządkowanym HTML. Mniej czasu poświęcasz na walkę z paskami formatowania, a więcej na samo pisanie. Właśnie dlatego wolą go autorzy dokumentacji technicznej i programiści.

Większość nowoczesnych edytorów Markdown obsługuje *GitHub-Flavored Markdown* (GFM), który do oryginalnej specyfikacji CommonMark dodaje tabele, listy zadań, bloki kodu z oznaczeniem języka, automatyczne linki i przekreślenie.

Czego nauczysz się, korzystając z edytora Markdown

  • Markdown to zwykły tekst: czytelny w edytorze *i* możliwy do wyrenderowania jako HTML, bez paska narzędzi i ukrytego formatowania.
  • Nagłówki, listy, linki i wyróżnienia pokrywają 90% typowego pisania. Tabele i bloki kodu pokrywają większość pozostałych 10%.
  • Bloki kodu z oznaczeniem języka (```js, ```python) włączają kolorowanie składni w wielu rendererach.
  • Markdown jest zamieniany na HTML w momencie renderowania. To samo źródło daje spójny wynik wszędzie tam, gdzie działa renderer CommonMark/GFM.

Jak korzystać z edytora Markdown krok po kroku

  1. Zacznij pisać w lewym panelu

    Używaj # do nagłówków, * lub _ do wyróżnień, - do list. Prawy panel aktualizuje się w trakcie pisania.

  2. Dodaj strukturę

    Wstaw nagłówki, bloki kodu i tabele, żeby uporządkować dokument. Większość edytorów ma skróty klawiszowe (Ctrl+B, Ctrl+I) do najczęstszego formatowania.

  3. Sprawdź wyrenderowany HTML

    Porównaj podgląd na żywo ze źródłem. Jeśli coś nie wyświetla się tak, jak oczekujesz, w źródle zwykle brakuje pustej linii albo blok kodu nie jest poprawnie zamknięty.

  4. Skopiuj lub pobierz

    Skopiuj źródło Markdown do swojego README albo skopiuj HTML do e-maila, CMS-a lub dowolnego miejsca, które nie obsługuje Markdown.

Ściąga ze składni Markdown

Te 80% Markdown, których używasz na co dzień. Resztę znajdziesz w wyszukiwarce. Specyfikacje: CommonMark i GitHub-Flavored Markdown.

ElementMarkdownWynik
Nagłówek 1# TitleNagłówek najwyższego poziomu
Nagłówek 2## SectionNagłówek sekcji
Pogrubienie**strong****strong**
Kursywa*emphasis* lub _emphasis_*emphasis*
Kod w linii`code`code
Blok koduOtocz kod potrójnymi grawisami, opcjonalnie z oznaczeniem językaBlok z kolorowaniem składni
Link[label](https://example.com)Klikalny link
Obraz![alt](url)Osadzony obraz
Lista- itemLista punktowana
Lista numerowana1. itemLista uporządkowana
Lista zadań (GFM)- [x] doneZaznaczone pole wyboru
Tabela (GFM)| a | b |\n|---|---|\n| 1 | 2 |Tabela z dwiema kolumnami
Cytat> quoteWcięty cytat

Przykłady Markdown do wypróbowania

Typowy początek README

Źródło
# Project Name
A short description in one or two sentences.
## Install
```bashnpm install project-name```
## Quick start
- Step 1- Step 2- Step 3

Nagłówek, akapit, polecenie instalacji w bloku kodu i lista punktowana: to szkielet każdego dobrego README.

Tabele (w stylu GitHub)

Źródło
| Feature | Free | Pro ||---------|:----:|:---:|| Editor  |  ✓   |  ✓  || Export  |      |  ✓  |

Pionowe kreski (|) oddzielają kolumny. Linia z myślnikami oddziela nagłówek, a znaki : ustawiają wyrównanie (do lewej, do środka, do prawej). Tabele GFM nie wymagają dokładnych szerokości kolumn, liczy się tylko struktura.

Lista zadań

Źródło
- [x] Draft the post- [x] Add screenshots- [ ] Publish

GitHub wyświetla je jako interaktywne pola wyboru w zgłoszeniach (issues) i PR-ach. Przydają się jako listy kontrolne w dokumencie i do prostego śledzenia projektu.

Częste błędy w Markdown

  • Brak pustych linii wokół list, tabel i bloków kodu. Większość rendererów potrzebuje pustej linii, żeby zacząć nowy blok.
  • Mieszanie tabulatorów i spacji w liście: niektóre renderery po cichu psują wcięcia.
  • Wstawianie surowego HTML do bloku kodu w oczekiwaniu, że się wyrenderuje. Bloki kodu są *dosłowne* i właśnie o to w nich chodzi.
  • Zakładanie, że każdy Markdown jest taki sam. CommonMark, GFM i inne odmiany różnią się w subtelnych szczegółach (łamanie linii, automatyczne linki, osadzony HTML).
  • Używanie > do wcięć zamiast do cytatów. > *oznacza* cytat, więc do wcięć wybierz inny sposób.

Edytor Markdown: FAQ

Co to jest Markdown?
Markdown to lekki język znaczników, który zamienia prostą składnię tekstową (# heading, **bold**, [link](url)) na sformatowany HTML. Został zaprojektowany tak, żeby był czytelny również w postaci źródłowej.
Jak zamienić Markdown na HTML?
Wklej swój Markdown do edytora Markdown i skopiuj wyrenderowany HTML albo użyj konwertera, np. marked, markdown-it lub pandoc. Większość generatorów stron statycznych robi to automatycznie podczas budowania.
Czym różni się Markdown od GitHub-Flavored Markdown?
GitHub-Flavored Markdown (GFM) dodaje do standardowego Markdown tabele, bloki kodu z oznaczeniem języka, listy zadań, automatyczne linki i przekreślenie. Tego dialektu używają GitHub, GitLab i wiele platform z dokumentacją.
Czy mogę używać HTML w Markdown?
Tak, większość rendererów przepuszcza surowy HTML. Przydaje się do osadzania elementów, których Markdown nie obsługuje natywnie (własne układy, tagi wideo), ale wiąże dokument z wynikiem w HTML.
Czy edytor Markdown jest prywatny?
Tak. Edytor Coddy renderuje Markdown w całości w przeglądarce, a twój tekst nie jest nigdzie wysyłany.

Dowiedz się więcej

Inne narzędzia dla programistów

Ilustracja języków programowania w Coddy

Ucz się programowania z Coddy

ZACZNIJ