Como ele é
Parece a janela de um editor de programação em versão clara, num cartão branco de cantos arredondados. No topo fica uma aba com o nome do arquivo, um selo colorido da linguagem e um ponto quando há alterações não salvas, ao lado dos botões de buscar, recolher tudo e copiar. À esquerda ficam os números das linhas e setinhas para recolher blocos; a linha atual ganha um fundo levemente tingido e um filete na cor de destaque. Palavras-chave aparecem em anil, textos em verde-azulado, números em laranja e comentários em cinza. No rodapé, linha, coluna, recuo e o seletor de linguagem.
Você pode estar procurando isto se pediu algo assim
- editor de código dentro do meu painel admin com cores na sintaxe
- campo para editar JSON de configuração sem bagunçar a formatação
- playground para testar chamadas da minha API no próprio site
- caixa de código com número de linha e busca, tipo VS Code, só que leve
- mostrar e ajustar o código que a IA gerou antes de aplicar
- textarea que vira editor de programação com indentação automática
- editor de código que não deixe a página pesada
Também chamado de
- editor de código
- realce de sintaxe
- syntax highlighting
- editor de código no navegador
- code playground
- editor de JSON
- editor de programação leve
Quando usar
- Playgrounds de API e documentação interativa em que a pessoa edita o exemplo
- Edição de configurações em JSON ou de trechos de script em painéis técnicos
- Revisão e ajuste de código gerado por IA antes de salvar
- Ferramentas internas que pedem busca, dobra e atalhos de IDE sem um editor pesado
Quando evitar
- Projetos que exigem autocompletar inteligente, checagem de tipos ou várias abas de arquivo
- Código em linguagens fora das sete suportadas, como PHP ou SQL
- Leitura de arquivos com linhas longas no celular, já que o texto não quebra e rola na horizontal
Como pedir para a sua IA
Adicione um editor de código leve com realce de sintaxe no playground de API do meu painel: números de linha, busca com Ctrl+F, dobra de blocos, Ctrl+S para salvar, saída do foco com Esc e Tab para não prender o teclado e as cores do meu tema.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Ateliê
Ateliê perde desempenho com arquivos longos?
Ateliê desenha só as linhas visíveis da camada colorida e refaz o realce apenas nas linhas alteradas, o que mantém a digitação e a rolagem leves em arquivos longos. O componente não declara um limite de linhas, então teste com o maior arquivo que o seu sistema precisa abrir e compare o INP.
Ateliê funciona com teclado e leitor de tela?
Sim. Ateliê usa um textarea de verdade, com rótulo da linguagem e uma descrição dos atalhos para leitores de tela. Tab indenta em vez de sair do campo; para sair, pressione Esc e depois Tab. Resultados da busca e mensagens de status são anunciados, Ctrl+/ comenta e Ctrl+Shift com colchete recolhe blocos.
Como salvo o que a pessoa digitou em Ateliê?
Ateliê trabalha com v-model, então o texto fica sempre no seu estado. Ctrl+S emite o evento save com o código atual e tira a marca de alteração pendente, e os métodos getValue e setValue permitem ler e trocar o conteúdo pelo seu código, por exemplo antes de enviar a uma API.
