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.
Vem do Trinket? Veja o que o Coddy substitui
<figure style="margin:0;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden"><iframe src="https://coddy.tech/embed-editor?lang=pygame&theme=light&code=aW1wb3J0IHB5Z2FtZQoKcHlnYW1lLmluaXQoKQpzY3JlZW4gPSBweWdhbWUuZGlzcGxheS5zZXRfbW9kZSgoNDgwLCAzNjApKQpweWdhbWUuZGlzcGxheS5zZXRfY2FwdGlvbigiTW92ZSB0aGUgc3F1YXJlIikKY2xvY2sgPSBweWdhbWUudGltZS5DbG9jaygpCmZvbnQgPSBweWdhbWUuZm9udC5Gb250KE5vbmUsIDI4KQoKeCwgeSA9IDIyMCwgMTYwCnNwZWVkID0gNApydW5uaW5nID0gVHJ1ZQp3aGlsZSBydW5uaW5nOgogICAgZm9yIGV2ZW50IGluIHB5Z2FtZS5ldmVudC5nZXQoKToKICAgICAgICBpZiBldmVudC50eXBlID09IHB5Z2FtZS5RVUlUOgogICAgICAgICAgICBydW5uaW5nID0gRmFsc2UKCiAgICBrZXlzID0gcHlnYW1lLmtleS5nZXRfcHJlc3NlZCgpCiAgICBpZiBrZXlzW3B5Z2FtZS5LX0xFRlRdOgogICAgICAgIHggLT0gc3BlZWQKICAgIGlmIGtleXNbcHlnYW1lLktfUklHSFRdOgogICAgICAgIHggKz0gc3BlZWQKICAgIGlmIGtleXNbcHlnYW1lLktfVVBdOgogICAgICAgIHkgLT0gc3BlZWQKICAgIGlmIGtleXNbcHlnYW1lLktfRE9XTl06CiAgICAgICAgeSArPSBzcGVlZAogICAgeCA9IG1heCgwLCBtaW4oeCwgNDgwIC0gNDApKQogICAgeSA9IG1heCgwLCBtaW4oeSwgMzYwIC0gNDApKQoKICAgIHNjcmVlbi5maWxsKCgyNCwgMjgsIDQwKSkKICAgIHB5Z2FtZS5kcmF3LnJlY3Qoc2NyZWVuLCAoMjU1LCAxOTYsIDApLCAoeCwgeSwgNDAsIDQwKSkKICAgIGxhYmVsID0gZm9udC5yZW5kZXIoIlVzZSB0aGUgYXJyb3cga2V5cyIsIFRydWUsICgyMzAsIDIzMCwgMjMwKSkKICAgIHNjcmVlbi5ibGl0KGxhYmVsLCAoMTAsIDEwKSkKICAgIHB5Z2FtZS5kaXNwbGF5LmZsaXAoKQogICAgY2xvY2sudGljayg2MCkKCnB5Z2FtZS5xdWl0KCkK&credit=0" width="100%" height="480" style="display:block;border:0;width:100%" title="Editor de código Pygame do Coddy" loading="lazy"></iframe><figcaption style="box-sizing:border-box;padding:5px 12px;font:11px/1.4 system-ui,-apple-system,sans-serif;color:#64748b;background:#f1f5f9;border-top:1px solid #e2e8f0;text-align:right" dir="ltr">Desenvolvido por <a href="https://coddy.tech/embed" target="_blank" rel="noopener" style="color:#0077ff;font-weight:600;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.
Veja funcionando
Embeds reais, exatamente como aparecem na sua página. Clique em Executar em qualquer um.
Pede um nome e uma idade, e espera cada resposta.
Por que incorporar o editor da Coddy
Executa código de verdade
Os leitores editam o código e clicam em Executar. O Python roda no próprio navegador deles, com um console ao vivo para input() e desenhos de turtle; as outras linguagens rodam nos ambientes isolados do 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, além de HTML e CSS com prévia ao vivo e gráficos de Python com matplotlib. 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, java, sql, html, matplotlib, 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 enviada ao programa ao executar. O Python pergunta ao leitor ao vivo e só usa isso quando roda no servidor. |
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 Python roda no navegador do leitor; as outras linguagens, nos ambientes isolados do Coddy.
Quais linguagens de programação são suportadas?
Python, JavaScript, TypeScript, Java, C, C++, C#, Go, Ruby, Rust, PHP, SQL, R e mais, além de HTML e CSS com prévia ao vivo e gráficos de Python com matplotlib. 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.