Code
Código na frase
Instale a skill com npx rivocode-ui skill e ela aparece em .claude/skills.
Retorno da API
1{2 "numero": "4813",3 "situacao": "autorizada",4 "chave": "35240612345678000199550010000048131234567890"5}import { Code } from '@rivocode/ui'Quando usar
Código dentro de uma frase: nome de arquivo, comando de terminal, chave de um JSON, nome de prop.
Não é Kbd. A sombra de tecla promete "aperte isto", e prometer errado custa
mais do que não prometer nada. O Kbd é para a combinação que a pessoa vai
digitar, e este é para o texto que ela vai ler ou copiar.
Quando não usar
Para bloco (retorno de API, linha de log, trecho de configuração), use
CodeBlock, que rola sozinho. Code dentro de um parágrafo com uma linha
longa estica a página inteira.
No React Native
Traduz, e ele vai dentro de um Text: Abra o <Code>app.json</Code> quebra linha junto com a frase que o cerca. A rolagem horizontal que a fila prometia nunca foi deste lado: barra de rolagem dentro de um parágrafo é armadilha para o dedo que rola a tela, e quem precisa dela é o CodeBlock (retorno de API, linha de log), que é outra peça e ainda não portou. O argumento é o inverso do daqui: lá quebrar um JSON no meio muda o que está escrito, e aqui quebrar um caminho longo no meio é o certo, porque a alternativa é esticar a tela inteira. O corpo da letra não é escrito: o Text aninhado herda o do texto de fora, que é o que o 0.9em do web dizia. E selectable vem ligado, porque o toque longo é o gesto nativo para copiar. No Android quem seleciona é o Text de fora, e ali é ele que precisa carregar a prop.
API
Sem prop própria: repassa ao elemento de baixo o que você mandar.
Partes
Code se monta com estas peças. Todas vivem nesta página, porque separar cada uma num endereço obrigaria a abrir seis abas para montar uma tela.
CodeBlock
/code-block.mdCódigo em bloco: retorno de API, linha de log, trecho de configuração.
A rolagem é própria de propósito. JSON não quebra linha, e sem rolagem no próprio bloco a linha longa empurra a largura da página, e o vazamento horizontal só aparece no celular de quem usa, nunca no monitor de quem escreveu.
Sem realce de sintaxe: destacar palavra-chave exige uma gramática por linguagem, e isso é peso que toda tela paga pelo que poucas usam. Quem precisa traz o seu e passa o resultado como filho.
lineNumbers numera à esquerda, para quem vai citar uma linha; o número fica
fora da seleção, senão copiar o bloco traz os números colados no código.
copyable põe o Clipboard no canto, com o próprio conteúdo do bloco.
| Prop | Tipo |
|---|---|
copyable0.5.0Poe o botao de copiar no canto, com o proprio conteudo do bloco. | boolean |
lineNumbers0.5.0Numera as linhas a esquerda, para quem vai citar uma delas. | boolean |
Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.