Pular para o conteúdo
Camaleo
PT · ENGitHub
// visualizar em
salvo em todas as páginas

CodeBlock

Bloco de código que mostra um trecho com o nome do arquivo, os números de linha e um botão de copiar, para passos de instalação, referências de API e guias de configuração.

Feito com HTML pre e codePadrão Exemplo de código com botão de copiarComponente clienteCódigo ↗
minimal · light · #3fa34d
like-button.tsxTSX
import { useState } from "react";
import { Button } from "@camaleo/react";

export function LikeButton() {
  const [likes, setLikes] = useState(0);
  return <Button onClick={() => setLikes(likes + 1)}>Like · {likes}</Button>;
}
showLineNumbers

Instalação

Configure o Camaleo uma vez (Instalação) e importe o que precisar. Ele é um componente de cliente, por causa do botão de copiar.

import { CodeBlock } from "@camaleo/react";

Anatomia

Um cabeçalho com o nome do arquivo, a linguagem e o botão de copiar, e depois um <pre> que rola para o lado quando as linhas são longas. Cada parte tem um data-slot que você pode usar no CSS.

Exemplos

Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a marca da barra acima.

minimal · light · #3fa34d
components/save-button.tsxTSX
import { Button } from "@camaleo/react";

export function SaveButton() {
  return <Button type="submit">Save changes</Button>;
}
app/layout.tsxTSX
import "@camaleo/styles/base.css";
import "@camaleo/styles/editorial.css";

Nome do arquivo e linguagem

Quando a pessoa precisa colar o código num arquivo específico, coloque o caminho em filename. O selo de language mostra a sintaxe de relance.

Bash
pnpm add @camaleo/react @camaleo/styles

Comando de terminal

Desligue os números de linha num comando de uma linha só: não há o que apontar, e o comando se lê como uma peça única.

package.jsonJSON
{
  "name": "billing-dashboard",
  "private": true,
  "dependencies": {
    "@camaleo/react": "^0.4.0",
    "@camaleo/styles": "^0.4.0"
  }
}

JSON e outros formatos

O realce embutido colore strings, comentários e palavras-chave de JavaScript. Isso basta para JSON ou um comando de shell. O language também define os comentários: # para Bash, Python ou YAML, // para o resto.

app/layout.tsxDiff
import "@camaleo/styles/base.css";
- import "@camaleo/styles/minimal.css";
+ import "@camaleo/styles/editorial.css";

Linhas marcadas

Passe highlight para renderizar cada linha você mesmo, como as linhas de um diff. Mantenha o + e o - no texto, para a mudança não depender da cor.

Bash
curl "https://api.example.com/v1/invoices?status=overdue&limit=20" -H "Authorization: Bearer $API_TOKEN"

Linhas longas rolam

Linhas longas rolam para o lado em vez de quebrar, então o comando continua copiável como está. Quem usa teclado chega ao código com Tab e rola com as setas.

Bash
pnpm add @camaleo/react @camaleo/styles

Um comando por gerenciador de pacotes

Escolha uma aba. As abas mostram um comando por vez e deixam a escolha clara, em vez de quatro blocos empilhados.

Bash
pnpm add @camaleo/react @camaleo/styles

Nomeie a cópia e anuncie

Diga em copyLabel o que o botão copia, como "Copiar comando de instalação". Depois da cópia, o copiedLabel aparece no botão e o leitor de tela também o anuncia.

Em contexto

Blocos de código costumam ficar num card ou num guia, logo depois da frase que os explica. Estas são peças inteiras de interface que você pode copiar, no estilo que escolheu.

Instale o Camaleo

Rode isto na raiz do projeto. O comando adiciona os componentes e os estilos.

Bash
pnpm add @camaleo/react @camaleo/styles
Passo de instalaçãoCard · CodeBlock · Button
GET

Listar faturas

Retorna as 20 faturas mais recentes, da mais nova para a mais antiga.

Bash
curl https://api.example.com/v1/invoices \
  -H "Authorization: Bearer $API_TOKEN" \
  -d limit=20
Endpoint de APICard · Badge · CodeBlock

Escolha um estilo

