CodeArea

Компонент CodeArea используется для отображения фрагментов кода с подсветкой синтаксиса.

Быстрый старт​

Код передается в children, а язык подсветки задается свойством language.

Live Editor
Result
Open in CodeSandbox

Язык подсветки​

Свойство language определяет правила подсветки синтаксиса. Возможные значения нужно брать из списка Prism-языков: AVAILABLE_LANGUAGES_PRISM.MD.

Live Editor
Result
Open in CodeSandbox

Номера строк​

Свойство showLineNumbers включает колонку с номерами строк. Ширина колонки рассчитывается по номеру последней строки, поэтому однозначные и многозначные номера не меняют ширину строки кода.

Live Editor
Result
Open in CodeSandbox

Перенос длинных строк​

Длинные строки переносятся автоматически и остаются внутри области кода.

Live Editor
Result
Open in CodeSandbox

Appearance​

Свойство appearance переключает вариант отображения компонента. По умолчанию используется default. Для варианта с внешней оберткой используйте appearance="hasWrapper".

Live Editor
Result
Open in CodeSandbox

Слоты​

Через contentOuter, contentHeader и contentAction можно передать дополнительный контент вокруг области кода. Свойство hasDivider добавляет разделитель снизу header-слота.

Live Editor
Result
Open in CodeSandbox

API​