Атрибут data-* тега <samp>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в элементе <samp>, предназначенную для JavaScript и CSS. Это особенно полезно для аннотирования вывода программ с метаданными.
<samp data-command="npm install" data-exit-code="0" data-timestamp="2025-11-20T14:30:00Z">
+ react@18.2.0
added 15 packages in 2.4s
</samp>
Типичные data-атрибуты для вывода:
| Атрибут | Пример значения | Назначение |
|---|---|---|
data-command |
"git status" | Исходная команда |
data-exit-code |
"0", "1" | Код завершения |
data-timestamp |
ISO-дата | Время выполнения |
data-output-type |
"success", "error" | Тип вывода |
Пример обработки через JavaScript:
<samp id="cli-output" data-command="node app.js" data-exit-code="1">
Error: Cannot find module 'app.js'
</samp>
<script>
const output = document.getElementById('cli-output');
console.log('Команда:', output.dataset.command);
console.log('Код ошибки:', output.dataset.exitCode);
if (output.dataset.exitCode !== '0') {
output.classList.add('error-output');
}
</script>
Стилизация на основе данных:
<style>
samp[data-exit-code="0"] {
border-left: 3px solid #4CAF50;
}
samp[data-exit-code="1"] {
border-left: 3px solid #F44336;
}
samp[data-output-type="warning"] {
background-color: #FFF3E0;
}
</style>
<samp data-exit-code="1" data-output-type="error">
Segmentation fault (core dumped)
</samp>
Рекомендации по использованию:
- Используйте для хранения метаинформации о выполнении команд
- Применяйте единый формат именования атрибутов
- Для сложных данных используйте JSON в одном атрибуте
- Избегайте хранения чувствительной информации
Совет: Для сложных сценариев можно использовать JSON:
<samp data-meta='{"command":"ls -la","tags":["file","system"]}'>...</samp>