Атрибут class тега <pre>
Описание
Атрибут class для тега <pre> позволяет назначать один или несколько CSS-классов для стилизации блока предварительно форматированного текста. Классы применяются ко всему содержимому внутри <pre>.
<pre class="code-block highlight-line">
function hello() {
console.log("Hello, world!");
}
</pre>
Основные возможности:
| Применение | Пример класса |
|---|---|
| Базовая стилизация | .pre-formatted { white-space: pre; } |
| Подсветка синтаксиса | .language-javascript |
| Оформление блоков кода | .code-block { background: #f8f8f8; } |
Практические примеры:
1. Стилизация блока кода:
<style>
.code-sample {
padding: 16px;
background: #282c34;
color: #abb2bf;
border-radius: 6px;
font-family: 'Courier New', monospace;
overflow-x: auto;
}
</style>
<pre class="code-sample">
const greeting = 'Hello World';
console.log(greeting);
</pre>
2. Подсветка строк:
<style>
.error-line {
background-color: #ffebee;
border-left: 3px solid #f44336;
}
</style>
<pre class="error-line">
Error: Invalid syntax at line 42
at Module.compile (internal/modules/cjs/loader.js:723:23)
</pre>
Рекомендации:
- Используйте семантичные имена классов (например, "log-output" вместо "pre1")
- Для подсветки синтаксиса применяйте специализированные библиотеки (Prism.js, Highlight.js)
- Добавляйте классы для управления переносами длинных строк (
white-space: pre-wrap) - Сочетайте с
data-*атрибутами для расширенной функциональности
Особенности наследования:
- Стили применяются ко всему содержимому внутри <pre>
- Шрифт и пробелы наследуются, но могут быть переопределены
- Для вложенных элементов используйте дочерние селекторы
Примечание: Хотя тег <pre> сохраняет исходное форматирование текста, классы позволяют адаптировать его отображение под дизайн сайта, сохраняя при этом семантическую ценность предварительно форматированного текста.