GrCodeBlock

Примеры 4 у каждого — живое демо и его код

• Доставка вебхука: запрос и ответ

  code принимает тело как объект и сериализует его с отступами; JSON — единственный язык, который блок подсвечивает сам. Кнопка копирования кладёт в буфер исходник — без номеров строк: это CSS-счётчик, а не текст, — а copy даёт странице сказать «скопировано». Ответ — простой language="text".

  invoice.paid200 OK312 ms · 6 Oct, 09:14

  Request body

  {  "id": "evt_1Q7b3x2LkS",  "type": "invoice.paid",  "created": "2026-10-06T09:14:22Z",  "data": {    "invoice": "INV-0418",    "customer": {      "id": "cus_8812",      "name": "Northwind Traders"    },    "amount": 1284.5,    "currency": "EUR",    "paid_with": "sepa_debit",    "metadata": {      "po_number": "PO-77120",      "cost_centre": null    }  },  "attempt": 1}

  Response

  HTTP/1.1 200 OKcontent-type: application/jsonx-request-id: 7f3e1c9a{"received": true}

  Код и пропы

• Команда curl со своей подсветкой

  highlighter принимает любую функцию, которая режет текст на роли, — здесь двадцать строк регулярных выражений для shell, без Shiki и Prism. Роли названы по смыслу: флаг — keyword, $ACME_KEY — variable, и тема красит их в обоих режимах.

  Create your first invoiceReplace $ACME_KEY with a test key

  # Create a draft invoicecurl -X POST https://api.acme-billing.com/v1/invoices \  -H "Authorization: Bearer $ACME_KEY" \  -d customer=cus_8812 \  -d "items[0][price]=price_team_monthly"

  Код и пропы

• Лог упавшего деплоя

  max-height превращает блок в окно со своей прокруткой, и длинный лог не выталкивает страницу за экран; окно — остановка Tab, и aria-label даёт ему имя. wrap переносит длинные строки: лог читают с переносами, код — как написан.

  Deploy #812 · productionFailed

  09:41:02 Cloning acme/billing-web@4f2c1e909:41:05 Installing dependencies (yarn 4.5.0, node 22.11)09:41:48 Resolved 1,284 packages in 43s09:41:49 Running build: vite build --mode production09:42:11 ✓ 2,418 modules transformed09:42:12 rendering chunks…09:42:19 dist/assets/invoice-editor-3f9a1c.js  412.70 kB │ gzip: 128.33 kB09:42:19 (!) Some chunks are larger than 400 kB after minification. Consider dynamic import() to split the application09:42:20 Running checks: bundle budget09:42:20 ✗ invoice-editor exceeds its budget: 128.3 kB gzip > 120 kB09:42:20 Build failed with exit code 1

  Код и пропы

• Данные, на которых падает JSON.stringify

  Трекер ошибок захватывает всё, что было в памяти: сессию, ссылающуюся обратно на запрос, 64-битный идентификатор в BigInt. JSON.stringify на обоих бросает, а блок печатает [Circular] и 9007199254740993n — страница живёт, пока показывает, что сломалось.

  TypeError in send-invoiceCaptured context · 14 events in the last hour

  {  "error": "TypeError: Cannot read properties of undefined (reading 'email')",  "release": "[email protected]",  "ledgerEntryId": "9007199254740993n",  "request": {    "method": "POST",    "path": "/v1/invoices/INV-0418/send",    "session": {      "id": "sess_51c0",      "user": "[email protected]",      "plan": "Team",      "lastRequest": "[Circular]"    }  }}

  Код и пропы

API порождается из пакета · разойтись не может

import type { GrCodeBlockLanguage, GrCodeBlockProps, GrCodeBlockEmits } from '@feugene/granularity-code/components/GrCodeBlock'

const grCodeBlockConfig: import("@feugene/granum/contract").GranumComponentDescriptor<"GrCodeBlock">;

type GrCodeBlockLanguage = 'json' | 'text' | (string & {});

interface GrCodeBlockProps {
    /** Строка или значение: объект сериализуется с отступом. */
    code: unknown;
    /**
     * Язык подсветки: `json` и `text` разбираются встроенно, остальные — подключённой подсветкой.
     * По умолчанию `json`.
     */
    language?: GrCodeBlockLanguage;
    /**
     * Подсветка для языков сверх встроенных. Не задана — берётся из
     * `provide`/`inject` приложения (`GR_CODE_HIGHLIGHTER_KEY`).
     */
    highlighter?: GrCodeTokenizer;
    /** Высота, после которой включается вертикальный скролл. */
    maxHeight?: string | number;
    /** Кнопка копирования. Без защищённого контекста не рисуется вовсе. */
    copyable?: boolean;
    /** Переносить длинные строки вместо горизонтальной прокрутки. */
    wrap?: boolean;
    /**
     * Номера строк в колонке слева; в выделение и буфер они не попадают. Не задан — из
     * `GrConfigProvider`, иначе `false`.
     */
    lineNumbers?: boolean;
    /** Имя области прокрутки. Безымянную скринридер объявляет просто «регион». */
    ariaLabel?: string;
    /**
     * Ступень размера: кегль кода и внутренние отступы. По умолчанию `md`; берётся из
     * `GrConfigProvider`.
     */
    size?: GrComponentSize;
}

interface GrCodeBlockEmits {
    /** Текст скопирован. Тост показывает потребитель: у блока своего места для него нет. */
    (e: 'copy', code: string): void;
}

type GrCodeRole = typeof GR_CODE_ROLES[number];

interface GrCodeToken {
    text: string;
    role: GrCodeRole;
}

interface GrCodeBlockConfigurableProps {
    size: GrComponentSize;
    copyable: boolean;
    wrap: boolean;
    lineNumbers: boolean;
}

const grCodeBlockSafelist: string[];

Доступность

Полный контракт пакета: docs/keyboard.md ↗

Связанные четвёртый вопрос: когда не это

• GrCodeEditorКод

  Код правят, а не читают

• GrDiffКод

  Сравнить две версии

• GrMarkdownРедакторссылается сюда

  Берут, когда текст пришёл markdown-строкой и его надо показать оформленным.

• GrRichTextРедакторссылается сюда

  Берут, когда текст, который читатель увидит оформленным.