NurOSNupek

Code Block

Блок кода Nupek - тёмная заливка, моно-шрифт и кнопка копирования с подтверждением.

Code Block показывает команды, конфигурацию и фрагменты кода, которые разработчик будет копировать буквально.

Команда сборки

astro build

Использование токена в CSS

.button {
  background: var(--color-ink);
  border-radius: var(--radius-md);
}

Копирование

Кнопка в правом верхнем углу копирует содержимое блока в буфер обмена и на две секунды меняет иконку и подпись на подтверждение - «Скопировано». Это единственная обратная связь, необходимая пользователю: не требуется отдельное всплывающее уведомление.

Заливка

Фон блока - ink в светлой теме и bg-dark в тёмной: код остаётся на тёмной подложке независимо от темы страницы, потому что моно-текст и фон подобраны как пара с высоким контрастом (15.4:1) отдельно от остальной палитры.

Разметка

<div class="code-block-body">
  <pre><code class="language-bash">astro build</code></pre>
  <button class="copy-button" data-copy-text="astro build" aria-label="Скопировать команду">Копировать</button>
</div>
.code-block-body {
  position: relative;
  background: var(--color-ink);
}

pre {
  padding: var(--space-5);
  font-family: var(--font-family-mono);
  color: #EDEFF4;
}