Интеграция чистого HTML-кода внутрь Markdown файлов

Можно ли писать HTML в Markdown: официальная спецификация

Один из самых частых вопросов у новичков — можно ли писать html в markdown напрямую? Ответ: однозначно да. Создатель Markdown Джон Грубер изначально спроектировал формат как надстройку над HTML. HTML-теги могут присутствовать в .md файле, но что из них останется, решает конкретная платформа.

• GitHub очищает HTML: атрибуты style, теги <iframe> и скрипты вырезаются.
• Markdown-проект Labkeeper показывает HTML-теги в превью, а при сохранении в PDF через печать браузера они попадают на лист такими же.
• LaTeX-проект Labkeeper переводит Markdown-сегменты в LaTeX, и сырой HTML при этом теряет оформление. Блок без пустой строки внутри Pandoc выбрасывает целиком. С пустой строкой, о которой сказано ниже, тело остаётся обычным текстом, а обёртка тега пропадает.

Вставка HTML тегов в Markdown: популярные сценарии

Прямая вставка html тегов в markdown требуется там, где базового синтаксиса недостаточно:

• Вставка видео и аудио: теги <video>, <iframe>;
• Подстрочные и надстрочные индексы химических элементов: H<sub>2</sub>O → H₂O;
• Центрирование подписей к рисункам и таблицам: <p align="center">Рисунок 1</p>;
• Управление шириной и высотой изображений: <img src="img.png" width="300" /> — так работает GitHub, а превью Labkeeper оставляет картинке её размер и учитывает атрибут width, пока она не упрётся в ширину колонки (подробнее см. руководство по настройке размеров картинок в Markdown).

Выравнивание по ширине/центру и цветной шрифт

Для создания цветных предупреждающих рамок (а также при объединении ячеек таблиц через rowspan и colspan) используйте обычные блочные элементы со встроенными стилями:

<div style="background-color: #f0f7ff; border-left: 4px solid #0066cc; padding: 12px;">
  <strong style="color: #0066cc;">Внимание!</strong> Результаты действительны только при стандартном давлении.
</div>

Браузер по умолчанию не печатает фон: чтобы цветная рамка сохранилась в PDF, включите в диалоге печати параметр «Фоновая графика».

Правила вложенности Markdown внутри блочных HTML-тегов

Важное правило: если вы открыли блочный тег (например, <div>), многие парсеры перестают обрабатывать Markdown-синтаксис внутри него. Чтобы внутри HTML-блока продолжали работать звездочки или решетки, отделяйте содержимое пустой строкой от открывающего и закрывающего тегов.

Атрибут markdown="1" встречается в инструкциях, но это синтаксис Markdown Extra и kramdown: в GitHub Flavored Markdown и в Labkeeper он не работает.

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