Шпаргалка зі Markdown
Markdown — це набір угод для написання відформатованого тексту в простому файлі, і його привабливість в тому, що вихідний текст залишається читаним навіть без відповідного оформлення. Синтаксис нижче згрупований за тим, що вам потрібно зробити, і кожен рядок показує точний HTML, що він виробляє.
Ці HTML-фрагменти не набирались вручну. Кожен із них — це справжній вихід власного конвертера Markdown на цьому сайті, порівняний з таблицею набором тестів при кожній збірці — тож якби рядок коли-небудь не збігався з інструментом, збірка не вдалася б, а не показала б помилкову інформацію.
Діалект — це CommonMark плюс розширення GitHub, що є майже універсальними: таблиці, контрольні списки й закреслення. Виносок, списки визначень і директиви навмисно відсутні, тому що документування синтаксису, який потім не працює в конвертері на один клік далі, гірше, ніж його опускання.
Емфаза й вбудований код
9Вбудований синтаксис працює всередину абзаців, заголовків, позицій списків й клітинок таблиці.
| Синтаксис | Що це робить | HTML виробляється |
|---|---|---|
| *italic* | Курсив | <p><em>italic</em></p> |
| _italic_ | Курсив, альтернативна формаІгнорується всередину слова, тож snake_case виживає. | <p><em>italic</em></p> |
| **bold** | Напівжир | <p><strong>bold</strong></p> |
| __bold__ | Напівжир, альтернативна форма | <p><strong>bold</strong></p> |
| ***both*** | Напівжир й курсив разом | <p><em><strong>both</strong></em></p> |
| ~~gone~~ | Закреслення | <p><del>gone</del></p> |
| `code` | Вбудований код — нічого всередину не інтерпретується | <p><code>code</code></p> |
| ``a ` b`` | Вбудований код, що містить зворотний слешВикористовуйте більше зворотних лапок зовні, ніж з'являється всередину. | <p><code>a ` b</code></p> |
| \*not italic\* | Літеральна зірочка замість емфази | <p>*not italic*</p> |
Заголовки
7Форма хеша — це форма для використання; форма підкреслення досягає лише двох рівнів.
| Синтаксис | Що це робить | HTML виробляється |
|---|---|---|
| # Heading | Заголовок рівня 1 | <h1>Heading</h1> |
| ## Heading | Заголовок рівня 2 | <h2>Heading</h2> |
| ### Heading | Заголовок рівня 3 | <h3>Heading</h3> |
| ###### Heading | Заголовок рівня 6 — найглибший, що є | <h6>Heading</h6> |
| Heading ======= | Заголовок рівня 1, форма підкреслена | <h1>Heading</h1> |
| Heading ------- | Заголовок рівня 2, форма підкреслена | <h2>Heading</h2> |
| ## Heading ## | Кінцеві хеші — це прикраса й скидаютьсяКількість праворуч ігнорується; лише ліва встановлює рівень. | <h2>Heading</h2> |
Списки
7Відступ на два пробіли для гнізда. Порожній рядок між позиціями робить кожен абзацом.
| Синтаксис | Що це робить | HTML виробляється |
|---|---|---|
| - one - two | Маркований список | <ul> <li>one</li> <li>two</li> </ul> |
| * one * two | Маркований список, альтернативний маркер | <ul> <li>one</li> <li>two</li> </ul> |
| 1. one 2. two | Нумерований список | <ol> <li>one</li> <li>two</li> </ol> |
| 1. one 1. two | Також нумерований список, перенумерований при рендерингуВикористовується лише перше число; решта можуть бути всі 1. | <ol> <li>one</li> <li>two</li> </ol> |
| - one - nested | Гніздований список — відступ дитячого на два пробіли | <ul> <li>one <ul> <li>nested</li> </ul></li> </ul> |
| - [ ] todo | Невідзначена позиція контрольного списку | <ul> <li><input type="checkbox" disabled /> todo</li> </ul> |
| - [x] done | Відзначена позиція контрольного списку | <ul> <li><input type="checkbox" checked disabled /> done</li> </ul> |
Посилання й зображення
6| Синтаксис | Що це робить | HTML виробляється |
|---|---|---|
| [text](https://a.co) | Посилання | <p><a href="https://a.co">text</a></p> |
| [text](https://a.co "Tip") | Посилання з назвою підказки | <p><a href="https://a.co" title="Tip">text</a></p> |
| <https://a.co> | Гола URL перетворена на посилання | <p><a href="https://a.co">https://a.co</a></p> |
| [mail](mailto:[email protected]) | Посилання електронної пошти | <p><a href="mailto:[email protected]">mail</a></p> |
|  | Зображення з альтернативним текстом | <p><img src="cat.png" alt="alt" /></p> |
| [x](javascript:alert(1)) | Небезпечна схема — посилання скидається, текст залишаєтьсяjavascript:, data: й vbscript: URL втрачають їх href. | <p>x</p> |
Блокові елементи
9Кожен із них повинен починатись на початку рядка.
| Синтаксис | Що це робить | HTML виробляється |
|---|---|---|
| > quoted | Блокова цитата | <blockquote> <p>quoted</p> </blockquote> |
| > > deeper | Гніздована блокова цитата | <blockquote> <blockquote> <p>deeper</p> </blockquote> </blockquote> |
| ``` code ``` | Вогородженний блок коду | <pre><code>code </code></pre> |
| ```js let a = 1; ``` | Вогородженний блок коду з класом мови для висвітлювання | <pre><code class="language-js">let a = 1; </code></pre> |
| code | Блок коду за чотирма пробілами відступу | <pre><code>code </code></pre> |
| --- | Горизонтальне правило | <hr /> |
| *** | Горизонтальне правило, альтернативна форма | <hr /> |
| one two | Розрив рядка всередину абзацуДва кінцеві пробіли. Невидиме в більшості редакторів, саме тому це часто не вдається. | <p>one<br /> two</p> |
| one two | Порожній рядок розділяє абзаци | <p>one</p> <p>two</p> |
Таблиці
4Рядок розмежувача — це те, що робить його таблицею. Вирівнювання встановлюється двокрапками в цьому рядку.
| Синтаксис | Що це робить | HTML виробляється |
|---|---|---|
| | a | b | | - | - | | 1 | 2 | | Таблиця — заголовок, рядок розмежувача, потім рядки тіла | |
| | :--- | | Вирівніти колону вліво в рядку розмежувача | |
| | :---: | | Центр колони | |
| | ---: | | Вирівняти колону вправо |