НачалоОсновыКомпонентыТексты
Обзор
Кнопка Кнопка-иконка Кнопка с меню Группа кнопок Кнопка-переключатель Группа переключателей
Бейдж Баннер Пустое состояние Индикатор прогресса Кольцо прогресса Сообщение в разделе Скелетон Индикатор загрузки Уведомление
Field Поле ввода Textarea Number input Number stepper Search field OTP input Поле телефона Чекбокс Радиогруппа Переключатель Слайдер Карточка выбора Редактирование на месте
Select family Select Combobox Multiselect Country select Выбор даты Выбор периода Выбор времени Календарь Выбор эмодзи
Диалог Шторка Поповер Меню Подсказка
Боковая панель Навигационное меню Вкладки Сегментированный переключатель Хлебные крошки Пагинация Дерево
Таблица Таблица данных Аватар Группа аватаров Тег Иконка Изображение
Текст Prose Ссылка Блок кода Kbd
Аккордеон Раскрывающийся блок Разделитель Область прокрутки Разделитель панелей Соотношение сторон
Заголовок страницы

Блок кода

Блок кода показывает исходный код для чтения: с подсветкой синтаксиса, кнопкой копирования и номерами строк по желанию.

Стабильный Figma
ОбзорИспользованиеAPIДоступность 
interface User {
  id: number;
  name: string;
}

<tk-code-block language="ts"><pre>
interface User {
  id: number;
  name: string;
}
</pre></tk-code-block>

Анатомия

Часть Что это
tk-code-block сам элемент
слот по умолчанию код, лучше внутри <pre>
part block панель с рамкой
part header строка с названием языка и кнопкой копирования
part scroll область, которая прокручивается по горизонтали

Кладите код в <pre>. Пока скрипт не загрузился, браузер показывает этот <pre> как есть, и код остаётся читаемым. Общий отступ компонент убирает, так что код можно выравнивать вместе с HTML.

Языки

npm install thykes
 
{ "theme": "dark", "primary": "blue" }
<tk-code-block language="bash"><pre>npm install thykes</pre></tk-code-block>
<tk-code-block language="json"><pre>{ "theme": "dark", "primary": "blue" }</pre></tk-code-block>

Задайте language, чтобы появились цвета и название языка в шапке. Без него или с неизвестным значением код показывается обычным моноширинным текстом. Язык никогда не угадывается.

language Принимает также
javascript js
typescript ts
jsx, tsx
html markup, xml, svg
css
json
bash shell, sh
python py
yaml yml

Номера строк

const total = items.reduce((sum, item) => sum + item.price, 0);
console.log(total);

<tk-code-block language="js" line-numbers><pre>
const total = items.reduce((sum, item) => sum + item.price, 0);
console.log(total);
</pre></tk-code-block>

line-numbers добавляет слева колонку номеров. При горизонтальной прокрутке она стоит на месте. Скринридеры её пропускают, она не выделяется и не копируется.

Копирование и прокрутка

  • Кнопка копирования копирует код без номеров строк. Иконка меняется на галочку, а скринридер сообщает «Copied to clipboard» (или «Copy failed»). Примерно через 2 секунды всё возвращается.
  • Длинные строки не переносятся, код прокручивается по горизонтали. Если он не помещается, область прокрутки становится именованной областью: до неё доходит Tab, а стрелки её прокручивают. Если код помещается, лишней остановки Tab нет.