Code snapshot convierte fragmentos de código en imágenes PNG estilizadas con decoraciones de ventana, resaltado de sintaxis y un lienzo con degradado. Pega el código, elige el lenguaje y el tema, y descarga una imagen lista para publicar. Está construido sobre ray.so y es útil para artículos técnicos, publicaciones en redes sociales y diapositivas de presentaciones donde las capturas manuales resultan inconsistentes.
Relleno del fondo y cuándo cambiarlo
El relleno controla el ancho del lienzo con degradado alrededor de la ventana de código (deslizador de 0 a 100 px; el rango interno llega hasta 200 px). El valor por defecto en móvil es 32 px y en escritorio 64 px.
- Documentación técnica o README en GitHub: 16–32 px mantiene la imagen compacta
- Portada para redes sociales o tarjeta visual: 48–80 px añade espacio y respiro
El fondo transparente elimina completamente el lienzo con degradado y exporta solo la ventana de código, lo que es útil para incrustar en Figma o superponer sobre fondos personalizados. Algunas plataformas (artículos de WeChat, documentos de Feishu) aplanan los PNG transparentes a blanco al subir el archivo — desactiva el fondo transparente antes de exportar para esos destinos.
Ancho e imagen en alta resolución
El ancho se estima a partir de la línea más larga (número de caracteres × tamaño de fuente × 0,62 + 160) y se limita entre 280 px y 1.600 px (por defecto 960 px). En pantallas retina las dimensiones exportadas son 2× el ancho de visualización, lo que significa que 960 px de ancho en pantalla produce un PNG de 1.920 px — suficiente para publicaciones en alta resolución.
Código que queda bien en imagen
- 10–40 líneas
- Menos de 80 caracteres por línea
- Centrado en una sola función o fragmento clave
- Comentarios irrelevantes y líneas en blanco eliminados
Problemas frecuentes
- Lenguaje incorrecto desactiva el coloreado de sintaxis
- Líneas más anchas que el máximo provocan ajuste de texto
- El fondo transparente puede aplanarse en algunas plataformas
- Con relleno cero desaparece la decoración de degradado
Proteger el código sensible
El renderizado y la exportación ocurren completamente en el navegador — no se envía código a ningún servidor. Aun así, sustituye claves de API y contraseñas reales por marcadores de posición (como TU_CLAVE_API) antes de hacer la captura. Las imágenes publicadas pueden ser indexadas por motores de búsqueda y no se pueden revocar fácilmente.