Code

Code показывает текст как есть — с переносами и моноширинным шрифтом. variant="block" — тёмная плашка для примера запроса или сниппета интеграции; variant="area" — светлая область на подложке поля с заголовком и прокруткой для длинного ответа API или лога. Подсветки синтаксиса нет: это вывод текста, а не редактор.

Статус: experimental · в системе с 2026-09 · интерактивность: none (нет)

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

Пример запроса, тег или сниппет интеграции, который копируют целиком.
Длинный ответ API или лог в области с прокруткой и заголовком.

Не использовать:

Значение, которое копируют одной кнопкой, — это Copy Field.
Текст, который редактируют, — это Textarea.

Альтернативы:

copy-field — короткое значение с кнопкой копирования
textarea — редактируемый многострочный текст

Тёмная плашка

Сниппет интеграции на тёмной подложке.

<script src="https://cdn.example.com/tag.js"
  data-zone="123456" async></script>

<!--
  🟢

  Тёмная плашка: сниппет интеграции с сохранёнными переносами.
-->

<script>
import Code from "$lib/ui/Code.svelte";
</script>

<div style="width: 480px;">
	<Code>{`<script src="https://cdn.example.com/tag.js"
  data-zone="123456" async><\/script>`}</Code>
</div>

Область с заголовком

Ответ API в светлой области с заголовком и прокруткой.

Ответ

{
  "status": "ok",
  "campaign": { "id": 4821, "name": "Atlas", "bid": 0.25 }
}

<!--
  🟢

  Светлая область с заголовком и прокруткой: ответ API на подложке поля.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Code from "$lib/ui/Code.svelte";
</script>

<div style="width: 480px;">
	<Code variant="area" title={t("Ответ")}>{`{
  "status": "ok",
  "campaign": { "id": 4821, "name": "Atlas", "bid": 0.25 }
}`}</Code>
</div>