Code Block

Код с подсветкой. Бесплатно, MIT · Разработчикам › Код и логи

Установка

npx valyro-cli@latest add code-block

npx shadcn@latest add https://valyro.xyz/r/code-block.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { CodeBlock } from 'valyro-ui';

Пропсы

Prop	Type	Default
`code` *	`string`		Source text to display; a single trailing newline is dropped.
`language`	`string`		Highlighting and header label: ts, tsx, js, jsx, json, bash, css, html, python, diff, yaml, sql…
`filename`	`string`		Shown in the header instead of the language.
`showLineNumbers`	`boolean`	`false`	Adds a 1-based line-number gutter (not copied with the code).
`highlightLines`	`number[]`		1-based line numbers to emphasise.
`wrap`	`boolean`	`false`	Soft-wrap long lines (the initial state when `wrapToggle` is on).
`wrapToggle`	`boolean`	`false`	Adds a header button that toggles soft wrap.
`maxHeight`	`CSSProperties['maxHeight']`		The code scrolls beyond this height.
`copyable`	`boolean`	`true`	Show the copy button. Default true.
`showHeader`	`boolean`	`true`	Show the header with the file name or language (default true); without it the buttons float over the code.
`writing`	`boolean`	`false`	Types the code out character by character, with a caret. The block keeps its full size meanwhile, copying always takes the whole code, and reduced motion shows it at once.
`writingDuration`	`number`	`5000`	How long the writing takes, ms (default 5000).
`writingDelay`	`number`	`0`	Pause before the writing starts, ms (default 0).
`writeOnView`	`boolean`	`false`	Start writing only once the block scrolls into view (default false: on mount).
`onWritingDone`	`() => void`		Called when the code has been written out (at once under reduced motion).
`labels`	`Partial<CodeBlockLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Code Block

Установка

Пропсы

Похожие компоненты