Перейти к содержимому

D2N Core

← Все компонентыБазовые

CoreCodeBlock

Примеры использования и документация.

Блок кода с подсветкой Shiki, копированием и живым контентом: при смене пропа code подсветка перерисовывается на лету. Основной сценарий — страницы компонентов витрины: тумблеры опций меняют сгенерированную строку примера, и атрибуты появляются в коде.

Технические детали: shiki на JS-regex движке (без wasm), грамматики и темы — ленивые чанки, инстанс один на страницу; до готовности и при ошибке рендера показывается plain <pre> — код читается и копируется. Пара тем github-light/github-dark через CSS-переменные переключается классом dark на <html>; фон кода — родная пара темы (контраст AA в обеих темах). Копирование — useClipboard с source-геттером: копируется текущий код, состояние объявляется через role="status". Прокручиваемая область — фокусируемый регион с доступным именем.

Реактивный пример: опции → код

VUE
<script setup>
const busy = ref(false)
</script>

<template>
  <CoreButton @click="busy = !busy">
    Кнопка
  </CoreButton>
</template>

Статичный блок (TypeScript)

TS
function buildExample(options: Record<string, boolean>): string {
  return Object.entries(options)
    .filter(([, enabled]) => enabled)
    .map(([name]) => name)
    .join(' ')
}