Editor incorporável
Editor de código incorporável
Um editor de código ao vivo e executável para qualquer site: um iframe, sem configuração.
Coloque um editor de código real e executável no seu blog, documentação ou tutorial. Seus leitores escrevem código e veem a saída direto na sua página, com tecnologia da Coddy. Escolha uma linguagem e um tema abaixo, cole seu código inicial e copie o iframe.
<figure style="margin:0;display:flex;flex-direction:column;gap:6px;">
<iframe src="https://coddy.tech/embed-editor?lang=python&code=bmFtZSA9IGlucHV0KCkKYWdlID0gaW50KGlucHV0KCkpCnByaW50KGYiSGVsbG8sIHtuYW1lfSEgWW91IGFyZSB7YWdlfSB5ZWFycyBvbGQuIikK&stdin=QWxpY2UKMzAK&credit=0" width="100%" height="480" style="border:1px solid #e2e8f0;border-radius:8px;" title="Python code editor by Coddy" loading="lazy"></iframe>
<figcaption style="font:13px/1.4 system-ui,sans-serif;color:#64748b;text-align:right;" dir="ltr">Desenvolvido por <a href="https://coddy.tech/embed" target="_blank" rel="noopener" style="color:#0077ff;text-decoration:none;">Coddy</a></figcaption>
</figure>Grátis para usar em qualquer site - mantenha o link "Powered by Coddy" para que outros descubram o editor. É só isso que pedimos.
Por que incorporar o editor da Coddy
Executa código de verdade
Os leitores não apenas olham um trecho: eles o editam e clicam em Executar para rodá-lo nos ambientes isolados da Coddy, com saída, stdin e argumentos de linha de comando.
Mais de 15 linguagens
Python, JavaScript, TypeScript, Java, C, C++, C#, Go, Ruby, Rust, PHP, SQL e mais: um editor, um único padrão de incorporação.
Temas claro e escuro
Combine com o seu site usando o parâmetro theme, ou defina como auto e o editor seguirá a preferência de sistema de cada visitante.
Zero configuração
Sem contas, sem chaves de API, sem JavaScript para instalar. Copie uma tag iframe e o editor funciona em qualquer lugar onde haja HTML.
Como funciona
1. Configure
Escolha a linguagem, o tema e o layout, depois cole o código inicial que seus leitores verão quando o editor carregar.
2. Copie o iframe
O gerador cria uma única tag <iframe> com suas configurações codificadas na URL. Copie-a.
3. Cole no seu site
Coloque o iframe no seu HTML, Markdown, CMS ou página de documentação. O editor é renderizado instantaneamente e fica pronto para executar.
Parâmetros de personalização
A incorporação é configurada inteiramente pela query string da URL do iframe. O gerador acima define isso para você, mas você também pode editá-los manualmente.
| Parâmetro | Valores | Descrição |
|---|---|---|
lang | python, javascript, sql, java, cpp, ... | Qual linguagem o editor executa. O padrão é python. |
theme | light, dark, auto | Tema de cor. auto segue a configuração de sistema do visitante. O padrão é auto. |
code | base64 string | Base64 seguro para URL do código inicial exibido quando o editor carrega. |
layout | side, stacked | Editor e saída lado a lado, ou empilhados verticalmente. O padrão é side. |
stdin | base64 string | Entrada padrão opcional fornecida ao programa ao executar. |
Perguntas frequentes
O editor de código incorporável é gratuito?
Sim. O editor incorporável é totalmente gratuito para usar em qualquer site. Cada incorporação inclui um pequeno link "Powered by Coddy" - mantenha-o para que outros possam descobrir o editor. Esse link é a única coisa que pedimos em troca.
Meus leitores precisam de uma conta Coddy para executar código?
Não. Qualquer pessoa pode editar e executar código no editor incorporado sem fazer login. O código roda nos ambientes isolados da Coddy.
Quais linguagens de programação são suportadas?
Python, JavaScript, TypeScript, Java, C, C++, C#, Go, Ruby, Rust, PHP, SQL e mais: as mesmas linguagens do playground da Coddy, uma linguagem por incorporação.
Posso adaptar o editor ao tema do meu site?
Sim. Defina o parâmetro theme como light ou dark para forçar um tema, ou auto para seguir a preferência de sistema de cada visitante.
A incorporação funciona em qualquer site?
Sim. É um iframe padrão, então funciona em HTML simples, Markdown, na maioria dos CMSs (WordPress, Ghost, Notion, etc.) e ferramentas de documentação que permitam iframes.