Cómo convertir código en una imagen bonita (para presentaciones, documentación y redes)

¿Por qué compartir código como imagen?

Pegar código como texto en una publicación, una diapositiva o un chat rara vez queda bien: la sangría se rompe, la fuente no es monoespaciada, no hay resaltado de sintaxis y las líneas largas se cortan en cualquier sitio. Una captura de tu editor tampoco es mucho mejor: borrosa, recortada y con tus pestañas y la barra lateral a la vista.

Una imagen de código lo soluciona:

• Redes sociales: en LinkedIn o X, un fragmento resaltado llama mucho más la atención que el texto plano.
• Presentaciones: una imagen nítida encaja en cualquier programa de diapositivas, sin sorpresas de formato.
• Documentación y tutoriales: ilustra un paso con claridad.
• Artículos de blog y newsletters: un estilo visual coherente para cada fragmento.
• Revisiones de código y docencia: señala un pasaje concreto.

Crea una imagen de código en unos segundos

La herramienta Código a imagen convierte tu código en un PNG nítido. El resaltado y el dibujo se hacen en tu navegador: tu código nunca llega a un servidor.

1. Pega tu código. El lenguaje se detecta automáticamente, o elígelo entre más de 20: JavaScript, TypeScript, Python, Java, C#, C++, Go, Rust, PHP, Ruby, Kotlin, Swift, SQL, Bash, JSON, YAML, HTML, CSS, Markdown, Dockerfile…
2. Elige el estilo: tema de editor, fondo (degradados o ninguno), marco de ventana, números de línea.
3. Exporta: descarga el PNG o cópialo directamente al portapapeles para pegarlo en una publicación o diapositiva.

La imagen se exporta al doble del tamaño mostrado (2x), así que sigue nítida en pantallas de alta densidad y en documentos. Con el fondo vacío, el PNG conserva las esquinas transparentes — listo para colocarlo sobre cualquier diapositiva.

Hazla legible

Una imagen de código solo sirve si se puede leer, a menudo en un móvil:

Regla	Por qué
15 líneas como máximo	En el móvil, las imágenes más largas se vuelven diminutas
60–70 caracteres por línea	Evita la lectura horizontal en pantallas pequeñas
Una idea por imagen	Muestra lo esencial, no el archivo entero
Tema con contraste	Los temas de poco contraste se vuelven ilegibles al comprimirlos las plataformas
Nombres claros	numeroUsuarios se explica solo; x necesita contexto

Quita imports, logs y código repetitivo que no aporte. Si hace falta, formatea antes el fragmento (para JSON, el formateador JSON; para SQL, el formateador SQL).

Añade siempre también la versión en texto

Una imagen de código tiene dos inconvenientes: no se puede copiar y es invisible para lectores de pantalla y buscadores. Buena práctica:

• añade el código como texto en el primer comentario, en un gist o en el texto alternativo,
• o usa el botón Compartir de la herramienta: crea un enlace que vuelve a abrir la herramienta con el mismo código y los mismos ajustes, para que otros puedan copiar el código como texto o retocar la imagen. El código viaja dentro del propio enlace (después del #), que los navegadores nunca envían al servidor.

Ideas para usar imágenes de código

• Una serie de «truco del día» en LinkedIn.
• Un antes / después de una refactorización (dos imágenes una al lado de otra).
• Diapositivas para un meetup o un curso.
• Ilustraciones para el README de un proyecto de código abierto.
• Una chuleta para tu equipo.

Conclusión

Una buena imagen de código es corta, con contraste, centrada en una idea — y siempre acompañada de su versión en texto. Con una herramienta que resalta y dibuja en tu navegador, lleva unos segundos y produce un PNG lo bastante nítido para cualquier pantalla o diapositiva.