Código a Imagen - Convertir Código en Imágenes Bonitas
Convierte fragmentos de código en imágenes compartibles con resaltado de sintaxis. Elige entre temas, fuentes y fondos — alternativa a Carbon.
Preguntas Frecuentes
¿Qué es un convertidor de código a imagen y por qué usarlo?
Un convertidor de código a imagen transforma fragmentos de código fuente en imágenes con estilo visual, resaltado de sintaxis, fondos temáticos y decoraciones de ventana. Los desarrolladores utilizan estas imágenes para compartir código en plataformas de redes sociales donde el formato de código no es compatible de forma nativa, para crear ejemplos de código visualmente consistentes para publicaciones de blog y documentación, y para producir diapositivas pulidas para presentaciones técnicas.
¿Cómo uso esta herramienta de código a imagen?
Pega o escribe tu código en el editor del lado izquierdo, selecciona el lenguaje de programación del menú desplegable, elige un tema de resaltado de sintaxis, personaliza el color de fondo o degradado, estilo de ventana, relleno y tamaño de fuente, observa la vista previa en tiempo real en el lado derecho, luego haz clic en Descargar PNG, Descargar SVG o Copiar al Portapapeles.
¿Mi código está seguro? ¿Se envía a un servidor?
Tu código es 100% seguro y nunca sale de tu navegador. Todo el resaltado de sintaxis se realiza del lado del cliente usando Shiki, y la generación de imágenes usa la biblioteca html-to-image para convertir el elemento DOM en PNG o SVG completamente dentro de tu navegador. No se transmiten código, imágenes ni datos a ningún servidor.
¿Cuál es la diferencia entre exportar PNG y SVG?
PNG es un formato de imagen rasterizada que produce imágenes basadas en píxeles a una resolución fija. Esta herramienta exporta PNG a escala 2x por defecto para calidad retina. SVG es un formato vectorial que puede escalarse a cualquier tamaño sin pérdida de calidad, ideal para materiales impresos, presentaciones y documentación.
¿Qué lenguajes de programación son compatibles?
Esta herramienta admite más de 30 lenguajes de programación populares incluyendo JavaScript, TypeScript, Python, Go, Rust, Java, C, C++, C#, PHP, Ruby, Swift, Kotlin, Dart, HTML, CSS, SQL, Bash, JSON, YAML y muchos más. El resaltado de sintaxis está impulsado por Shiki, que usa las mismas gramáticas TextMate que Visual Studio Code.
¿Cómo obtengo la mejor calidad de salida?
Para las imágenes de mayor calidad: usa escala de exportación 2x o 3x para pantallas retina, elige un tema con buen contraste, usa relleno adecuado (48px o 64px) y habilita la sombra. Para impresión o presentaciones, exporta como SVG para una escala perfecta en cualquier tamaño.
¿Puedo usar las imágenes generadas comercialmente?
Sí, las imágenes que generas son completamente tuyas. Como todo el procesamiento ocurre en tu navegador y esta herramienta es gratuita sin marcas de agua ni requisitos de marca, puedes usar las imágenes de salida para cualquier propósito incluyendo publicaciones comerciales, cursos pagados, presentaciones para clientes y documentación de productos.
¿Qué temas y opciones de personalización están disponibles?
La herramienta ofrece más de 13 temas de resaltado de sintaxis de editores populares, tres estilos de ventana (macOS, Windows, ninguno), fondos sólidos o degradados con selectores de color, opciones de relleno, tamaños de fuente, múltiples fuentes monoespaciadas, alternancia de números de línea, sombra y texto de marca de agua opcional.
Ejemplos de Código
// Code to Image using Shiki + html-to-image
import { codeToHtml } from 'shiki';
import { toPng, toSvg } from 'html-to-image';
// Generate syntax-highlighted HTML
async function highlightCode(code, lang = 'javascript', theme = 'dracula') {
return await codeToHtml(code, { lang, theme });
}
// Export DOM node as PNG
async function exportToPNG(node, scale = 2) {
const dataUrl = await toPng(node, {
pixelRatio: scale,
quality: 1.0,
});
const link = document.createElement('a');
link.download = 'code-snippet.png';
link.href = dataUrl;
link.click();
}
// Copy image to clipboard
async function copyToClipboard(node) {
const dataUrl = await toPng(node, { pixelRatio: 2 });
const res = await fetch(dataUrl);
const blob = await res.blob();
await navigator.clipboard.write([
new ClipboardItem({ 'image/png': blob }),
]);
}