Código a imagen
Pega un fragmento de código y conviértelo en una imagen nítida con resaltado de sintaxis para diapositivas, documentación, tuits y tutoriales. Elige tema, marco de ventana, fondo y relleno, y descarga un PNG de hasta 4× de resolución. Todo se dibuja en tu navegador.
Última actualización:
Cómo usar Código a imagen
- Pega tu código en el editor. El lenguaje se detecta automáticamente, o puedes elegirlo de la lista.
- Elige un tema y un marco: selecciona un tema de editor, un marco de ventana de macOS o Windows y un nombre de archivo para la barra de título.
- Da estilo al fondo: elige un degradado, un color sólido o transparente, y ajusta el relleno alrededor de la ventana.
- Ajusta los detalles: tamaño de fuente, números de línea y líneas resaltadas. La vista previa se actualiza mientras escribes.
- Descarga el PNG con la resolución que necesites, o haz clic en Copiar imagen y pégala en Slack, un documento o una diapositiva.
Consejos para capturas de código geniales
- Sé breve. De 5 a 25 líneas se leen bien en diapositivas y publicaciones en redes. Quita el código repetitivo y muestra las líneas que importan; luego usa Resaltar líneas para señalar el cambio clave.
- Mantén las líneas por debajo de unos 80 caracteres. La imagen es tan ancha como la línea más larga, así que una sola línea muy larga hace que todo el texto se vea más pequeño cuando la imagen se reduce.
- Elige el contraste según el destino. Los temas oscuros lucen mejor en diapositivas claras y feeds de redes sociales; Paper Light o Solarized Light van bien para material impreso y documentación con página blanca.
- Exporta a 2× o más. Un PNG a 2× tiene el doble de píxeles en cada dirección, así que el texto se ve nítido en pantallas retina y proyectores.
- Añade texto alternativo al publicar. Los lectores de pantalla no pueden leer el código dentro de una imagen. Pega el propio código (o un resumen) como descripción de la imagen, o enlaza a un gist.
Lenguajes admitidos y qué se resalta
| Lenguaje | Se resalta |
|---|---|
| JavaScript, TypeScript | Palabras clave, cadenas y plantillas literales, literales regex, números, funciones, clases, decoradores, tipos de TypeScript |
| Python | Palabras clave, f-strings y docstrings con triples comillas, decoradores, funciones integradas como print y len |
| HTML / XML | Etiquetas, atributos, valores, comentarios, entidades, además de JavaScript y CSS dentro de <script> y <style> |
| CSS | Selectores, pseudoclases, propiedades, propiedades personalizadas, colores, unidades, reglas @ |
| JSON | Claves, valores de cadena, números, true/false/null |
| SQL | Palabras clave en mayúsculas o minúsculas, tipos de datos, funciones, cadenas, comentarios -- y de bloque |
| Bash / Shell | Palabras clave, comandos comunes, $VARIABLES, opciones como -p o --force, cadenas, comentarios |
| Java, Go, C/C++, PHP, Rust | Palabras clave, tipos, funciones, cadenas, números, comentarios, además de anotaciones (Java), líneas del preprocesador (C), $variables (PHP), macros y lifetimes (Rust) |
El resaltador es un tokenizador ligero integrado en esta página, así que funciona sin conexión una vez cargada la página y no se envía nada a ningún servidor.
Preguntas frecuentes
¿Se sube mi código a algún sitio?
No. El resaltado y la imagen se generan en tu navegador con la API Canvas. Tu código nunca se envía a un servidor.
¿Qué lenguajes de programación se admiten?
JavaScript, TypeScript, Python, HTML/XML, CSS, JSON, SQL, Bash/Shell, Java, Go, C/C++, PHP y Rust. También funciona con texto sin formato. La detección automática elige el lenguaje más probable según las palabras clave y la sintaxis, y puedes cambiarlo.
¿Con qué resolución debo exportar?
2× es un buen valor predeterminado: el texto se ve nítido en pantallas retina y en diapositivas. Usa 3× o 4× para imprimir o para pantallas muy grandes. Los fragmentos muy largos se limitan automáticamente al tamaño máximo que pueden dibujar los navegadores.
¿Puedo obtener un fondo transparente?
Sí. Elige Transparente como fondo y el PNG conserva el canal alfa, así que solo se ve la ventana de código (y su sombra) cuando la colocas en una diapositiva.
¿Por qué las imágenes de código usan una fuente monoespaciada?
Las fuentes monoespaciadas dan a cada carácter el mismo ancho, así que la sangría y la alineación del código se ven exactamente como en tu editor. La herramienta usa la fuente monoespaciada de tu sistema (como SF Mono, Consolas o DejaVu Sans Mono).
¿Cómo resalto líneas concretas?
Escribe los números de línea en el cuadro Resaltar líneas, separados por comas, con los rangos escritos como 3-6. Esas líneas reciben una banda suave para que los lectores sepan dónde mirar.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.
Herramientas relacionadas
Ver todas las de Conversores de datos y formatos de archivo →