Ściągawka Markdown
Markdown to zbiór konwencji pisania sformatowanego tekstu w zwykłym pliku, a jego atrakcyjność polega na tym, że źródło pozostaje czytelne nawet gdy nic go nie renderuje. Poniższa składnia jest pogrupowana według tego, co próbujesz zrobić, a każdy wiersz pokazuje HTML, który faktycznie produkuje.
Te fragmenty HTML nie są wpisywane ręcznie. Każdy z nich to rzeczywiste wyjście konwertera Markdown tego serwisu, porównane z tabelą przez zestaw testów przy każdej kompilacji — więc jeśli wiersz i narzędzie byłyby niezgodne, kompilacja by się nie powiodła, zamiast że strona cię oszukuje.
Dialekt to CommonMark plus rozszerzenia GitHub, które są niemal uniwersalne: tabele, listy zadań i przekreślenie. Przypisy, listy definicji i dyrektywy są celowo nieobecne, ponieważ dokumentowanie składni, która następnie nic nie robi w konwerterze jeden klik dalej, jest gorsze niż jej pominięcie.
Podkreślenie i kod inline
9Składnia Inline pracuje wewnątrz akapitów, nagłówków, elementów listy i komórek tabeli.
| Składnia | Czego to dotyczy | HTML wyprodukowany |
|---|---|---|
| *italic* | Kursywa | <p><em>italic</em></p> |
| _italic_ | Kursywa, alternatywna formaIgnorowane wewnątrz słowa, więc snake_case się utrzymuje. | <p><em>italic</em></p> |
| **bold** | Pogrubienie | <p><strong>bold</strong></p> |
| __bold__ | Pogrubienie, alternatywna forma | <p><strong>bold</strong></p> |
| ***both*** | Pogrubienie i kursywa razem | <p><em><strong>both</strong></em></p> |
| ~~gone~~ | Przekreślenie | <p><del>gone</del></p> |
| `code` | Kod inline — nic wewnątrz nie jest interpretowane | <p><code>code</code></p> |
| ``a ` b`` | Kod inline zawierający backtickUżyj więcej backticksa na zewnątrz niż pojawiają się wewnątrz. | <p><code>a ` b</code></p> |
| \*not italic\* | Dosłowna gwiazdka zamiast podkreślenia | <p>*not italic*</p> |
Nagłówki
7Forma hash to ta do użycia; forma podkreślenia osiąga tylko dwa poziomy.
| Składnia | Czego to dotyczy | HTML wyprodukowany |
|---|---|---|
| # Heading | Nagłówek poziomu 1 | <h1>Heading</h1> |
| ## Heading | Nagłówek poziomu 2 | <h2>Heading</h2> |
| ### Heading | Nagłówek poziomu 3 | <h3>Heading</h3> |
| ###### Heading | Nagłówek poziomu 6 — najgłębszy, jaki istnieje | <h6>Heading</h6> |
| Heading ======= | Nagłówek poziomu 1, forma podkreślona | <h1>Heading</h1> |
| Heading ------- | Nagłówek poziomu 2, forma podkreślona | <h2>Heading</h2> |
| ## Heading ## | Końcowe hashes są dekoracją i są opuszczaneLiczba po prawej jest ignorowana; tylko lewa ustawia poziom. | <h2>Heading</h2> |
Listy
7Wcięcie o dwie spacje do zagnieżdżenia. Pusty wiersz między elementami sprawia, że każdy jest akapitem.
| Składnia | Czego to dotyczy | HTML wyprodukowany |
|---|---|---|
| - one - two | Lista punktowana | <ul> <li>one</li> <li>two</li> </ul> |
| * one * two | Lista punktowana, alternatywny marker | <ul> <li>one</li> <li>two</li> </ul> |
| 1. one 2. two | Lista numerowana | <ol> <li>one</li> <li>two</li> </ol> |
| 1. one 1. two | Też lista numerowana, ponumerowana na renderzeTylko pierwszy numer jest używany; reszta może być całą 1. | <ol> <li>one</li> <li>two</li> </ol> |
| - one - nested | Zagnieżdżona lista — wcięcie dziecka o dwie spacje | <ul> <li>one <ul> <li>nested</li> </ul></li> </ul> |
| - [ ] todo | Niesprawdzony element listy zadań | <ul> <li><input type="checkbox" disabled /> todo</li> </ul> |
| - [x] done | Sprawdzony element listy zadań | <ul> <li><input type="checkbox" checked disabled /> done</li> </ul> |
Linki i obrazy
6| Składnia | Czego to dotyczy | HTML wyprodukowany |
|---|---|---|
| [text](https://a.co) | Łącze | <p><a href="https://a.co">text</a></p> |
| [text](https://a.co "Tip") | Łącze z tooltipem tytułu | <p><a href="https://a.co" title="Tip">text</a></p> |
| <https://a.co> | Nagi URL zamieniony w łącze | <p><a href="https://a.co">https://a.co</a></p> |
| [mail](mailto:a@b.co) | Łącze e-mail | <p><a href="mailto:a@b.co">mail</a></p> |
|  | Obraz, z tekstem alt | <p><img src="cat.png" alt="alt" /></p> |
| [x](javascript:alert(1)) | Niebezpieczny schemat — łącze jest upuszczane, tekst pozostajejavascript:, data: i vbscript: adresy URL tracą href. | <p>x</p> |
Elementy bloku
9Każdy z nich musi zacząć się na początku linii.
| Składnia | Czego to dotyczy | HTML wyprodukowany |
|---|---|---|
| > quoted | Blokowy cytat | <blockquote> <p>quoted</p> </blockquote> |
| > > deeper | Zagnieżdżony blokowy cytat | <blockquote> <blockquote> <p>deeper</p> </blockquote> </blockquote> |
| ``` code ``` | Blok kodu ogrodzony | <pre><code>code </code></pre> |
| ```js let a = 1; ``` | Blok kodu ogrodzony z klasą języka do podświetlenia | <pre><code class="language-js">let a = 1; </code></pre> |
| code | Blok kodu o cztery spacje wcięcia | <pre><code>code </code></pre> |
| --- | Reguła pozioma | <hr /> |
| *** | Reguła pozioma, alternatywna forma | <hr /> |
| one two | Przerwanie wiersza wewnątrz akapituDwie końcowe spacje. Niewidoczne w większości edytorów, dlatego tak często się nie powiodło. | <p>one<br /> two</p> |
| one two | Pusty wiersz oddziela akapity | <p>one</p> <p>two</p> |
Tabele
4Wiersz ogranicznika to to, co czyni go tabelą. Wyrównanie jest ustawiane przez okrężników w tym wierszu.
| Składnia | Czego to dotyczy | HTML wyprodukowany |
|---|---|---|
| | a | b | | - | - | | 1 | 2 | | Tabela — nagłówek, wiersz ogranicznika, a następnie wiersze treści | |
| | :--- | | Wyrównaj kolumnę do lewej, w wierszu ogranicznika | |
| | :---: | | Wyśrodkowuj kolumnę | |
| | ---: | | Wyrównaj kolumnę do prawej |