Практика: листинг кода с видимой подписью
Подпись листинга объясняет назначение примера до чтения кода. Figure и figcaption позволяют связать самостоятельный фрагмент с пояснением, не превращая его в обычное изображение.
Назначение
Подпись листинга объясняет назначение примера до чтения кода. Figure и figcaption позволяют связать самостоятельный фрагмент с пояснением, не превращая его в обычное изображение.
Как это работает
Внутри figure разместите figcaption и pre с code. Код остаётся текстом, который можно выделять. Переполнение ограничьте на pre, чтобы длинная строка не растягивала всю статью.
Пример
<style>.listing{margin:1rem 0;border:1px solid #a7c1b0}.listing figcaption{padding:.7rem;background:#e5f1e9}.listing pre{margin:0;padding:1rem;overflow:auto;tab-size:2}</style>
<figure class="listing"><figcaption>Пример 1. Сетка с промежутком между элементами</figcaption><pre><code>.cards {
display: grid;
gap: 1rem;
}</code></pre></figure>Что должно получиться
Подпись и листинг представлены единым самостоятельным блоком. При копировании кода не требуется распознавание текста с картинки, а длинная строка может прокручиваться внутри области.
Граница применения и частая ошибка
Не вставляйте HTML-код в pre без экранирования угловых скобок: браузер может разобрать его как разметку. Номер примера должен совпадать со ссылками в тексте. Подсветка синтаксиса не должна быть единственным способом понять структуру.
Самостоятельная проверка
Добавьте длинное значение свойства и проверьте прокрутку. Затем покажите HTML-фрагмент с экранированными скобками. Скопируйте результат и убедитесь, что подпись не оказалась частью самого кода.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.