📸 Captura de codigo

Pega codigo, elige lenguaje, tema y fondo, exporta un PNG bonito. Ideal para redes sociales y articulos.

100% Gratis Sin registro Solo navegador 5 idiomas Modo oscuro

🔒 Sobre la privacidad

・Todo el procesamiento ocurre en tu navegador
・Tu codigo nunca se envia al servidor
・Sin registros, sin historial, sin base de datos
・Sin registro, sin inicio de sesión, sin pago

Idioma

Tema

Fondo

Nombre

Relleno (64)

Codigo

example.js

📖 Dónde se suele tropezar

Pega el código, elige lenguaje, tema y fondo, y exporta un PNG con resaltado de sintaxis. Usa highlight.js y html2canvas, todo en el navegador. El resultado es una imagen, así que el código de dentro no se puede seleccionar, copiar ni buscar: ese único hecho determina casi todo lo que sigue. Funciona bien como decoración, pero como medio para comunicar código es muy inferior al texto.

Caso	Qué ocurre	Qué hacer
El PNG exportado sale borroso	La imagen se exporta con la misma proporción de píxeles que la vista previa —el doble en una pantalla Retina— y aun así se emborrona, porque el daño ocurre después. Súbela a redes o a Slack y la plataforma la reduce automáticamente y la recomprime como JPEG. Las imágenes anchas en particular se encogen mucho para caber en una columna de línea temporal, de modo que una imagen con cuarenta líneas de código resulta prácticamente ilegible en un dispositivo real. Lo incómodo es que se lee bien al abrirla en tu propia pantalla, con lo que el problema pasa desapercibido.	Reducir la cantidad de información funciona mejor que subir la resolución. En concreto, deja el fragmento por debajo de veinte líneas y sube el tamaño de la fuente: el texto sobrevive al reescalado sólo si partía de un tamaño grande. Recortar el relleno también ayuda, ya que al mismo ancho los caracteres quedan relativamente mayores. Cuando quieras mostrar un listado largo, no lo repartas en varias imágenes; simplemente no lo conviertas en imagen: pasadas unas veinte líneas, el código no encaja como fotografía. Ábrelo siempre en un móvil antes de publicar: juzgar sólo desde una pantalla de escritorio es como acabas publicando algo que la mayoría de tus lectores no puede leer.
Los caracteres no latinos y los emoji se desplazan o desaparecen	html2canvas lee el DOM y lo redibuja en un lienzo, pero puede empezar a dibujar antes de que las fuentes web terminen de cargar. Cuando eso ocurre se renderiza con una fuente de reserva, cambian los anchos de carácter y se rompe la sangría. Además, la mayoría de las tipografías monoespaciadas de código no contienen glifos CJK: mezcla japonés en `Monaco` o `Menlo` y sólo el japonés cae a otra fuente, con lo que alturas de línea y anchos de carácter dejan de cuadrar. Los emoji son aún peores: se ven distintos en cada sistema operativo y en algunos entornos los emoji en color no se dibujan y salen como recuadros.	Espera a que carguen las fuentes antes de exportar: `await document.fonts.ready` es lo más sencillo. Para código con japonés, indica explícitamente una monoespaciada compatible con CJK, como `Source Han Code JP`, `BIZ UDGothic` o `MS Gothic`: dimensionan el japonés a exactamente dos columnas de ancho medio, con lo que la sangría se mantiene. Los emoji conviene evitarlos por completo en capturas de código, porque varían demasiado según el entorno. Y como comprobación final, abre el PNG exportado y mira si la sangría cuadra de verdad: la vista previa y la salida no son lo mismo.
Usar una imagen de código en el cuerpo de un artículo	En cuanto se convierte en imagen, tus lectores ya no pueden copiar el código: o lo reescriben a mano o se rinden. Además, los lectores de pantalla no pueden leerlo, la búsqueda del navegador no lo encuentra, la traducción no lo toca y los buscadores no lo ven. Se pixela al ampliarlo en el móvil, y el modo oscuro y las preferencias de tamaño de letra no le afectan en absoluto. Stack Overflow prohíbe expresamente publicar capturas de código justamente porque nada de eso ayuda a una pregunta ni a una respuesta. Lo más valioso de un artículo técnico es que quien lo lee pueda probarlo en su propio entorno, y una imagen lo impide directamente.	Usa las imágenes de código sólo como decoración: tarjetas para redes, cabeceras de artículo, portadas de diapositivas; sitios que nunca pretendieron que se leyera de ellos. El cuerpo del artículo debe llevar un bloque de código en texto. Si quieres las dos cosas, pon la imagen en la cabecera y el mismo código como texto en el cuerpo, y te llevas la apariencia y la utilidad a la vez. La prueba es si quieres que la gente ejecute ese código: si es así, no puede ser una imagen. Incluso al publicar en redes, ofrece una versión en texto en el propio mensaje o tras el enlace: la mayoría de los no me funciona son errores de transcripción.

Una captura recoge cosas que nunca pensaste incluir. Aunque creyeras estar recortando sólo el código, se cuelan rutas de archivo (que a menudo llevan un nombre de usuario), nombres de host internos, identificadores de la empresa, números de incidencia escritos en comentarios y claves o tokens de API. El texto se puede barrer mecánicamente con Ctrl+F, pero una imagen no la atrapa ni la revisión ni la búsqueda, así que permanece publicada mucho tiempo. Abre la imagen y léela línea por línea antes de publicar: seguramente no pasa nada es como empiezan casi todos estos incidentes. Además: convertir el código de otra persona en imagen no borra su copyright. Cuando la licencia exija atribución, haber hecho una captura no exime de nada: si vas más allá de la cita legítima, indica junto a ella la fuente y la licencia.

📖 Cómo usar

1

Pega codigo

Pega tu codigo en el area de texto.
2

Elige lenguaje, tema, fondo

Vista previa instantanea.
3

Guardar como PNG

Descarga PNG o copia al portapapeles.

❓ Preguntas frecuentes

¿Se envia el codigo al servidor?

No. Todo se procesa en el navegador.

¿Lenguajes soportados?

JS, TS, Python, Go, PHP, Ruby, Bash y mas.

¿Resolucion de salida?

Igual que la vista previa.

🔗 Herramientas relacionadas

🐛 ¿Encontró un problema con esta herramienta?

Gratis, sin registro. Incluso solo los pasos para reproducir ayudan. Los informes van directamente al operador y se usan para corregir.