Code и CodeSnippet для отображения кода

Особенности:

• Встроенный стиль кода полностью соответствует визуальной идентичности Carbon Design System.
• Поддержка адаптивной верстки: код корректно отображается на мобильных и десктопных устройствах.
• Простое добавление классов позволяет интегрировать пользовательскую подсветку синтаксиса через сторонние библиотеки, например Prism.js.

Компонент CodeSnippet

CodeSnippet — более мощный компонент для отображения крупных блоков кода. Он поддерживает несколько режимов, функционал копирования и расширяемость.

Ключевые свойства:

• type — режим отображения:

  • "single" — однострочный блок с возможностью копирования.
  • "multi" — многострочный блок с кнопкой копирования.
  • "inline" — встроенный блок в тексте.

• copyButtonFeedback — текст подтверждения после копирования, по умолчанию "Copied!".

• feedbackTimeout — время отображения подтверждения копирования в миллисекундах.

• wrap — включает перенос длинных строк кода.

• light — переключение светлой темы отображения.

• disabled — блокирует возможность копирования.

Пример использования однострочного сниппета:

Пример многострочного сниппета:

Функциональность:

• Кнопка копирования автоматически отображается для режимов single и multi.
• Подтверждение копирования появляется на заданное время и исчезает автоматически.
• Поддержка многострочного текста с сохранением форматирования, включая табуляцию и перенос строк.
• Светлая и темная темы: компонент корректно реагирует на смену темы интерфейса.

Настройка стиля и интеграция

Для кастомизации CodeSnippet можно использовать CSS-переменные и дополнительные классы. Например, для изменения цвета фона и рамки:

.my-code-snippet {
  --cds-background: #f5f5f5;
  --cds-border-color: #cccccc;
  font-family: 'Fira Code', monospace;
}

И подключение к компоненту:

Интеграция с подсветкой синтаксиса:

• Использование сторонних библиотек (Prism.js, Highlight.js) возможно через слоты или через innerHTML.
• Для динамического синтаксиса можно использовать {@html highlightedCode} с безопасным экранированием символов.

Сравнение Code и CodeSnippet

Рекомендации по использованию

• Для коротких выражений и встроенного текста использовать Code.
• Для больших примеров, сниппетов и блоков с инструкциями использовать CodeSnippet.
• Всегда включать перенос строк для многострочного кода, чтобы избежать горизонтального скролла.
• Настройка текста подтверждения копирования улучшает UX при работе с документацией и примерами.