Coloque no seu site um editor que roda o código

Also in EnglishTambién en español

Este é o editor. Mude o código e aperte Executar:

# Lê o nome e um número da aba Entrada
nome = input()
n = int(input())

print(f"Olá, {nome}!")
for i in range(1, n + 1):
    print(f"{i} ao quadrado é {i * i}")

Ana
5

Coloque com uma tag script

Crie uma chave de widget no seu painel e adicione o script e uma div para cada editor. O código vai num <pre> dentro dela, e a entrada padrão, se houver, num <pre data-stdin>:

<!-- Uma vez por página, ou uma vez no layout do seu site -->
<script src="https://onlinecompiler.io/widget.js"></script>

<!-- Cada editor -->
<div class="runcode" data-key="YOUR_WIDGET_KEY" data-lang="python-3.14" data-locale="pt" data-theme="light">
<pre>
nome = input("Qual é o seu nome? ")
print(f"Olá, {nome}!")
</pre>
<pre data-stdin>Ada</pre>
</div>

data-lang aceita qualquer id de compilador da lista de linguagens, e data-locale="pt" deixa os botões e as mensagens do editor em português. data-theme pode ser dark, light ou auto, data-readonly trava o código, e o editor é renderizado em Shadow DOM, então o CSS da sua página e o do editor não se misturam. Os editores só se conectam quando chegam perto da tela, então uma página longa cheia de exemplos continua rápida.

Ou com um iframe

Muitas plataformas de curso, construtores de sites e wikis removem tags script, mas aceitam iframe. Para esses casos, a página de embed tem um editor só, que ocupa o frame inteiro, com o código e a entrada depois do #:

<iframe src="https://api.onlinecompiler.io/embed/?key=YOUR_WIDGET_KEY&amp;lang=python-3.14&amp;theme=light#code=nome%20%3D%20input(%22Qual%20%C3%A9%20o%20seu%20nome%3F%20%22)%0Aprint(f%22Ol%C3%A1%2C%20%7Bnome%7D!%22)&amp;input=Ada"
  title="Exemplo de Python executável" width="100%" height="400" style="border: 0" loading="lazy"></iframe>

O gerador de embed da documentação (em inglês) monta esse código para você a partir do seu programa. Uma chave restrita ao seu domínio só pode ser usada em frames de páginas desse domínio. No iframe, os botões do editor aparecem em inglês: a opção data-locale é só da versão com a tag script.

Coloque um interpretador Python no seu site

Defina data-lang como python-3.14 e o editor vira um interpretador Python em que o leitor pode digitar. input() e sys.stdin leem da aba Entrada, então programas que pedem entrada funcionam como num terminal. Mude os números na aba Entrada e rode de novo:

import sys, statistics

numeros = [float(n) for n in sys.stdin.read().split()]
print("quantidade:", len(numeros))
print("média:", statistics.mean(numeros))
print("mediana:", statistics.median(numeros))

3 1 4 1 5 9 2 6

Na sua página, é um script e uma div:

<script src="https://onlinecompiler.io/widget.js"></script>

<div class="runcode" data-key="YOUR_WIDGET_KEY" data-lang="python-3.14" data-locale="pt">
<pre>
import sys, statistics

numeros = [float(n) for n in sys.stdin.read().split()]
print("quantidade:", len(numeros))
print("média:", statistics.mean(numeros))
print("mediana:", statistics.median(numeros))
</pre>
<pre data-stdin>3 1 4 1 5 9 2 6</pre>
</div>

Ou um iframe, onde a página não aceita script:

<iframe src="https://api.onlinecompiler.io/embed/?key=YOUR_WIDGET_KEY&amp;lang=python-3.14#code=import%20sys%2C%20statistics%0A%0Anumeros%20%3D%20%5Bfloat(n)%20for%20n%20in%20sys.stdin.read().split()%5D%0Aprint(%22quantidade%3A%22%2C%20len(numeros))%0Aprint(%22m%C3%A9dia%3A%22%2C%20statistics.mean(numeros))%0Aprint(%22mediana%3A%22%2C%20statistics.median(numeros))&amp;input=3%201%204%201%205%209%202%206"
  title="Interpretador Python" width="100%" height="400" style="border: 0" loading="lazy"></iframe>

PyScript e Pyodide são o outro jeito comum de colocar Python numa página, e funcionam de outra forma:

