Атрибут data-* тега <code>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в элементах <code> для использования в JavaScript или CSS. Эти атрибуты особенно полезны для:
- Хранения метаданных о фрагменте кода
- Конфигурации подсветки синтаксиса
- Взаимодействия с JavaScript-библиотеками
- Добавления пользовательского поведения
<code data-language="javascript" data-runnable="true">
console.log('Hello World');
</code>
Типичные сценарии применения:
| Атрибут | Пример | Назначение |
|---|---|---|
data-language |
data-language="python" |
Указание языка для подсветки синтаксиса |
data-line-numbers |
data-line-numbers="true" |
Включение нумерации строк |
data-highlight |
data-highlight="2,4-6" |
Подсветка определенных строк |
data-user |
data-user="admin" |
Отметка авторства кода |
Доступ из JavaScript:
<code id="demo-code" data-version="1.0" data-created="2023-05-15">
// Пример кода
</code>
<script>
const codeElement = document.getElementById('demo-code');
console.log(codeElement.dataset.version); // "1.0"
console.log(codeElement.dataset.created); // "2023-05-15"
// Изменение значения
codeElement.dataset.version = "2.0";
</script>
Использование в CSS:
<style>
code[data-language="javascript"] {
background-color: #f0f8ff;
}
code[data-important="true"] {
border-left: 3px solid red;
}
code[data-status="deprecated"]::after {
content: " (устаревший)";
color: #999;
}
</style>
<code data-language="javascript">let x = 10;</code>
<code data-important="true">Критический участок кода</code>
<code data-status="deprecated">oldFunction()</code>
Рекомендации по именованию:
- Используйте осмысленные имена после префикса
data- - Придерживайтесь kebab-case (дефисное написание)
- Избегайте аббревиатур, если они неочевидны
- Для булевых значений используйте
data-feature="true"
Пример с JSON данными:
<code data-meta='{"author":"Alice","lines":15}'>
// Код с комплексными метаданными
</code>
<script>
const meta = JSON.parse(document.querySelector('code').dataset.meta);
console.log(meta.author); // "Alice"
</script>
Интеграция с библиотеками:
<!-- Prism.js использует data-атрибуты -->
<code class="language-javascript" data-line="3">
function test() {
return true;
}
</code>
<!-- Highlight.js конфигурация -->
<code data-hljs-language="typescript">
interface User { name: string; }
</code>
Примечание: Атрибуты data-* предоставляют гибкий способ хранения дополнительной информации о фрагментах кода без нарушения семантики HTML. Они особенно полезны при интеграции с JavaScript-библиотеками для подсветки синтаксиса или интерактивного выполнения кода.