Список

Оглавление

Типы списков

Markdown поддерживает следующие типы списков:

нумерованный список;
ненумерованный список;
список определений.

Правила оформления:

Перед маркером списка могут присутствовать пробелы или табуляция.
После маркера списка требуется поставить либо пробел, либо табуляцию.

Ненумерованный список

Для маркеров ненумерованного списка можно использовать символы (*), (+), (-). Например:

* первый вариант разметки ненумерованного списка;

+ второй вариант разметки ненумерованного списка;

- третий вариант разметки ненумерованного списка.

Выбор одного из разрешённых символов не влияют на результирующий HTML код. В любом случае получится:

<ul>

<li>первый вариант разметки ненумерованного списка</li>

<li>второй вариант разметки ненумерованного списка</li>

<li>третий вариант разметки ненумерованного списка</li>

</ul>

Нумерованный список

Для нумерованного списка можно использовать цифры и точку после цифры. Например:

1. Пункт первый.

2. Пункт второй.

3. Пункт третий.

При публикации размеченный текст даст следующий HTML код:

<ol>

<li>Пункт первый.</li>

<li>Пункт второй.</li>

<li>Пункт третий.</li>

</ol>

Для нумерации пунктов списка важен лишь номер первой строки. Номера остальных строк списка не имеют значения. Пример «ленивой нумерации»:

1. Пункт первый.

1. Пункт второй.

1. Пункт третий.

При публикации размеченный текст даст следующий HTML код:

<ol>

<li>Пункт первый.</li>

<li>Пункт второй.</li>

<li>Пункт третий.</li>

</ol>

Пример продолжающейся нумерации:

45. Пункт сорок пятый.

123. Следующий пункт.

8. Следующий пункт.

При публикации размеченный текст даст следующий HTML код:

<li>Пункт сорок пятый.</li>

<li>Следующий пункт.</li>

</ol>

И этот код на веб странице отобразится как:

45. Пункт сорок пятый.

46. Следующий пункт.

47. Следующий пункт.

Нумерованный список может получиться в тексте неумышленно при сочетании в начале строки цифры с точкой.

Например, автор не предполагал оформлять это предложение как список:

2022. Что же произошло в этом году?

При публикации размеченный текст даст следующий HTML код:

<li>Что же произошло в этом году?</li>

</ol>

Вместо:

2022. Что же произошло в этом году?

Для того чтобы обойти подобную ситуацию, рекомендуется начать предложение с букв, а не цифр, а если ситуация безвыходная, использовать экранирование (обратную косую черту) перед точкой. Например, варианты заголовка из примера:

Год 2022. Что произошло?

Что произошло в 2022 году?

2022\. Что же произошло в этом году?

Список определений

Правила оформления списка определений:

поместите термин в первой строке;
в следующей строке наберите двоеточие (:), затем пробел, затем строку определения.

Пример однострочного определения понятия:

Первый термин

: Развёрнутое определение понятия.

В результате получится код HTML:

<dl>

<dt>Первый термин</dt>

<dd>Развёрнутое определение понятия.</dd>

</dl>

Пример многострочного определения понятия:

Второй термин

: Первая строка определения.

: Вторая строка пояснения.

В результате получится код HTML:

<dl>

<dt>Второй термин</dt>

<dd>Первая строка определения. </dd>

<dd>Вторая строка пояснения.</dd>

</dl>

Проверочный список

Проверочный или контрольный список позволяет показывать отметки, проверенные и непроверенные пункты списка.

Правила оформления проверочного списка:

1. Начните строку:

либо любым символом немаркированного списка;
либо цифрой с точкой маркированного списка.

2. Затем поставьте квадратные скобки:

и поместите внутри пробел для непроверенного пункта списка;
и поместите заглавную или строчную латинскую букву X для проверенного пункта списка.

3. Завершите строку изложением пункта проверки (контроля).

Например:

[x] Выполненный (проверенный) пункт списка.

* [x] Выполненный (проверенный) подпункт списка.

[ ] Невыполненный (непроверенный) пункт списка.

* [ ] Невыполненный (непроверенный)подпункт списка.

В результате получится код HTML:

<ul>

