Convertir código a imagen

Cómo funciona

Copie su código del editor y péguelo en el cuadro de la izquierda. La imagen de la derecha se vuelve a dibujar mientras escribe. Las tabulaciones pasan a 4 espacios, se quitan los espacios al final de cada línea y las líneas vacías del principio y del final, y la sangría queda igual. El ancho sigue a la línea más larga; las líneas no se parten. Ejemplo: una función de JavaScript de 12 líneas cuya línea más larga tiene 60 caracteres da, a 2×, un PNG de unos 1400 píxeles de ancho que se ve nítido en LinkedIn o X. Una línea de más de 100 caracteres hace la imagen muy ancha; la línea de resultado lo avisa. Una imagen admite hasta 400 líneas. El código se dibuja en su navegador y no se envía a ningún servidor.

Esta herramienta también se busca como code to image, code snippet image.

¿Qué es Imagen de código?

Una imagen de código muestra un fragmento de código como imagen en lugar de texto. Se usa en diapositivas, portadas de blog y publicaciones en redes, donde un cuadro de texto rompería la sangría o no mostraría una fuente monoespaciada. El código de una imagen no se puede copiar: si sus lectores deben ejecutarlo, añada también la versión en texto.

¿Qué es Fuente monoespaciada?

En una fuente monoespaciada todos los caracteres ocupan el mismo ancho: una i ocupa lo mismo que una m. Por eso el código se muestra con estas fuentes; solo así la sangría y las columnas alineadas quedan en su lugar. La herramienta usa la fuente de código de su equipo, como SF Mono o Menlo en Mac y Consolas en Windows.

¿Imagen de código o captura de pantalla? ¿Cuál es la diferencia?

Una captura del editor también toma menús, pestañas, subrayados de error y la resolución de su pantalla; recortarla es tedioso y el texto se ve borroso en pantallas chicas. Una imagen de código dibuja solo el código: márgenes, números y fondo son iguales cada vez, se mantiene nítida a 2× y no aparecen nombres de archivo ni rutas del proyecto. Para mostrar el editor, captura; para compartir el código, imagen de código.

Por qué no hay colores de sintaxis ni saltos de línea

La herramienta escribe el código de un solo color y no pinta las palabras clave. Colorear exige reglas para cada lenguaje, y un lenguaje mal adivinado da una imagen más confusa que el texto simple. Los números de línea van atenuados y el código con buen contraste: lo primero es que se lea en una diapositiva o en el celular.

Las líneas no se parten, porque el código partido se lee mal: en Python la sangría tiene significado y un trozo que baja de renglón parece una línea nueva. Una línea larga ensancha la imagen y la línea de resultado avisa; lo más limpio es partir esa línea en el propio código.

Qué ajustes usar en cada caso

En redes sociales, una tarjeta oscura sobre un fondo degradado destaca en el feed. El tema claro cansa menos la vista en diapositivas y documentos blancos y gasta menos tinta al imprimir.

Si va a poner la imagen dentro de otro diseño, elija «Sin fondo»: queda solo la tarjeta de código, con las esquinas transparentes. Deje los números de línea si en una charla dirá «veamos la línea 5»; para un comando de una sola línea se ve más limpio sin ellos.

Preguntas frecuentes

¿Cómo convierto código en imagen?

Pegue su código en el cuadro de la izquierda de esta página. La imagen tipo ventana aparece enseguida a la derecha. Elija los colores y pulse «Descargar» para guardar el PNG.

¿Mi código se envía a un servidor?

No. La imagen se dibuja dentro de su navegador y el código no se sube a ninguna parte, así que puede usarlo también con código interno de su empresa.

¿Tiene resaltado de sintaxis?

No. El código se escribe de un solo color con números de línea atenuados. Se ve igual en todos los lenguajes y nada puede quedar mal coloreado.

¿Por qué mi imagen salió tan ancha?

El ancho sigue a la línea más larga y las líneas no se parten. Una línea de más de 100 caracteres ensancha la imagen; pártala en su código y la imagen se hará más angosta.