Спойлеры и скрываемый текст в Markdown (теги details и summary)

Зачем нужны спойлеры в документации и конспектах

В объемных учебных пособиях, отчетах и лабораторных руководствах часто нужно спрятать громоздкие листинги кода, длинные дампы логов или ответы на вопросы самопроверки (подобные спойлеры также активно применяются в шаблонах GitHub README с бейджами и спойлерами), чтобы читатель не пролистывал десятки экранов скролла.

Скрытый текст details в Markdown: базовый синтаксис

Чтобы организовать скрытый текст details markdown, используется нативная пара HTML5-тегов <details> и <summary>:

<details>
  <summary>Нажмите, чтобы увидеть подсказку к задаче №3</summary>

  Для решения используйте закон сохранения импульса в проекции на ось OX:
  $m_1 v_1 + m_2 v_2 = (m_1 + m_2) u$
</details>

Заголовок внутри <summary> остается видимым всегда и снабжается кликабельной стрелкой раскрытия, а основной контент прячется до нажатия мыши.

Как сделать спойлер в Markdown раскрытым по умолчанию

Разбирая вопрос, как сделать спойлер в markdown сразу развернутым при загрузке документа, достаточно добавить атрибут open: <details open>. Пользователь сможет свернуть блок, если он ему мешает.

Вложенность кода, списков и формул внутри спойлера

Обязательно делайте пустую строку после закрывающего тега </summary>! Если пустой строки нет, парсер может воспринять разметку Markdown (решетки заголовков, формулы TeX или сноски в тексте Markdown) как простой текст.

Практические советы