Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>10 фев 2023</li>

3 <li>0</li>

4 </ul>Гайд по работе с простым и популярным языком разметки, с помощью которого программисты пишут документацию, а блогеры форматируют посты.

5 Иллюстрация: Polina Vari для Skillbox Media

6 Журналист, изучает Python. Любит разбираться в мелочах, общаться с людьми и понимать их.

7 Язык разметки Markdown широко распространён в вебе. На нём пишут readme-файлы и документацию, а его принципы работы используют для оформления сообщений и публикаций в мессенджерах и социальных сетях.

8 Markdown легко конвертируется в HTML, открывается во всех текстовых редакторах и легко читается даже в виде исходного кода. При этом писать на нём куда проще, чем на других языках разметки: HTML, XML, TeX и так далее.

9 Гайд по синтаксису языка разметки Markdown

10 <ul><li><a>Диалекты и редакторы</a></li>

11 <li><a>Параграфы и разрывы строк (paragraphs and line breaks)</a></li>

12 <li><a>Заголовки (headings)</a></li>

13 <li><a>Выделение текста (emphasis)</a></li>

14 </ul><ul><li><a>Курсив (italic)</a></li>

15 <li><a>Жирный (bold)</a></li>

16 <li><a>Жирный курсив (bold and italic)</a></li>

17 <li><a>Зачёркнутый (strikethrough)</a></li>

18 <li><a>Подчёркнутый (underline)</a></li>

19 </ul><ul><li><a>Разделители (horizontal rules)</a></li>

20 <li><a>Цитаты (blockquotes)</a></li>

21 <li><a>Списки (lists)</a></li>

22 </ul><ul><li><a>Нумерованные (ordered)</a></li>

23 <li><a>Ненумерованные (unordered)</a></li>

24 <li><a>Чекбоксы (checkboxes)</a></li>

25 <li><a>Вложенные (nested)</a></li>

26 <li><a>Другие элементы внутри списков</a></li>

27 </ul><ul><li><a>Ссылки (links)</a></li>

28 <li><a>Картинки (images)</a></li>

29 <li><a>Вставка кода (code)</a></li>

30 <li><a>Таблицы (tables)</a></li>

31 <li><a>Экранирование (escaping characters)</a></li>

32 <li><a>Как использовать Markdown в мессенджерах</a></li>

33 <li><a>Резюмируем</a></li>

34 </ul>Базовым Markdown уже мало кто пользуется. Зато у него существуют спецификации и диалекты, которые добавляют в язык новые функции: встраивание HTML-тегов, создание таблиц и чекбоксов, зачёркивание текста, разные варианты переноса строки.

35 Разные редакторы Markdown могут поддерживать или не поддерживать часть новых функций - учтите это при выборе платформы, на которой будете работать.

36 Самый распространённый Markdown - диалект<a>GitHub Flavored Markdown</a>, основанный на спецификации<a>CommonMark</a>. В этой статье мы пользуемся редактором<a>Markdown Editor</a>, который поддерживает практически все инструменты этой парочки (кроме чекбоксов).

37 Чтобы поделить текст на параграфы, между ними нужно оставить пустую строку. Строка считается пустой, даже если в ней есть пробелы и табуляции. Если же строки находятся рядом, то они автоматически склеиваются в одну.

38 Первый параграф Второй параграф Продолжение второго параграфаОтображение результата в браузереСкриншот: Skillbox MediaДля переноса строки внутри одного параграфа есть три метода:

39 <ul><li>поставить в конце строки два или больше пробела ;</li>

40 <li>поставить в конце строки обратную косую черту \;</li>

41 <li>использовать HTML-тег .</li>

42 </ul>Перенос с помощью пробелов Перенос с помощью обратного слеша\ Перенос с помощью тега Последняя строкаОтображение результата в браузереСкриншот: Skillbox MediaОбратите внимание, что у каждого из методов есть свои недостатки:

43 <ul><li>пробелы в конце строки бывает трудно заметить, и это может запутать читателя;</li>

44 <li>обратный слеш вводится в стандарте CommonMark и может поддерживаться не всеми редакторами;</li>

