Código a imagen: convierte fragmentos de código en capturas PNG o SVG | We.Inc
Pega código y obtén una imagen limpia: colores de sintaxis, seis temas, fondos degradados, barra de ventana, números de línea y tamaños para redes sociales. Exporta un PNG nítido a 2x o un SVG. Gratis y en tu navegador.
Generador de imágenes de código
Una imagen de código es una captura de un fragmento con colores de sintaxis, márgenes y un fondo, pensada para diapositivas, publicaciones y documentos donde no se pueden usar bloques de código reales. Pega el código abajo, elige lenguaje, tema y fondo, escoge un tamaño como 1200 por 675 y descarga un PNG nítido o un SVG.
Tamaños predefinidos
Ajuste
Píxeles
Ideal para
Automático
Se ajusta al código
Documentación, diapositivas, archivos README
Horizontal 16:9
1200 por 675
Vistas previas de enlaces y publicaciones anchas
Cuadrado
1080 por 1080
Publicaciones cuadradas
Vertical 4:5
1080 por 1350
Publicaciones verticales
Pega o escribe código y la vista previa se actualiza al momento. El lenguaje se detecta automáticamente, o puedes elegir uno de nueve. Los PNG se exportan al doble de tamaño para que el texto se vea nítido en pantallas de alta densidad.
Pega el código en el editor. El lenguaje se deduce del contenido; cámbialo si no acierta.
Elige un tema, un fondo y un tamaño. Activa o desactiva la barra de ventana y los números de línea, y ajusta el margen y el tamaño de fuente.
Añade un nombre de archivo para mostrarlo en la barra de ventana si ayuda al lector.
Descarga un PNG (renderizado a 2x) o un SVG que conserva el código como texto real y seleccionable.
Usa fragmentos cortos. Entre diez y veinte líneas se leen bien en una publicación; el código más largo va mejor en un gist o en un bloque de código que se pueda copiar.
Usa un tamaño de fuente de 16 o más en redes sociales, que a menudo se ven en el móvil.
Cuando compartas una imagen de código, comparte también el código como texto o enlace. Los lectores de pantalla no pueden leer la imagen y nadie puede copiar de ella.
Elige un tema claro para diapositivas en salas iluminadas y uno oscuro para pantallas y redes sociales.
Preguntas frecuentes
¿Se sube mi código a algún sitio?
No. El resaltado y la exportación de la imagen se hacen en tu navegador. No se envía nada a ningún servidor, así que es seguro para código privado.
¿Por qué el PNG tiene el doble del tamaño que elegí?
Se exporta con densidad de píxeles 2x para que el texto siga nítido en pantallas de alta resolución de móviles y portátiles. Al mostrarse al tamaño elegido, cada píxel CSS tiene cuatro píxeles de imagen detrás.
¿Para qué sirve la exportación SVG?
El SVG conserva el código como texto dentro de una imagen vectorial, así que se escala a cualquier tamaño y en algunos visores el texto aún se puede seleccionar. Usa la fuente monoespaciada del propio visor, por lo que puede verse algo distinto del PNG en otro ordenador.
¿Qué precisión tiene el resaltado de sintaxis?
Es un tokenizador ligero que colorea palabras clave, cadenas, números, comentarios, funciones, etiquetas y atributos. Eso cubre lo que hace legible un fragmento en una imagen. No es un parser completo, así que una sintaxis poco habitual puede aparecer como texto plano.
Cómo hacer imágenes de código que la gente lea
Recorta hasta lo que importa. Quita imports y código repetitivo salvo que sean el tema, y usa un comentario para señalar la línea que quieres que miren.
El contraste importa tanto en una imagen como en una página. Los temas de aquí mantienen los comentarios legibles pero más discretos que el código, y distinguen bien las cadenas de las palabras clave.
Texto alternativo para imágenes de código
Al publicar la imagen, describe en el texto alternativo lo que hace el código, por ejemplo: función de JavaScript que aplica debounce de 300 milisegundos a un campo de búsqueda. Pega el código en el cuerpo de la publicación o en una respuesta si la plataforma lo permite.
Medianoche
Brasa
Bosque
Noche violeta
Papel
Arena
Cielo
Atardecer
Menta
Pizarra
Melocotón
Ninguno
Automático
1200 por 675
1080 por 1080
1080 por 1350
Crea una imagen
Código
Lenguaje
Detectar ({lang})
Tamaño
Margen: {n}px
Tamaño de fuente: {n}px
Nombre de archivo
Barra de ventana
Números de línea
Tema
Fondo
Vista previa de la imagen de código {lang}
{w} por {h} px (el PNG se exporta a {w2} por {h2})