Шпаргалка по 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:a@b.co) | Ссылка электронной почты | <p><a href="mailto:a@b.co">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 | | Таблица — заголовок, строка разделителя, затем строки тела | |
| | :--- | | Влево выровняйте столбец в строке разделителя | |
| | :---: | | Центр столбца | |
| | ---: | | Выровняйте столбец вправо |