Código a imagen

Pega un fragmento de código, elige uno de los cuatro temas incluidos, ajusta colores, tamaño de fuente, relleno, cabecera opcional y números de línea, y descarga un PNG renderizado desde un canvas del navegador. La herramienta dibuja texto plano: sirve para imágenes limpias de código, pero no analiza lenguajes ni aplica resaltado de sintaxis.

Cómo crear un PNG de código

  1. 1

    Pega el fragmento

    Usa el cuadro de código para JavaScript, HTML, CSS, JSON, comandos de shell o cualquier otro texto plano. El renderizador conserva hasta las primeras 400 líneas.

  2. 2

    Define el aspecto

    Elige Oscuro, Claro, Dracula o Solarized, y ajusta título, tamaño de fuente, relleno, fondo, texto y color de acento.

  3. 3

    Revisa el canvas

    El navegador dibuja cada línea como texto de canvas, con cabecera de ventana y números de línea opcionales. Las líneas largas pueden ensanchar el canvas hasta el máximo integrado.

  4. 4

    Descarga el PNG

    Exporta el canvas actual como imagen PNG para documentación, notas, diapositivas o publicaciones. No incluye exportación SVG, JPEG ni HTML.

Qué hace el renderizador

Control Qué puedes cambiar Notas
Tema Oscuro, Claro, Dracula, Solarized Cada tema establece los colores iniciales de fondo, texto y acento.
Estilo del texto Título, tamaño de fuente, relleno La fuente está limitada a 10–40 px y el relleno a 20–200 px.
Colores Fondo, texto, acento El color de acento se usa para los números de línea.
Cabecera Cabecera estilo ventana activada o desactivada El título aparece en la cabecera cuando está activa.
Números de línea Mostrar u ocultar Los números se dibujan como texto plano en el canvas.
Exportación Descarga PNG El botón de descarga guarda el canvas actual como imagen PNG.

Límites prácticos

  • El navegador dibuja el fragmento como texto plano con la API Canvas. No detecta JavaScript, Python, HTML ni ningún otro lenguaje.
  • La vista previa usa las primeras 400 líneas para evitar que archivos muy grandes bloqueen la página.
  • El ancho del canvas se mantiene entre 420 px y 2200 px. Las líneas muy largas pueden alcanzar el ancho máximo.
  • La versión de dos pasos guarda tus entradas en sessionStorage para la pestaña actual mientras pasas de edición a descarga.

Nota de accesibilidad

El código dentro de una imagen no se puede buscar, copiar ni leer con lectores de pantalla. Usa el PNG como apoyo visual y conserva el fragmento real cerca en texto seleccionable cuando publiques documentación, tutoriales o informes de errores.

Preguntas frecuentes

No. Dibuja exactamente el texto que pegas sobre un canvas. Puedes cambiar colores y temas, pero no hay selector de lenguaje ni analizador de sintaxis.

El menú incluye Oscuro, Claro, Dracula y Solarized. Después de elegir un tema puedes sobrescribir fondo, texto y color de acento.

No. La salida es una descarga PNG creada desde el canvas. No hay exportación SVG, JPEG ni copiar como HTML.

La vista previa dibuja las primeras 400 líneas para mantener el navegador ágil. Para publicar imágenes, suele ser mejor recortar a las pocas líneas que explican la idea.

Herramientas relacionadas