Inserta en cualquier página web un editor que ejecuta el código

Also in EnglishTambém em português

Este es el editor. Cambia el código y presiona Ejecutar:

# Lee el nombre y un número de la pestaña Entrada
nombre = input()
n = int(input())

print(f"¡Hola, {nombre}!")
for i in range(1, n + 1):
    print(f"{i} al cuadrado es {i * i}")

Lucía
5

Agrégalo con una etiqueta script

Crea una clave de widget en tu panel y agrega el script y un div por cada editor. El código va en un <pre> dentro del div, y la entrada estándar, si la hay, en un <pre data-stdin>:

<!-- Una vez por página, o una vez en la plantilla de tu sitio -->
<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="es" data-theme="light">
<pre>
nombre = input("¿Cómo te llamas? ")
print(f"¡Hola, {nombre}!")
</pre>
<pre data-stdin>Ada</pre>
</div>

data-lang acepta cualquier id de compilador de la lista de lenguajes, y data-locale="es" pone los botones y los mensajes del editor en español. data-theme puede ser dark, light o auto, data-readonly bloquea el código, y el editor se dibuja en Shadow DOM, así que el CSS de tu página y el del editor no se mezclan. Los editores solo se conectan cuando se acercan a la pantalla, así que una página larga llena de ejemplos sigue siendo rápida.

O con un iframe

Muchas plataformas de cursos, creadores de sitios y wikis eliminan las etiquetas script, pero aceptan un iframe. Para esos casos, la página de embed tiene un solo editor que ocupa todo el iframe, con el código y la entrada después del #:

<iframe src="https://api.onlinecompiler.io/embed/?key=YOUR_WIDGET_KEY&amp;lang=python-3.14&amp;theme=light#code=nombre%20%3D%20input(%22%C2%BFC%C3%B3mo%20te%20llamas%3F%20%22)%0Aprint(f%22%C2%A1Hola%2C%20%7Bnombre%7D!%22)&amp;input=Ada"
  title="Ejemplo de Python ejecutable" width="100%" height="400" style="border: 0" loading="lazy"></iframe>

El generador de embed de la documentación (en inglés) te arma este código a partir de tu programa. Una clave restringida a tu dominio solo se puede mostrar en iframes de páginas de ese dominio. En el iframe, los botones del editor aparecen en inglés: la opción data-locale solo existe en la versión con la etiqueta script.

Inserta un intérprete de Python en tu sitio web

Pon python-3.14 en data-lang y el editor se vuelve un intérprete de Python en el que el lector puede escribir. input() y sys.stdin leen de la pestaña Entrada, así que los programas que piden datos funcionan como en una terminal. Cambia los números en la pestaña Entrada y vuelve a ejecutarlo:

import sys, statistics

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

3 1 4 1 5 9 2 6

En tu página, es un script y un div:

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

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

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

O un iframe, donde la página no acepta scripts:

<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(%22cantidad%3A%22%2C%20len(numeros))%0Aprint(%22media%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="Intérprete de Python" width="100%" height="400" style="border: 0" loading="lazy"></iframe>

PyScript y Pyodide son la otra forma común de poner Python en una página, y funcionan distinto:

Elige PyScript o Pyodide cuando Python deba controlar la propia página o funcionar sin servidor. Elige el widget cuando quieras ejemplos en más de un lenguaje, entrada como en una terminal o el mismo entorno para todos los lectores. En cualquier caso, el widget ejecuta scripts y muestra su salida; no aloja una aplicación web en Python para que los lectores la visiten. Los profesores que reemplazan embeds de Trinket pueden empezar por la alternativa a Trinket (en inglés).

Revisa respuestas con la API de JavaScript

Cada editor dispara los eventos runcode:run, runcode:result y runcode:error, y OnlineCompilerWidget.get(div) te da getCode, setCode, run y reset. Este ejercicio le dice al lector si su respuesta es correcta:

<div class="runcode" id="exercise" data-key="YOUR_WIDGET_KEY" data-lang="python-3.14" data-locale="es">
<pre># Imprime la suma de los números del 1 al 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 ? "¡Correcto!" : "Todavía no, inténtalo de nuevo.";
  });
</script>

Una plantilla oculta (en inglés) puede envolver el código del lector, para que edite solo el cuerpo de una función mientras tu código de prueba corre alrededor. Para calificar en tu servidor, con pruebas ocultas y una calificación, envía el código a la API run-tests (en inglés).

Dónde se usa

• Sitios de documentación: las configuraciones para Docusaurus, MkDocs, Sphinx, Mintlify y WordPress están en ejemplos de código ejecutables en la documentación (en inglés).
• Cursos y aulas: ejercicios que los estudiantes ejecutan sin cuenta, en la propia página o en un iframe de la plataforma educativa (LMS). Los profesores que dejan Trinket pueden empezar por la alternativa a Trinket (en inglés).
• Blogs y tutoriales: un editor por ejemplo, en cualquiera de los 46 lenguajes, desde Python y Java hasta Rust y SQL.

Cómo se compara con otros editores insertables

Si lo único que necesitas son ejecuciones gratis en la mayor cantidad posible de lenguajes, los embeds de OneCompiler y JDoodle te dan más de las dos cosas. El nuestro conviene cuando el código del ejemplo debe vivir en tu propia página, cuando quieres revisar respuestas o envolver código oculto, o cuando la misma cuenta también ejecuta código desde tu backend.

Preguntas frecuentes

¿Cómo inserto un editor de código en una página web?

Agrega una vez el script https://onlinecompiler.io/widget.js y después un div con la clase runcode, tu clave de widget y un lenguaje, con el código en un <pre> dentro. Los lectores pueden editar y ejecutar el código en cualquiera de los 46 lenguajes, y con data-locale="es" los botones aparecen en español. Donde el sitio elimina las etiquetas script, pega un iframe de https://api.onlinecompiler.io/embed/.

¿El editor de código insertable es gratis?

Sí, hasta 100,000 ejecuciones al mes entre todos tus editores y llamadas a la API, uso comercial incluido, sin tarjeta de crédito. Los lectores no necesitan cuenta.

¿El editor insertado ejecuta el código o solo lo resalta?

Lo ejecuta. Cada ejecución va a nuestros servidores y corre en un sandbox nuevo, sin acceso a la red, y la salida, los errores, el código de salida, el tiempo de ejecución y la memoria vuelven al editor.

¿Puedo revisar si la respuesta del lector es correcta?

Sí. El editor dispara un evento runcode:result con la salida y el código de salida, así que unas líneas de JavaScript en tu página pueden compararlos con la respuesta esperada. Una plantilla oculta puede envolver el código del lector, para que solo edite la parte que importa.

¿Puedo insertarlo en una plataforma educativa (LMS), un creador de sitios o una wiki que solo acepta iframes?

Sí, si la plataforma acepta un iframe. El iframe recibe el código y la entrada después del # en su URL, así que cada ejemplo es un solo iframe y el código nunca llega a un log de servidor.

¿Cómo inserto un intérprete de Python en mi sitio web?

Agrega el script del widget y un div con la clase runcode y data-lang="python-3.14", o pega un iframe de https://api.onlinecompiler.io/embed/ donde no se permiten scripts. El código se ejecuta en nuestros servidores en Python 3.14, no en el navegador del lector, e input() lee de la pestaña Entrada. Gratis hasta 100,000 ejecuciones al mes.

¿La clave del widget es secreta?

No. Las claves de widget están hechas para ir en HTML público: solo funcionan con el editor, no pueden llamar a la API REST y se pueden restringir a tu dominio.