Escolha PyScript ou Pyodide quando o próprio Python deve controlar a página ou funcionar sem servidor. Escolha o widget quando você quer exemplos em mais de uma linguagem, entrada como num terminal ou o mesmo ambiente para todos os leitores. De todo jeito, o widget roda scripts e mostra a saída; ele não hospeda um app web em Python para os leitores acessarem. Professores que estão substituindo embeds do Trinket podem começar pela alternativa ao Trinket (em inglês).

Corrija respostas com a API JavaScript

Cada editor dispara os eventos runcode:run, runcode:result e runcode:error, e OnlineCompilerWidget.get(div) dá acesso a getCode, setCode, run e reset. Este exercício diz ao leitor se a resposta está certa:

<div class="runcode" id="exercise" data-key="YOUR_WIDGET_KEY" data-lang="python-3.14" data-locale="pt">
<pre># Imprima a soma dos números de 1 a 10
print()</pre>
</div>
<p id="verdict"></p>

<script>
  document.getElementById("exercise").addEventListener("runcode:result", (event) => {
    const { exit_code, output } = event.detail;
    const correct = exit_code === 0 && output.trim() === "55";
    document.getElementById("verdict").textContent = correct ? "Correto!" : "Ainda não, tente de novo.";
  });
</script>

Um template oculto (em inglês) pode envolver o código do leitor, para ele editar só o corpo de uma função enquanto o seu código de teste roda em volta. Para corrigir no seu servidor, com testes ocultos e nota, envie o código para a API run-tests (em inglês).

Onde as pessoas usam

• Sites de documentação: as configurações para Docusaurus, MkDocs, Sphinx, Mintlify e WordPress estão em exemplos de código executáveis na documentação (em inglês).
• Cursos e salas de aula: exercícios que os alunos rodam sem conta, na própria página ou num iframe dentro do AVA. Professores que estão saindo do Trinket podem começar pela alternativa ao Trinket (em inglês).
• Blogs e tutoriais: um editor por exemplo, em qualquer uma das 46 linguagens, do Python e do Java ao Rust e ao SQL.

Como ele se compara com outros editores incorporáveis

Se você só precisa de execuções grátis no maior número possível de linguagens, os embeds do OneCompiler e do JDoodle oferecem mais das duas coisas. O nosso é a melhor escolha quando o código do exemplo deve ficar na sua própria página, quando você quer corrigir respostas ou envolver código oculto, ou quando a mesma conta também roda código a partir do seu backend.

Perguntas frequentes

Como colocar um editor de código numa página web?

Adicione uma vez o script https://onlinecompiler.io/widget.js e depois uma div com a classe runcode, a sua chave de widget e uma linguagem, com o código num <pre> dentro dela. Os leitores podem editar e rodar o código em qualquer uma das 46 linguagens, e com data-locale="pt" os botões aparecem em português. Onde o site remove tags script, cole um iframe de https://api.onlinecompiler.io/embed/.

O editor de código incorporável é grátis?

Sim, até 100.000 execuções por mês somando todos os seus editores e chamadas de API, uso comercial incluído, sem cartão de crédito. Os leitores não precisam de conta.

O editor incorporado roda o código ou só colore a sintaxe?

Ele roda o código. Cada execução vai para os nossos servidores e roda num sandbox novo, sem acesso à rede, e a saída, os erros, o código de saída, o tempo de execução e a memória voltam para o editor.

Dá para verificar se a resposta do leitor está certa?

Sim. O editor dispara um evento runcode:result com a saída e o código de saída, então algumas linhas de JavaScript na sua página podem comparar esses dados com a resposta esperada. Um template oculto pode envolver o código do leitor, para ele editar só a parte que importa.

Dá para incorporar num AVA, construtor de sites ou wiki que só aceita iframe?

Sim, se a plataforma aceita iframe. O embed por iframe recebe o código e a entrada depois do # na URL, então cada exemplo é um único iframe e o código nunca chega a um log de servidor.

Como colocar um interpretador Python no meu site?

Adicione o script do widget e uma div com a classe runcode e data-lang="python-3.14", ou cole um iframe de https://api.onlinecompiler.io/embed/ onde scripts não são permitidos. O código roda nos nossos servidores em Python 3.14, e não no navegador do leitor, e input() lê da aba Entrada. Grátis até 100.000 execuções por mês.

A chave do widget é secreta?

Não. As chaves de widget foram feitas para ficar no HTML público: só funcionam no editor, não chamam a API REST e podem ser restritas ao seu domínio.