Conversor de código a imagen
Transforma tu código en imágenes elegantes para compartir, con resaltado de sintaxis.
¿Por qué usar código → imagen?
Las imágenes de código son perfectas para compartir en redes sociales (Twitter/X, LinkedIn), documentación, presentaciones y tutoriales donde no se dispone de una representación de código formateado. Preservan el resaltado de sintaxis y quedan estupendas en todas las plataformas.
Cómo funciona
- Pega código: introduce cualquier fragmento, JavaScript, Python, CSS, SQL, comandos shell o cualquier otro lenguaje.
- Elige un tema: selecciona un tema claro, oscuro o de alto contraste para el resaltado.
- Personaliza el marco: define el estilo de ventana (macOS/Windows/minimal), el color o el degradado de fondo, el margen interior y el tamaño de fuente.
- Exporta: descarga en PNG o SVG, perfecto para compartir en Twitter/X, LinkedIn o integrar en tus artículos.
¿Por qué convertir código en imagen?
Compartir código como captura de pantalla es mucho más atractivo que pegar texto plano, preserva el resaltado de sintaxis y es más legible de un vistazo en redes sociales. Las imágenes de código las usan masivamente desarrolladores, formadores técnicos y creadores de contenido en Twitter/X, LinkedIn, Instagram y en miniaturas de YouTube. Herramientas como Carbon (carbon.now.sh) popularizaron este formato. Esta versión del lado del navegador genera capturas atractivas sin enviar tu código a un servidor externo, admite todos los lenguajes populares con un resaltado preciso y un estilo de ventana personalizable.
Opciones de personalización
- Estilo de ventana: botones «semáforo» de macOS, controles de Windows o minimal limpio
- Temas de resaltado: Dracula, One Dark, GitHub Light, Monokai y más
- Fondo: color liso, degradado o transparente
- Fuente: JetBrains Mono, Fira Code, Inconsolata y otras
- Margen y escala: para distintos formatos de redes sociales
¿Qué es una herramienta de código a imagen?
Una herramienta de código a imagen toma un fragmento de código fuente, aplica resaltado de sintaxis, lo envuelve en un marco de ventana estilizado y exporta un PNG (o JPG, WebP) listo para compartir en redes sociales, pegar en una presentación o incrustar como imagen héroe de un artículo de blog. El resultado se lee como una captura de pantalla tomada de un hermoso editor de código, excepto que el diseño, tema y marco son reproducibles y la resolución es perfecta al píxel para cualquier relación de aspecto que necesite.
El resaltado de sintaxis es el estilo visual donde las palabras clave (if, function, return) obtienen un color, las cadenas otro, los comentarios se atenúan, y así sucesivamente. Bien hecho, hace el código escaneable en milisegundos. Hecho en texto plano, el mismo fragmento se lee como un muro de gris monoespaciado. El clásico tema oscuro Monokai, GitHub Dark, y Dracula son los más compartidos en redes sociales porque su contraste sobrevive a la compresión de imagen.
Esta herramienta se ejecuta enteramente en su navegador usando highlight.js para detección de lenguaje y html2canvas para rasterizar el DOM estilizado en una imagen descargable. Su código nunca sale de la página. El PNG de salida puede arrastrarse a cualquier tweet, publicación de LinkedIn, doc de Notion o lienzo de diseño, y permanece nítido porque html2canvas renderiza a la proporción de píxeles del dispositivo.
Lo que hay dentro de la herramienta
La columna izquierda es el panel de controles: un área de texto para su código, un menú desplegable de lenguaje con 16 opciones populares (JavaScript, TypeScript, Python, HTML, CSS, JSON, Bash, SQL, Java, C#, PHP, Ruby, Go, Rust, XML, YAML), un selector de tema (Dark Monokai, Light, GitHub Dark), un selector de fondo con cinco gradientes y tres sólidos, más deslizadores de relleno y tamaño de fuente.
Dos casillas alternan los puntos de ventana estilo macOS (los semáforos rojo, amarillo, verde en la parte superior del marco) y números de línea. Los puntos son pura decoración pero hacen que la imagen se lea como una captura de editor de código en lugar de un pegado de texto plano. Los números de línea ayudan cuando hace referencia a una fila específica en un tutorial o reporte de bug.
La columna derecha es la vista previa en vivo: renderiza el código resaltado dentro del marco, relleno y fondo elegidos. Cada control actualiza la vista previa en tiempo real. El botón Descargar PNG serializa la vista previa via html2canvas en resolución nativa y dispara una descarga del navegador. Sin ida y vuelta al servidor, sin subir su código.
Historia y contexto
Impresiones de listado (desde 1944)
El Harvard Mark I en 1944 imprimía listados de programa en papel de alimentación continua, los primeros artefactos de código fuente en salir de la memoria de una computadora. Durante las décadas de 1950 y 1960, las impresoras de líneas producían millas de FORTRAN y COBOL en papel de barras verdes. El formato era monoespaciado porque la rueda de margarita de la impresora tenía solo una fuente, pero la convención se mantuvo: el código fuente es monoespaciado porque cada editor desde entonces ha preservado esa herencia de 80 columnas.
Resaltado de sintaxis en vivo en Emacs (1984)
El Emacs de Richard Stallman añadió font-lock-mode en 1984, el primer resaltador de sintaxis en vivo ampliamente usado. Las palabras clave aparecían en un color, las cadenas en otro, los comentarios atenuados. La codificación visual aceleró la lectura tratando el código como un texto estructurado. Vim añadió sintaxis en 1991, BBEdit en Mac en 1992, y todo editor moderno (VSCode, Sublime Text, JetBrains, Neovim) se basa en este linaje.
Temas TextMate y Monokai (2006)
El TextMate de Allan Odgaard (2004) introdujo archivos de tema que los diseñadores podían compartir. El tema Monokai de Wimer Hazenberg (2006) se convirtió en la estética icónica del código oscuro de finales de los 2000. Sublime Text adoptó Monokai como predeterminado en 2008, y los colores (palabras clave verdes, cadenas rosas, funciones azules sobre fondo oliva oscuro) se volvieron taquigrafía visual para trabajo serio de código.
highlight.js se publica (2006)
Ivan Sagalaev publicó highlight.js en 2006, un resaltador de sintaxis en JavaScript puro que detecta lenguaje automáticamente y produce HTML semántico. Se convirtió en el predeterminado para blogs, sitios de documentación y Stack Overflow. Hoy soporta 190+ lenguajes y 250+ temas. Esta herramienta usa highlight.js para el coloreado de sintaxis subyacente.
Carbon se lanza (2017)
Dawn Labs (Mike Fix y Brian Dennis) lanzó carbon.now.sh en 2017, la primera herramienta de navegador dedicada a hacer hermosas capturas de pantalla de código para redes sociales. Añadió fondos de gradiente, cromo de ventana macOS, relleno configurable y exportación PNG con un clic. Carbon se volvió viral en Twitter y efectivamente inventó la categoría. Esta herramienta ofrece el mismo conjunto de funciones principales enteramente en su navegador, sin cuenta de Carbon requerida.
Ray.so, CodeSnap, Polacode (desde 2020)
Raycast lanzó Ray.so en 2020 con valores predeterminados más limpios que Carbon. CodeSnap y Polacode (2018) trajeron el formato a VSCode como extensiones, permitiéndole capturar código seleccionado sin salir del editor. La categoría maduró en una pieza por defecto del kit de creación de contenido de cada desarrollador. Los patrones (puntos de ventana, fondo de gradiente, fuente monoespaciada, tema de sintaxis) se han estabilizado en un género visual reconocible.
Flujos de trabajo prácticos
Publicación de Twitter o X con fragmento de código
Una imagen de código en un tweet obtiene 3 a 5 veces el engagement del mismo código pegado como texto. Pegue el fragmento, elija un fondo de gradiente (morado o rosa se leen mejor en el timeline), marque puntos de ventana, deje números de línea apagados si el fragmento tiene menos de diez líneas. Descargue PNG, arrástrelo al compositor de tweet.
Publicación de LinkedIn para reclutamiento técnico
Al compartir un consejo del viernes o un insight de revisión de código en LinkedIn, una imagen de código estilizada detiene el scroll. Las imágenes de LinkedIn renderizan mejor en 1200 por 627 píxeles para la tarjeta de vista previa; ajuste el deslizador de relleno hasta que la exportación llene esa relación de aspecto aproximadamente. El tema Dark Monokai se lee bien contra el fondo azul-gris de LinkedIn.
Imagen héroe de publicación de blog
Para un artículo sobre una función o patrón específico, una imagen estilizada de esa función hace un gran héroe Open Graph (1200 por 630 píxeles). La imagen aparece en tarjetas de Twitter, vistas previas de enlaces de Slack y compartidos de Facebook. Pareé con un bloque <pre><code> real, amigable para copiar y pegar dentro del cuerpo del artículo para accesibilidad.
Slide de conferencia
En una presentación de Keynote o Google Slides, las imágenes de código con sintaxis resaltada escalan nítidamente del monitor al proyector. Establezca el deslizador de tamaño de fuente a 18 o 20 píxeles para legibilidad de fila trasera, elija un tema de alto contraste (Dark Monokai o GitHub Dark), y use un fondo transparente para que la plantilla de slide muestre a través.
Banner README de GitHub
Un README se abre mejor con una imagen de código estilizada mostrando el ejemplo hello-world de la biblioteca. La imagen vive en la carpeta docs/ de su repositorio, referenciada via Markdown. GitHub renderiza la imagen nativamente en la página de aterrizaje del proyecto, donde el PNG con sintaxis resaltada se lee mejor que el bloque vallado de texto plano que sigue debajo.
Miniatura o B-roll de tutorial de YouTube
Para un tutorial de codificación, una imagen de código de alta resolución funciona como telón de fondo de miniatura o como B-roll insertado entre segmentos de pantalla en vivo. Exporte con tamaño de fuente de 14 a 16 píxeles con relleno generoso, luego suelte en el editor y redimensione. La imagen permanece nítida en 1080p o 4K porque html2canvas renderiza a la proporción de píxeles del dispositivo.
Trampas comunes
Las imágenes de código no son buscables
Los motores de búsqueda no pueden indexar texto dentro de una imagen (todavía). Si su blog depende del tráfico de Google, integre el código real como un bloque <pre><code> en el cuerpo del artículo. Use la imagen estilizada solo como la miniatura de compartido social o héroe, no como la representación primaria del código.
Los lectores de pantalla no pueden leer código en imágenes
Un usuario ciego con NVDA, JAWS o VoiceOver escucha 'imagen' y nada más cuando se encuentra con una captura de código. Siempre proporcione el mismo código como texto accesible cerca, ya sea via un atributo alt (fragmentos cortos) o un bloque <pre><code> visualmente oculto con la fuente completa. De lo contrario la publicación es inutilizable para tecnología asistiva.
Los lectores no pueden copiar código de imágenes
Cuando la audiencia quiere copiar y ejecutar el código, una imagen los fuerza a retipear u OCRear. Google Lens y macOS Live Text hacen OCR razonablemente bien, pero es fricción. Para tutoriales y how-tos, pareé la imagen (para atractivo visual) con un bloque de texto amigable para copiar y pegar (para usabilidad).
Las líneas largas se envuelven o se cortan
Una consulta SQL de 200 caracteres o una expresión JSX profundamente anidada desborda el marco. La vista previa añade una barra de desplazamiento horizontal, pero el PNG exportado se envuelve torpemente o se recorta. Refactorice el fragmento para caber en aproximadamente 80 columnas, o divídalo en varias imágenes de código más pequeñas. Siempre previsualice antes de exportar.
Tema oscuro sobre fondos claros de redes sociales
Una imagen Monokai oscura se ve genial en un timeline de Twitter en modo oscuro pero crea un contraste duro en un feed en modo claro. Añada relleno alrededor del marco de código oscuro (el fondo de gradiente coloreado ayuda) para que el bloque oscuro no choque contra la página blanca. Inversamente, los temas claros necesitan la consideración opuesta en feeds en modo oscuro.
Resaltado de versiones de lenguaje obsoletas
highlight.js es bueno pero queda detrás del bleeding edge. La nueva sintaxis ES2024 (using disposable resources, decorators) o las funciones async de Rust pueden no resaltarse perfectamente. El código sigue siendo legible, pero una palabra clave puede aparecer como un identificador plano. Use un resaltador diferente (Shiki, Prism) si el coloreado exacto de vanguardia importa.
Privacidad y manejo de datos
Todo el resaltado y rasterización pasan en su navegador. highlight.js analiza su código localmente, html2canvas serializa el DOM renderizado en un PNG, y la descarga se dispara via una URL de blob. No transmitimos su código fuente a ningún servidor, no registramos entradas, y no almacenamos salidas.
Una vez cargada la página (incluyendo los archivos CDN de highlight.js y html2canvas), la herramienta funciona sin conexión. Puede desconectarse de la red y capturar código propietario, ejemplos de API internos o cualquier fragmento que no debe tocar un servicio de terceros. Las bibliotecas CDN se cargan una vez y se cachean localmente.
Cuándo no usar una herramienta de código a imagen
Bloques de código de blog de producción
Dentro del cuerpo de un artículo how-to, use bloques <pre><code> reales con un resaltador del lado del servidor (Shiki, Prism, highlight.js). Los bloques de código reales son seleccionables, copiables, buscables, accesibles y estilizables via CSS dark-mode. Reserve las imágenes para el héroe, miniatura de compartido social o adorno visual, no el código de trabajo.
Documentación que necesita ser buscable
Si su sitio de documentos depende de Algolia DocSearch, GitBook search o cualquier índice de texto completo, el código en imágenes es invisible al motor de búsqueda. Los ingenieros buscando un nombre de función específico no lo encontrarán en su ejemplo solo-imagen. Siempre use bloques de código reales en documentación indexada.
Archivos largos o código multi-pantalla
Un archivo de 200 líneas no cabe en una sola imagen a un tamaño de fuente legible. Divídalo en fragmentos lógicos (una función por imagen), o simplemente comparta un enlace de GitHub gist con la fuente completa. Forzar un archivo largo en un PNG produce un muro de texto diminuto e ilegible.
Código sensible con secretos visibles
Las capturas de pantalla de código con claves API, URLs de bases de datos o credenciales codificadas se raspan de Twitter y se indexan por escáneres de secretos de GitHub en horas. El hecho de que las credenciales estén en una imagen no ralentiza a los atacantes; las tuberías OCR las recogen. Rote inmediatamente cualquier secreto que aparezca en una imagen de código pública.
Más preguntas
¿PNG o SVG, qué formato de exportación debería usar?
PNG es el predeterminado seguro para redes sociales (universalmente soportado, sin pérdida, tamaño pequeño de archivo para imágenes de código típicas). SVG es más nítido a cualquier nivel de zoom pero no es soportado como contenido inline en Twitter, LinkedIn o la mayoría de las plataformas sociales. Para incrustación web en su propio blog, SVG es técnicamente mejor; para cualquier compartido social, manténgase con PNG. Esta herramienta exporta solo PNG.
¿Qué texto alt debería escribir?
Para fragmentos cortos (menos de cinco líneas), ponga el código real en el atributo alt. Para fragmentos más largos, escriba un resumen de una oración en alt (por ejemplo, 'Función JavaScript que obtiene datos de usuario y maneja errores 404') e incluya el código completo como un bloque <pre><code> visible cerca. Nunca deje alt vacío en una imagen de código.
¿Qué dimensiones funcionan para redes sociales?
Twitter/X: 1200 por 675 píxeles (16:9), o 1080 por 1350 para retrato. LinkedIn: 1200 por 627 (paisaje) o 1200 por 1200 (cuadrado). Instagram: 1080 por 1080 (cuadrado). Héroe Open Graph: 1200 por 630. La herramienta exporta al tamaño natural de la vista previa; ajuste relleno y fuente para acercarse al aspecto objetivo, luego recorte o rellene en su editor de imagen si necesita dimensiones perfectas al píxel.
¿Qué fuente es mejor para imágenes de código?
Esta herramienta usa Fira Code, Cascadia Code o Consolas (el navegador elige la primera instalada). Fira Code tiene ligaduras de programación (=> se renderiza como un solo glifo de flecha) que se ven impactantes en capturas. JetBrains Mono y Source Code Pro son alternativas igualmente legibles. Evite generic monospace que puede ser Courier predeterminado del sistema en Windows, lo cual se ve anticuado.
¿Por qué la exportación se ve ligeramente diferente de la vista previa?
html2canvas rasteriza el DOM reimplementando el renderizado CSS en JavaScript. Algunas propiedades (filtros CSS avanzados, ciertas características de fuente, pseudoelementos ::before/::after con fondos complejos) pueden renderizar ligeramente diferentes de la vista previa en vivo del navegador. Las diferencias suelen ser pequeñas, antialiasing sub-píxel o peso de fuente, pero si la exportación se ve mal, simplifique el estilo.
¿Cómo se compara esto con Carbon (carbon.now.sh)?
Carbon tiene más temas, más fuentes y exportación de GIF animado. Esta herramienta cubre el caso del 80 por ciento (exportación PNG, los temas más populares, fondos de gradiente, puntos de ventana) sin enviar su código a un servidor de terceros. Para compartidos puntuales en redes sociales es más rápido; para personalización pesada o consistencia de marca entre muchas imágenes, la biblioteca de presets de Carbon es difícil de superar.