Código a imagen: crea capturas de código legibles para compartir
¿Necesitas una captura de código para un tutorial, una diapositiva o una actualización de proyecto? Pega un fragmento corto en Code to Image, elige el lenguaje, ajusta la presentación y exporta un PNG. Puedes centrar la imagen en el ejemplo sin capturar todo el IDE, las pestañas o el escritorio.
Lo útil es que el fragmento se lea al tamaño de publicación. Esta guía muestra una conversión real de código a imagen, comprueba números de línea y ajustes de texto y conserva una fuente Markdown que se pueda copiar junto a la imagen.
- Abre el generador de capturas de código y pega solo el código que quieras mostrar. No incluyas delimitadores Markdown en el editor específico de código.
- Selecciona expresamente el lenguaje. Comprueba el resaltado de palabras clave, cadenas y comentarios; los colores no demuestran que el código sea correcto.
- Elige tema y fuente. Activa los números de línea si la explicación se refiere a líneas concretas y ajusta el lienzo para que se lea la más larga.
- Exporta un PNG y abre la descarga. Revisa primera y última línea, sangría, llaves y pie de imagen al tamaño que verá el lector.
Elimina la preparación irrelevante antes de reducir la letra o crear una imagen demasiado alta. Si hace falta un módulo completo, comparte el archivo fuente y utiliza la imagen para destacar una parte.
Esta función auxiliar JavaScript da formato a una etiqueta de reintento. No envía solicitudes, programa reintentos ni implementa una política de reintentos para producción. Su brevedad permite comprobar sangría, comillas y llaves de cierre en la exportación.
Guarda esta versión Markdown con el artículo o repositorio. Para usar el editor específico, copia solo el JavaScript dentro del bloque:
```javascript
function retryLabel(attempt, limit = 3) {
if (attempt >= limit) {
return "Stop and review";
}
return `Retry ${attempt + 1} of ${limit}`;
}
console.log(retryLabel(0));
```
La fuente es idéntica en las seis versiones lingüísticas para reproducir el resultado. Si necesitas ayuda con los delimitadores y no con el diseño de la imagen, consulta la guía de bloques de código Markdown.
Abre el PNG completo antes de reutilizar el diseño. Se generó con el editor específico real, JavaScript seleccionado, números de línea activados y salida de imagen a 2×. Conserva la marca de exportación gratuita. Es un fragmento renderizado de verdad, no una captura inventada de un IDE ni un resultado de rendimiento.
Esta imagen sirve de referencia visual en un tutorial o una conversación de equipo. Los números permiten señalar la condición o el retorno, pero el lector sigue necesitando el texto para copiar y comprobar el código.
| Problema | Qué cambiar |
|---|---|
| El texto queda diminuto al insertarlo | Mostrar menos líneas o ampliar el área visible |
| Una expresión larga salta de línea | Ensanchar el lienzo o acortar el ejemplo sin cambiar el significado |
| Las referencias de línea no coinciden | Mantener la misma fuente y ajuste de números durante la explicación |
| Comentarios o cadenas se confunden con el fondo | Elegir mayor contraste y revisar la descarga |
| Se corta la última línea o el pie | Comprobar la altura o abandonar un diseño de altura fija |
| El original es nítido y la versión compartida no | Revisar también la versión subida o insertada |
Más resolución aporta píxeles, pero no vuelve legible un fragmento largo en una columna estrecha. No recortes el inicio, las llaves de cierre o la marca de forma que el ejemplo resulte engañoso. Para formatos sociales, consulta el proceso para compartir imágenes Markdown.
Coloca la fuente delimitada antes o después de la imagen, o enlaza al archivo correspondiente. El texto alternativo debe describir el lenguaje y el propósito del ejemplo. Evita que la imagen sea el único lugar donde se encuentra un comando o un detalle importante de implementación.
La imagen conserva la presentación; el texto permite copiar, buscar y revisar. Si la explicación importa tanto como el fragmento, el editor Markdown permite combinar títulos, prosa y código en una imagen. Si el código es el centro, resulta más directo comenzar con la herramienta específica.
Sí, las exportaciones gratuitas del navegador incluyen marca. Según lo comprobado el 3 de noviembre de 2026, una cuenta gratuita con sesión iniciada recibe cinco exportaciones limpias en total. Para más, consulta Creator o el pase de una exportación en la página de precios. Los nuevos créditos de API corresponden a la API, no a eliminar marcas de las exportaciones del navegador.
Empieza con PNG para este ejemplo con mucho texto. La herramienta también ofrece JPEG, WebP y PDF para entregar documentos. Revisa el archivo después de exportarlo y después de subirlo; esta guía no afirma límites actuales de carga ni reglas de recompresión de ninguna plataforma.
Este proceso da formato al código para una imagen; no demuestra que se haya ejecutado ni que supere pruebas. Revisa y prueba el original en el entorno adecuado antes de recomendarlo.
No. La exportación se procesa en el servidor y no debes dar por hecha una eliminación automática de datos. Retira credenciales, direcciones privadas y datos personales antes de subir un fragmento y sigue las normas de tu organización. Esta guía no promete trabajo sin conexión ni una política concreta de conservación.
Prepara un fragmento corto, expórtalo como imagen de código y revisa la descarga al tamaño de publicación. Añade la fuente correspondiente y una explicación breve de la línea importante. Así obtienes una imagen compartible sin quitar al lector la posibilidad de trabajar con el código.