45 <li>HTML-теги в Markdown также поддерживаются не всеми редакторами.</li>

46 </ul>В синтаксисе Markdown есть шесть уровней заголовков: от H1 (самого большого) до H6 (самого маленького). Для их выделения используют решётки #, при этом есть несколько тонкостей:

47 <ul><li>решётки можно ставить как перед заголовком, так и с двух сторон от него (на уровень заголовка влияют только те #, которые находятся перед ним);</li>

48 <li>количество решёток соответствует уровню заголовка: одна для первого уровня, две для второго и так далее;</li>

49 <li>между решёткой и текстом ставится пробел.</li>

50 </ul># Заголовок первого уровня ## Заголовок второго уровня ## ### Заголовок третьего уровня #### Заголовок четвёртого уровня # ##### Заголовок пятого уровня ############ ###### Заголовок шестого уровня Отображение заголовков в разных редакторах Markdown может различаться. Например, некоторые редакторы (как<a>Markdown Editor</a>, которым мы пользуемся) помещают под заголовки первого и второго уровня подчёркивание, а некоторые нет. Отображение результата в браузереСкриншот: Skillbox MediaУ заголовков первого и второго уровня есть альтернативный способ выделения: на следующей строке после них нужно поставить знаки равенства = или дефисы -. Вот несколько правил:

51 <ul><li>знак = применяется для заголовков H1;</li>

52 <li>дефис применяется для заголовков H2;</li>

53 <li>если в одной строке поставить оба знака, то работать ничего не будет;</li>

54 <li>можно ставить любое количество знаков, и на тип заголовка это не повлияет;</li>

55 <li>между заголовком и знаками не должно быть пустых строк.</li>

56 </ul>Заголовок первого уровня = Заголовок первого уровня ========= Заголовок второго уровня - Заголовок второго уровня ----------Отображение результата в браузереСкриншот: Skillbox MediaЧтобы изменить начертание текста, нужно выделить его с двух сторон спецсимволами следующим образом: <спецсимвол>текст<спецсимвол>.

57 Для выделения текста курсивом нужно использовать одну звёздочку * или нижнее подчёркивание _.

58 *Текст курсивом* _Текст курсивом_Скриншот: Skillbox MediaДля выделения текста жирным нужно использовать две звёздочки ** или два нижних подчёркивания __.

59 **Жирный текст** __Жирный текст__Отображение результата в браузереСкриншот: Skillbox MediaДля выделения текста сразу обоими стилями нужно использовать три звёздочки *** или три нижних подчёркивания ___.

60 ***Текст жирным курсивом*** ___Текст жирным курсивом___Отображение результата в браузереСкриншот: Skillbox MediaОбратите внимание, что если вы хотите выделить фрагмент внутри слова, то это корректно сработает только при использовании звёздочек.

61 Кор*рек*тно, кор**рек**тно, кор***рек***тно Некор_рек_тно, некор__рек__тно, некор___рек___тноОтображение результата в браузереСкриншот: Skillbox MediaЧтобы зачеркнуть текст, нужно использовать две тильды ~~. Такая опция есть только в диалекте GitHub Flavored Markdown.

62 ~~Зачёркнутый текст~~Отображение результата в браузереСкриншот: Skillbox MediaВ синтаксисе Markdown нет встроенного способа подчеркнуть текст. Но если ваш редактор поддерживает HTML, то можно использовать теги:

63 Подчёркнутый текстОтображение результата в браузереСкриншот: Skillbox MediaЧтобы оформить горизонтальный разделитель, нужно поставить три или больше специальных символа: звёздочки *, дефиса - или нижних подчёркивания _. Они должны находиться на отдельной строке, и между ними можно ставить любое количество пробелов и табуляций.

64 Если ваш редактор поддерживает HTML-теги, то для разметки можно также использовать тег <hr>.

65 *** --- ___ * * ** Отображение результата в браузереСкриншот: Skillbox MediaЧтобы параграф отобразился как цитата, нужно поставить перед ним закрывающую угловую скобку >.

66 > Оформление цитатой последовательных строк внутри одного параграфаОтображение результата в браузереСкриншот: Skillbox MediaВнутрь одного блока цитаты можно поместить сразу несколько параграфов и использовать любые элементы оформления. Например, заголовки и другие цитаты. Чтобы сделать это, нужно поместить закрывающую угловую скобку перед началом каждой строки.

67 > # Заголовок > Первый параграф > > Второй параграф > > > Вложенная цитата > > > Цитата третьего уровня > > Продолжение основной цитатыОтображение результата в браузереСкриншот: Skillbox MediaВ синтаксисе Markdown есть несколько видов списков. Для их оформления перед каждым пунктом нужно поставить подходящий тег и отделить его от текста пробелом.

68 Для создания нумерованного списка перед пунктами нужно поставить число с точкой. При этом нумерация в разметке ленивая. Неважно, какие именно числа вы напишете: Markdown пронумерует список автоматически.

69 1. Первый пункт 2. Второй пункт 3. Третий пункт 1. Первый пункт 1. Второй пункт 1. Третий пункт 1. Первый пункт 73. Второй пункт 5. Третий пунктОтображение результата в браузереСкриншот: Skillbox MediaСписок можно начинать и не с единицы. Для нумерации важно только число, которое стоит перед первым пунктом.

70 27. Первый пункт 27. Второй пункт 27. Третий пунктОтображение результата в браузереСкриншот: Skillbox MediaОбратите внимание, что между двумя нумерованными списками, идущими подряд, нужно отбить две пустые строки. Если отбить только одну, то Markdown воспримет два списка как один. Некоторые редакторы в таком случае увеличивают интервал между пунктами.

71 1. Первый пункт 2. Второй пункт 3. Третий пункт 1. Четвёртый пункт 2. Пятый пункт 3. Шестой пунктОтображение результата в браузереСкриншот: Skillbox MediaДля создания ненумерованного списка нужно поставить перед каждым пунктом звёздочку *, дефис - или плюс +.

72 * Первый пункт * Второй пункт * Третий пункт - Первый пункт - Второй пункт - Третий пункт + Первый пункт + Второй пункт + Третий пунктОтображение результата в браузереСкриншот: Skillbox MediaОбратите внимание, что Markdown относит к разным спискам пункты, перед которыми стоят разные маркеры. Даже несмотря на то, что мы не оставляем пустых строк между списками.

73 Если же два списка идут подряд, а перед их пунктами стоят одинаковые маркеры, тогда между ними нужно отбить две пустые строки (как в случае с нумерованными списками).

74 Чтобы сделать чекбоксы, нужно использовать маркированный список, но между маркером и текстом поставить [x] для отмеченного пункта и [] - для неотмеченного.

75 Чекбоксы доступны в диалекте GitHub Flavored Markdown (тот самый, который умеет зачёркивать текст) и поддерживаются не всеми редакторами Markdown. Например, нам для демонстрации примера пришлось открывать другой.

76 - [x] Отмеченный пункт - [ ] Неотмеченный пунктОтображение результата в браузереСкриншот: Skillbox MediaЧтобы создать вложенный список, нужно поставить перед его пунктами табуляцию или несколько пробелов. В Markdown одна табуляция соответствует четырём пробелам.

77 Список одного вида можно вкладывать в любой другой.

78 1. Пункт 1. Подпункт 1. Подподпункт - Пункт - Подпункт - Подподпункт 1. Пункт - Подпункт * Подподпункт + Пункт 1. Подпункт - Пункт - [x] Отмеченный подпункт - [ ] Неотмеченный подпункт 1. ПодподпунктОтображение результата в браузереСкриншот: Skillbox MediaНа самом деле количество пробелов, которые нужно поставить для корректного отступа, рассчитывается чуть сложнее. Берётся количество символов в маркере (один для *, - и +, два для 1., три для 10.), и к нему прибавляется любое число от 1 до 4.

79 Таким образом, если в маркере 1 символ, нужно поставить от 2 до 5 пробелов, если 2 символа - от 3 до 6, если 3 символа - от 4 до 7.

80 В пункты списков можно добавлять другие элементы оформления. Например, параграфы или цитаты. Для этого нужно сделать отступ, как если бы вы добавляли вложенный список.

81 1. Первый пункт > Цитата внутри первого пункта 1. Второй пункт Параграф внутри второго пункта 1. Третий пунктОтображение результата в браузереСкриншот: Skillbox MediaСамый лёгкий способ поместить ссылку в Markdown - заключить её в угловые скобки. Несмотря на простоту, он не является основным и был добавлен только в спецификации CommonMark.

82 <https://skillbox.ru/media/code/>Отображение результата в браузереСкриншот: Skillbox MediaЧтобы оформить ссылкой часть текста, используется такой синтаксис: [текст](ссылка). Можно сделать всплывающую подсказку при наведении курсора. Для этого в круглых скобках после ссылки нужно поставить пробел и написать текст подсказки в кавычках.

83 [Skillbox Media](https://skillbox.ru/media/) без подсказки [Skillbox Media](https://skillbox.ru/media/ "Всплывающая подсказка") с подсказкойОтображение результата в браузереСкриншот: Skillbox MediaЕщё один способ оформить ссылку - справочный. Он работает как сноски в книгах: [текст][имя сноски]. При таком способе организации ссылок в конце документа нужно также написать и оформить саму сноску: [имя сноски]: ссылка. При желании после ссылки можно добавить подсказку - точно так же, как в предыдущем методе.

84 Имя сноски может быть любым сочетанием символов: цифрами, буквами и даже знаками препинания. На одну и ту же сноску в тексте можно ссылаться сколько угодно раз.

85 Ссылки, оформленные справочным методом, выглядят и работают точно так же, как и в предыдущем способе. Сами сноски в отформатированном документе не отображаются.

86 [Skillbox Media][1] [Раздел "Код"][code] [1]: https://skillbox.ru/media "Всплывающая подсказка" [code]: https://skillbox.ru/media/code/Отображение результата в браузереСкриншот: Skillbox MediaИзображения в Markdown оформляются по принципу, схожему с принципом оформления ссылкок, только перед квадратными скобками нужно поставить восклицательный знак: ![текст](путь к изображению). Здесь также можно сделать всплывающую подсказку.

87 ![Изображение](https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/1920px-Markdown-mark.svg.png "Логотип Markdown")Отображение результата в браузереСкриншот: Skillbox MediaМожно использовать и справочный метод: ![текст][имя сноски]. Сноски оформляются так же, как и в ссылках: [имя сноски]: путь к изображению, - в них тоже можно добавлять подсказки.

88 ![Изображение][1] [1]: https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/1920px-Markdown-mark.svg.png "Логотип Markdown"Такая разметка выведет тот же результат, что и предыдущая.

89 В Markdown есть несколько способов выделить исходный код:

90 <ul><li>Если надо отобразить фрагмент кода внутри строки с каким-то текстом, нужно с двух сторон выделить этот код одним или несколькими обратными апострофами (`; их ещё называют бэктиками).</li>

91 <li>Чтобы выделить фрагмент из нескольких строк, нужно с двух сторон выделить его тремя обратными апострофами.</li>

92 <li>Также перед фрагментом кода можно поставить табуляцию или четыре пробела, при этом предыдущая строка должна быть пустой.</li>

93 </ul>Функция `print (x)` выводит содержимое переменной ```x```. ``` #include <stdio.h> int main() { printf("Hello, World!"); return 0; } ``` let x = 12; let y = 6; console.log(x + y);Отображение результата в браузереСкриншот: Skillbox MediaЕсли обрамлять код тремя обратными апострофами, то после первой тройки можно указать язык программирования - тогда Markdown правильно подсветит элементы кода.

94 ```python if x > 0: print (x) else: print ('Hello, World!') ``` ```c #include <stdio.h> int main() { printf("Hello, World!"); return 0; } ``` ```javascript let x = 12; let y = 6; console.log(x + y); ```Отображение результата в браузереСкриншот: Skillbox MediaВозможность вставлять блоки кода тремя обратными апострофами появилась в спецификации CommonMark, но там не указан список псевдонимов: как правильно называть языки, чтобы Markdown понял, о чём речь.

95 Поэтому каждая реализация ведёт свой собственный список языков и их псевдонимов. Так как их очень много, да ещё и новые время от времени добавляются, то удобных таблиц обычно не делают. Предлагают сразу ознакомиться с конфигурационным файлом.

96 Вот такой<a>список языков</a>, например, поддерживает диалект GitHub Flavored Markdown.

97 В уже упомянутом выше диалекте GitHub Flavored Markdown (и некоторых других тоже) есть возможность оформлять таблицы. Столбцы разделяются вертикальными линиями |, а строка с шапкой отделяется от остальных дефисами -, которых можно ставить сколько угодно.

98 |Столбец 1|Столбец 2|Столбец 3| |-|--------|---| |Длинная запись в первом столбце|Запись в столбце 2|Запись в столбце 3| |Кртк зпс| |Слева нет записи|Отображение результата в браузереСкриншот: Skillbox MediaЧтобы выровнять весь столбец по правому краю, в строке с дефисами сразу после дефисов можно поставить двоеточие :. Чтобы выровнять содержимое по центру, надо поставить двоеточия с обеих сторон.

100 Вот список символов, которые нужно экранировать: \`*_{}[]<>()#+-.! |. Делать это постоянно необязательно - достаточно ставить экран только в тех случаях, когда Markdown может воспринять эти символы как служебные. Например, если строка начинается с символа #, то экранировать её надо - потому что программа может решить, что вы хотите сделать заголовок. А вот если решётка находится где-то в центре строки, то экранировать ничего не надо - редактор поймёт, что тут она просто часть текста.

101 Как мы уже писали, принципы Markdown используются при разметке текста во многих мессенджерах. Обычно он используется для выделения текста, при этом синтаксис у каждой платформы свой.

102 Жирный:

103 <ul><li>Telegram и Discord - **две звёздочки с двух сторон**;</li>

104 <li>WhatsApp и Viber - *одна звёздочка с двух сторон*.</li>

105 </ul>Курсив:

106 <ul><li>Telegram - __два нижних подчёркивания с двух сторон__;</li>

107 <li>WhatsApp и Viber - _одно нижнее подчёркивание с двух сторон_;</li>

108 <li>Discord - *одна звёздочка с двух сторон* или _одно нижнее подчёркивание с двух сторон_.</li>

109 </ul>Подчёркнутый:

110 <ul><li>Discord - __два нижних подчёркивания с двух сторон__.</li>

111 </ul>Зачёркнутый:

112 <ul><li>WhatsApp и Viber - ~одна тильда с двух сторон~;</li>

113 <li>Discord - ~~две тильды с двух сторон~~.</li>

114 </ul>Моноширинный (используется для вставки кода):

115 <ul><li>Telegram, WhatsApp, Viber и Discord - ```три обратных апострофа с двух сторон```;</li>

116 <li>в Discord точно так же, как и в Markdown, можно указывать язык программирования для подсветки синтаксиса.</li>

117 </ul>Спойлер:

118 <ul><li>Telegram и Discord - ||две вертикальные черты с двух сторон||.</li>

119 </ul>Этой шпаргалки по разметке Markdown будет достаточно для создания полноценного документа. А там, где возможностей языка не хватит, можно встраивать HTML-код.

120 Синтаксис Markdown простой, гибкий и нетребовательный. У него есть несколько реализаций, благодаря которым в нём можно:

121 <ul><li>выделять параграфы и переносить строки,</li>

122 <li>оформлять заголовки,</li>

123 <li>изменять начертание текста,</li>

124 <li>ставить горизонтальные разделители,</li>

125 <li>выделять цитаты,</li>

126 <li>составлять списки,</li>

127 <li>прикреплять ссылки,</li>

128 <li>вставлять картинки и исходный код,</li>

129 <li>делать таблицы.</li>

130 </ul>И ещё одно небольшое примечание. Если вы форматируете текст с помощью HTML-тегов или форматируете код тремя обратными апострофами, то Markdown будет автоматически пытаться искать закрывающий символ - то есть будет придумывать, куда его поставить, даже если у вас его нет. Остальные симметричные символы (*_~`) работают в пределах одной строки.

131 <a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>