<li class="xchecked-box">Выполненный (проверенный) пункт списка.

<ul>

<li class="xchecked-box">Выполненный (проверенный) подпункт списка.</li>

</ul></li>

</ul>

<ul>

<li class="unchecked-box">Невыполненный (непроверенный) пункт списка.

<ul>

<li class="xchecked-box">Невыполненный (непроверенный)подпункт списка.</li>

</ul></li>

</ul>

Оформление списка

Многоуровневый список

Для создания многоуровневого списка используются отступы или табуляция.

Пример ненумерованного списка:

* Первый уровень списка.

* Второй уровень списка. Табуляция или 4 пробела.

* Продолжение первого уровня списка.

* Второй уровень списка. Табуляция или 4 пробела.

* Третий уровень списка. Две табуляции или 8 пробелов.

В результате получится код HTML:

<ul>

<li>Первый уровень списка.</li>

<ul>

<li>Второй уровень списка. Табуляция или 4 пробела.</li>

</ul>

<li>Продолжение первого уровня списка.</li><ul>

<li>Второй уровень списка. Табуляция или 4 пробела.</li>

<ul>

<li>Третий уровень списка. Две табуляции или 8 пробелов.</li>

</ul>

Пример многоуровневого нумерованного списка:

1. Сделать отступ в 2 пробела после номера.

Сделать отступ в 4 пробела для продолжения текста первого пункта. Случай, когда требуется перенос текста.

2. Снова сделать отступ в 2 пробела после номера. Для продолжения нумерации.

1. Сделать отступ в 4 пробела для вложенной нумерации.

В результате получится код HTML:

<ol>

<li>1. Сделать отступ в 2 пробела после номера.</li>

<ol>

<li>Сделать отступ в 4 пробела для продолжения текста первого пункта. Случай, когда требуется перенос текста.</li>

</ol>

<li>Снова сделать отступ в 2 пробела после номера. Для продолжения нумерации.</li>

<ol>

<li>Сделать отступ в 4 пробела для вложенной нумерации.</li>

</ol>

🖇️ Совет. Если что-то выглядит не так, как ожидалось, проверьте, что сдвиг строки уровня списка оформлен либо как одна табуляция, либо как отступ в виде четырёх пробелов подряд.

Отступы в списке

Для удобочитаемости текста на этапе разметки в списки можно добавлять отступы.

Например:

* Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,

viverra nec, fringilla in, laoreet vitae, risus.

* Donec sit amet nisl. Aliquam semper ipsum sit amet velit.

Suspendisse id sem consectetuer libero luctus adipiscing.

Однако следует учитывать, что в публикации отступы не будут отображаться. Текст будет выглядеть как обычный ненумерованный список.

<ul>

<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,

viverra nec, fringilla in, laoreet vitae, risus.</li>

<li>Donec sit amet nisl. Aliquam semper ipsum sit amet velit.

Suspendisse id sem consectetuer libero luctus adipiscing.</li>

</ul>

Предложения в списке

Иногда требуется пункты списка отобразить в виде законченных предложений. В подобных случаях следует пункты списка разделить пустыми строками.

Пример ненумерованного списка:

* Первое предложение списка.

* Второе предложение списка.

При публикации в HTML предложение заключается в теги . Подобная конструкция конвертируется в следующий HTML код:

<ul>

<li>Первое предложение списка.</li>

<li>Второе предложение списка.</li>

</ul>

Пример нумерованного списка:

1. Первое предложение списка.

2. Второе предложение списка.

3. Третье предложение списка.

В результате получится код HTML:

<ol>

<li>Первое предложение списка.</li>

<li>Второе предложение списка.</li>

<li>Третье предложение списка.</li>

</ol>

Абзацы в списке

Пункт списка может состоять из нескольких абзацев текста. Для разметки подобного списка требуется:

абзацы разделять пустой строкой;
в каждый последующий абзац помещать отступ в 4 пробела или одну табуляцию.

Пример нумерованного списка с абзацами:

1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aliquam hendrerit mi posuere lectus.

Vestibulum enim wisi, viverra nec, fringilla in, laoreet

vitae, risus. Donec sit amet nisl. Aliquam semper ipsum

sit amet velit.