Carregue os estilos base e um estilo, depois envolva o app no StyleProvider.

app/layout.tsxTSX
import "@camaleo/styles/base.css";
import "@camaleo/styles/glass.css";
import { StyleProvider } from "@camaleo/react";

export default function RootLayout({ children }) {
  return (
    <StyleProvider styleName="glass" mode="system">
      {children}
    </StyleProvider>
  );
}
Guia de configuraçãoCard · CodeBlock

Boas práticas

app/blog/page.tsxTSX
export const revalidate = 3600;
FaçaDiga onde o código vai.

Um caminho como app/blog/page.tsx diz qual arquivo abrir antes de colar.

export const revalidate = 3600;
EviteUm trecho sem arquivo.

A pessoa precisa adivinhar se a linha vai numa página, num layout ou num arquivo de configuração.

next.config.tsTS
const config: NextConfig = {
  // …
  images: { formats: ["image/avif", "image/webp"] },
};
FaçaMostre só as linhas que importam.

Corte o resto com um comentário // …. A pessoa vê a mudança na hora e copia menos coisa por engano.

next.config.tsTS
import type { NextConfig } from "next";

const config: NextConfig = {
  reactStrictMode: true,
  poweredByHeader: false,
  trailingSlash: false,
  experimental: { typedRoutes: true },
  logging: { fetches: { fullUrl: true } },
  eslint: { ignoreDuringBuilds: false },
  typescript: { ignoreBuildErrors: false },
  images: { formats: ["image/avif", "image/webp"] },
  redirects: async () => [],
};

export default config;
EviteO arquivo inteiro para mudar uma linha.

A pessoa precisa caçar a linha certa, e o botão de copiar copia tudo.

Props

PropriedadeTipoPadrãoDescrição
code*string—O código exibido. O botão de copiar copia exatamente esta string.
languagestring—Nome curto da linguagem, mostrado como selo no cabeçalho, como "TSX" ou "Bash". Também define os comentários do realce embutido: # para shell, Python, YAML e parecidas, // para as outras.
filenamestring—Caminho do arquivo mostrado no cabeçalho, como "app/layout.tsx".
showLineNumbersbooleantrueMostra um número antes de cada linha. O leitor de tela pula os números, e eles ficam de fora ao selecionar o texto.
copyLabelReactNode"Copy"Texto do botão de copiar, que também é o nome acessível dele. Diga o que ele copia quando houver vários blocos.
copiedLabelReactNode"Copied"Texto que o botão mostra por 1,8 segundo depois do clique.
highlight(line, lineNumber) => ReactNode—Renderiza cada linha do seu jeito; recebe a linha e o número dela (a partir de 1). Substitui o realce embutido, que colore strings, comentários, palavras-chave de JavaScript e chamadas de função.

Os atributos nativos de <div> vão para a raiz. Não há prop para o <pre> nem um callback para a cópia.

Styling hooks

Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio bloco.

Atributos

data-copiedno botão de copiar, por 1,8 s depois do clique
data-tokencomment · string · keyword · function, do realce embutido

Tokens que ele lê

Cor

--cml-border-control--cml-card-shadow--cml-focus-offset--cml-focus-ring--cml-focus-width

Forma e tamanho

--cml-border-width--cml-radius-popover

Tipografia e movimento

--cml-font-control

Só deste componente

--cml-code-bg--cml-code-border--cml-code-comment--cml-code-fg--cml-code-function--cml-code-header-bg--cml-code-header-border--cml-code-header-fg--cml-code-keyword--cml-code-radius--cml-code-shadow--cml-code-string--cml-corner-shape

Acessibilidade

TabVai para o botão de copiar e depois para o código, mas só quando o código é mais largo que o bloco. Código que cabe não ganha parada de Tab.
Enter / EspaçoCopia o código quando o botão de copiar está em foco.
← / →Rolam as linhas longas para o lado quando o código está em foco.

Relacionados

KbdUma tecla ou atalho dentro de uma frase, como Ctrl + C.TypographyTítulos e textos ao redor do código, incluindo código em linha.CardA superfície que guarda um exemplo de código e a explicação dele.
Esta página foi útil? · Editar esta página no GitHub