Атрибут class тега <code>
Описание
Атрибут class позволяет назначать один или несколько классов элементу <code> для стилизации через CSS или взаимодействия через JavaScript. Это основной инструмент группировки и оформления фрагментов кода.
<code class="javascript highlighted">
console.log('Hello World');
</code>
Основные возможности:
| Применение | Пример | Результат |
|---|---|---|
| Стилизация синтаксиса | .javascript { color: #f8f8f2; } |
Подсветка языков программирования |
| Тема оформления | .dark-theme { background: #222; } |
Изменение цветовой схемы |
| Интерактивность | .copyable { cursor: pointer; } |
Элементы с особым поведением |
Синтаксис именования:
- Разделение классов пробелом:
class="lang-js line-numbers" - Рекомендуемый стиль: kebab-case (
syntax-highlight) - Допустимые символы: буквы, цифры, дефисы, подчеркивания
- Чувствительность к регистру:
JavaScript≠javascript
Примеры популярных классов для кода:
<!-- Подсветка синтаксиса -->
<code class="language-python">
print("Hello World")
</code>
<!-- Нумерация строк -->
<code class="line-numbers">
function test() {
return true;
}
</code>
<!-- Интерактивный блок -->
<code class="runnable">
document.write('Executable code');
</code>
Использование с CSS:
<style>
.error-code {
background: #ffebee;
border-left: 3px solid #f44336;
padding: 10px;
}
.language-css::before {
content: 'CSS: ';
font-weight: bold;
}
</style>
<code class="error-code">404 Not Found</code>
<code class="language-css">body { margin: 0; }</code>
Рекомендации:
- Используйте семантические имена (
syntax-htmlвместоbox1) - Избегайте презентационных названий (
red-text) - Для библиотек подсветки соблюдайте их convention именования
- Оптимальное количество классов: 2-3 на элемент
Примечание: Правильное использование классов для тега <code> особенно важно в технической документации и учебных материалах, где требуется четкое визуальное выделение фрагментов кода.