CodeBlock

CodeBlock fornece o cromo do painel, não o realce de sintaxe. Traga o markup do seu highlighter e então decida se as pessoas precisam de números de linha ou de uma ação para copiar o trecho.

Exemplos

Linguagem e cópia

copyLabel e copiedLabel habilitam juntos o botão de cópia. O rótulo de sucesso também é anunciado, então não use apenas cor para confirmar a ação.

tsx

export function greet(name: string) {
  return `Hello, ${name}`;
}

Contrato de numeração de linhas

Os números contam elementos filhos com a classe line. Shiki e rehype-pretty-code emitem esse formato; outro highlighter também precisa emiti-lo.

css

.notice {\n color: rebeccapurple;\n}

Quebrando linhas longas

Adicione wrap quando o código aparecer em um espaço estreito e linhas longas precisarem ficar visíveis, em vez de exigir rolagem horizontal. Ele preserva quebras intencionais e quebra tokens longos quando necessário.

tsx

const componentIdentifierThatWouldOtherwiseOverflow = 'CodeBlock';

Copiando um valor canônico

copyText pode diferir do código renderizado. Sem ele, o botão copia o texto renderizado do <pre>, que em geral é o valor que as pessoas esperam colar.

shell

$ pnpm add @lyra-ds/react @lyra-ds/styles

Quando usar

Use CodeBlock quando o produto precisar de uma amostra de código legível e copiável e você já for responsável pelo realce. A função dele é criar uma moldura estável para esse markup, não escolher uma gramática de linguagem.

Prefira outro componente quando:

O conteúdo é um token curto inline — use code, não um painel com região própria de rolagem.
A pessoa precisa editar o valor — use Textarea; um painel de código não oferece modelo de edição.

Acessibilidade

O controle de cópia é um botão nativo. Forneça copyLabel e copiedLabel para ele ter um nome e uma cópia bem-sucedida ser anunciada pela mensagem de status polida.
O <pre> preserva a semântica nativa de conteúdo pré-formatado e tem uma parada de Tab. Depois do foco, as pessoas podem rolar código que excede a largura pelo teclado, sem precisar de mouse.
Os números de linha são gerados por contadores CSS em elementos .line. Mantenha-os decorativos; o texto do código, não sua numeração visual, é o que a tecnologia assistiva deve ler.
CodeBlock não realça nem sanitiza markup. Seu highlighter e qualquer fonte não confiável continuam sob sua responsabilidade.

API e código

Nome	Tipo	Obrigatória	Descrição
`language`	`string`	—	Optional language badge shown in the code panel bar.
`lineNumbers`	`boolean`	—	Draw line numbers beside descendants whose class list includes `line`.
`wrap`	`boolean`	—	Soft-wrap code lines and break long tokens instead of allowing horizontal overflow.
`copyLabel`	`ReactNode`	—	Translated visible label for the copy button. Omit with `copiedLabel` to hide copying.
`copiedLabel`	`ReactNode`	—	Translated visible label and polite announcement shown after a successful copy.
`copyText`	`string`	—	Text copied instead of the rendered text content of this code block's `<pre>`.

x-data="lyraCodeBlock({ … })"

Este binding não recebe opções — monte e ele funciona.

O painel espera o markup do seu highlighter dentro do <pre>. Adicione line a cada linha apenas quando ativar o modificador de números de linha:

html

<div class="lyra-code lyra-code--line-numbers">
  <div class="lyra-code__bar">
    <span class="lyra-code__lang">css</span>
    <button class="lyra-code__copy" type="button">Copiar</button>
  </div>
  <pre class="lyra-code__pre" tabindex="0"><code><span class="line">.notice {</span>
<span class="line">  color: rebeccapurple;</span>
<span class="line">}</span></code></pre>
  <span class="lyra-code__status" role="status" aria-live="polite"></span>
</div>

<lyra:code-block> Gerado do lyra-ds/blade v0.10.0.

O comportamento vem de lyraCodeBlock() — instale @lyra-ds/alpine e veja a aba HTML + Alpine.

Prop	Padrão	Obrigatória	Valores de exemplo
`language`	`null`	—	—
`lineNumbers`	`false`	—	—
`wrap`	`false`	—	—
`copyLabel`	`null`	—	—
`copiedLabel`	`null`	—	—
`copyText`	`null`	—	—

blade

<lyra:code-block language="bash" line-numbers copy-label="Copy" copied-label="Copied!" copy-text="composer require lyra-ds/blade">composer require lyra-ds/blade</lyra:code-block>