2. Suspendisse id sem consectetuer

libero luctus adipiscing.

В результате получится код HTML:

<ol>

<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.

Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. Donec sit amet nisl. Aliquam semper ipsum sit amet velit.

</li>

<li>Suspendisse id sem consectetuer libero luctus adipiscing.

</li>

</ol>

В ненумерованном списке для удобочитаемости следует вставлять отступ в каждый последующий абзац списка.

Пример отступа:

* Первый пункт ненумерованного списка.

Второй абзац первого пункта ненумерованного списка.

Строка с отступом второго абзаца.

* Второй пункт ненумерованного списка.

В результате получится код HTML:

<ul>

<li>Первый пункт ненумерованного списка.

Второй абзац первого пункта ненумерованного списка.

Строка с отступом второго абзаца.

Строка с отступом второго абзаца.

</li>

<li>Второй пункт ненумерованного списка.

</li>

</ul>

Цитаты в списке

В список допустимо помещать цитаты. Для этого:

цитату отделяют от пункта списка пустой строкой;
перед цитатой помещают отступ или табуляцию.

Пример цитаты в ненумерованном списке:

* Первый пункт ненумерованного списка.

> Строка цитаты.

>> Строка ответа цитаты.

> Строка цитаты.

* Второй пункт ненумерованного списка.

В результате получится код HTML:

<ul>

<li>Первый пункт ненумерованного списка.

Строка цитаты.

Строка ответа цитаты.

Строка цитаты.

</blockquote>

</li>

<li>Второй пункт ненумерованного списка.

</li>

</ul>

Код в списке

В список допустимо помещать блоки кода. Существует несколько способов разметки кода в списке.

Если требуется вставить одну простую строку кода или код не включает кавычек:

следует отделить код от строки списка пустой строкой;
вставить два отступа (8 пробелов) или две табуляции.

Пример вставки строки кода в ненумерованный список:

* Первый пункт ненумерованного списка.

<строка кода>

* Второй пункт ненумерованного списка.

В результате получится код HTML:

<ul>

<li>Первый пункт ненумерованного списка.

</code></pre>

</li>

<li>Второй пункт ненумерованного списка.

</li>

</ul>

Пример вставки однородного кода в нумерованный список:

1. Откройте файл.

2. В строке 21 найдите тег title:

<html>

<head>

</head>

3. Вместо заместителя Test введите название своего сайта.

В результате получится код HTML:

<ol>

<li>Откройте файл.</li>

<li>В строке 21 найдите тег title:

<head>

</head>

</code></pre>

</li>

<li>Вместо заместителя Test введите название своего сайта.

</li>

</ol>

Если необходимо вставить сложный по структуре код или достаточно длинную строку кода:

следует отделить код от строки списка пустой строкой;
вставить один отступ или одну табуляцию;
в начале и конце строки кода поместить последовательность символов ```.

Пример разметки строки кода в ненумерованном списке:

* Первый пункт ненумерованного списка.

```Длинная и <сложно структурированная> строка кода.```

* Второй пункт ненумерованного списка.

В результате получится код HTML:

<ul>

<li>Первый пункт ненумерованного списка.

<code>Длинная и <сложно структурированная> строка кода.</code>

</li>

<li>Второй пункт ненумерованного списка.

</li>

</ul>

Если требуется в список вставить несколько строк кода с указанием языка, на котором написан этот код:

следует отделить код от строки списка пустой строкой;
вставить четыре отступа или одну табуляцию;
в начале и конце блока кода поместить последовательность символов ```;
в начале блока кода после последовательности символов ``` следует указать язык, на котором написан код.

Пример разметки блока кода HTML в ненумерованном списке:

* Первый пункт ненумерованного списка.

```html

<li>Пункт первый.</li>

<li>Пункт второй.</li>

<li>Пункт третий.</li>

</ol>

</div>

```

* Второй пункт ненумерованного списка.

В результате получится код HTML:

<ul>

<li>Первый пункт ненумерованного списка.

<li>Пункт первый.</li>

<li>Пункт второй.</li>

<li>Пункт третий.</li>

</ol>

</div>

</code></pre>

</li>

<li>Второй пункт ненумерованного списка.

</li>

</ul>