Код и копируемое значение

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

<div class="inst-code">go -C tools run ./cmd/contrast</div>

Переноса строк в блоке кода нет намеренно: перенос в команде меняет её смысл. Отсюда горизонтальная прокрутка, а scrollbar-gutter зарезервирован, чтобы появление полосы не сдвигало код на пиксель при каждом обновлении.

Когда использовать

Варианты

Копируемое значение

Однострочное значение с кнопкой — хеш, идентификатор, путь.

<span class="inst-copyable">a4f7c2e
  <button class="inst-copy" type="button" aria-label="Скопировать a4f7c2e">
    <svg class="inst-icon inst-icon--sm" aria-hidden="true"><use href="#i-copy"/></svg>
  </button>
</span>

Кнопка стоит в потоке, с просветом, и видна всегда. Абсолют в углу с проявлением по наведению — приём блока кода: там угол свободен и текста много. У однострочного значения угла нет, и значок ложился на последние символы, а на касании его не было вовсе, потому что наведения на касании не бывает.

Область нажатия у кнопки растёт до нормы невидимым ::before — тем же приёмом, что у флажка: растёт область, а не значок, и строка остаётся прежней высоты.

JS

Подключите модуль один раз на страницу — инициализировать компоненты по отдельности не нужно, кит работает делегированием и видит узлы, пришедшие позже.

<script type="module" src="src/kit.js"></script>

Что делает кит

Примеры на этой странице живые: наведите на блок кода и нажмите кнопку копирования — значок сменится на галку.

Копирование целиком: текст в буфер, цветной ответ на кнопке и объявление результата вслух. Ответ обязателен — буфер обмена ничего не показывает, и без него человек жмёт кнопку второй раз.

Источник — текст ближайшего .inst-code или .inst-copyable без самой кнопки. Читается textContent, а не innerText: второй у свёрнутого блока возвращает пустую строку, и копирование ушло бы в ничто беззвучно.

Опции

<span class="inst-copyable">a4f7c2e
  <button class="inst-copy" type="button" data-copy="a4f7c2e91b0d5537"
          aria-label="Скопировать полный хеш"></button>
</span>

События

inst:copy всплывает с { text } и отменяем: preventDefault() означает «копирую сам», и кит не трогает буфер.

document.addEventListener('inst:copy', (e) => {
  analytics.track('copy', { length: e.detail.text.length });
});

Чего кит не делает

Подсветку синтаксиса. Она требует разбора языка, и это работа приложения.

Правила

Доступность

API

Связанное

Лог Диф Шаг и свёрнутый вывод Типографика