CoreCodeBlock

Живой MDC-рендер и исходник для копирования.

Живой рендер

Так ContentRenderer отрисует этот контент на реальной странице.

Блок кода с подсветкой Shiki и копированием. Проп code — строка: в MDC удобны короткие листинги в одну строку, многострочные вставки делайте в Vue-коде.

Базовый пример

VUE

const greeting = 'Привет, d2n!'

Грамматика и ширина

lang выбирает подсветку, block растягивает блок на всю ширину контейнера:

JSON

{ "slug": "button", "title": "CoreButton" }

Нумерация строк

line-numbers включает номера (CSS-счётчики: не выделяются мышью и не попадают в копирование):

VUE

const greeting = 'Привет, d2n!'

Исходник (MDC)

Тот же код текстом — скопируйте в свой контент как есть.

MDC

Блок кода с подсветкой Shiki и копированием. Проп `code` — строка: в MDC удобны короткие листинги в одну строку, многострочные вставки делайте в Vue-коде.

### Базовый пример

::core-code-block{code="const greeting = 'Привет, d2n!'"}
::

### Грамматика и ширина

`lang` выбирает подсветку, `block` растягивает блок на всю ширину контейнера:

::core-code-block{code="{ &quot;slug&quot;: &quot;button&quot;, &quot;title&quot;: &quot;CoreButton&quot; }" lang="json" block}
::

### Нумерация строк

`line-numbers` включает номера (CSS-счётчики: не выделяются мышью и не попадают в копирование):

::core-code-block{code="const greeting = 'Привет, d2n!'" line-numbers}
::