Código a imagen
Convierte un fragmento de código en una imagen con resaltado de sintaxis en tu navegador, con más de 20 lenguajes, temas y fondos personalizados, números de línea y exportación a PNG o SVG.
Código a imagen — Pega un fragmento, elige su lenguaje (o deja que la detección automática lo adivine) y da estilo a una tarjeta de código estilo Carbon con un tema, un fondo de degradado, sólido, personalizado o transparente, una fuente monoespaciada ajustable, números de línea y un título de ventana editable. Expórtala como PNG a escala 1x–3x o como SVG, o copia la imagen directamente al portapapeles. El resaltado de sintaxis (Prism) y la captura de la imagen (html-to-image) se ejecutan por completo en tu navegador, así que tu código nunca se sube.
¿Qué es Código a imagen?
Código a imagen es una herramienta gratuita que funciona en el navegador y convierte un fragmento de código en una imagen para compartir: una tarjeta de código con resaltado de sintaxis para un artículo de blog, una presentación, un README o una publicación en redes. Resalta más de 20 lenguajes, entre ellos JavaScript, TypeScript, Python, Go, Rust, Java, SQL y más, con una detección automática opcional que adivina el lenguaje a partir de tu código. Viste la tarjeta con uno de siete temas, un degradado predefinido, un color o degradado personalizado o un fondo transparente, y luego ajusta la fuente monoespaciada, el tamaño de fuente, el relleno, los números de línea, el título de la ventana y el ancho de salida. La tarjeta se renderiza en vivo mientras editas y puedes exportarla como PNG a 1x, 2x o 3x, guardarla como SVG o copiarla al portapapeles.
Cómo usar Código a imagen
- Pega o escribe tu código, o conecta la salida de texto de otra herramienta al puerto de entrada en el espacio de trabajo.
- Elige el lenguaje correspondiente o activa la Detección automática en Ajustes para que la herramienta lo adivine desde tu código.
- Elige un tema y un fondo —un degradado predefinido, un color sólido o degradado personalizado, o transparente— en Ajustes.
- Ajusta a tu gusto la fuente monoespaciada, el tamaño de fuente, el relleno, los números de línea, el título de la ventana y el ancho de salida.
- Observa cómo la vista previa se actualiza en vivo mientras editas; haz clic en ella para ampliarla en la vista de zoom.
- Exporta la tarjeta como PNG a 1x–3x, descárgala como SVG o copia la imagen al portapapeles.
Ejemplos
Un fragmento de Go con números de línea
Pega una función de Go, activa la Detección automática para que elija el lenguaje por ti, habilita los números de línea, elige el tema Nord y exporta un PNG 2x para un tutorial.
Una tarjeta de marca con un degradado personalizado
Pon el fondo en Degradado personalizado, elige los dos colores de tu marca y un ángulo, añade un título de ventana como app.tsx y copia la imagen directamente al portapapeles.
Un SVG escalable para documentación
Elige el tema claro Snow, define el ancho de salida y descarga un SVG para que la tarjeta de código se mantenga nítida a cualquier tamaño en tu documentación.
Preguntas frecuentes
- ¿Qué lenguajes puede resaltar?
- Más de 20, incluidos JavaScript, TypeScript, JSX/TSX, HTML, CSS, JSON, Python, Bash, Java, C, C++, C#, Go, Rust, Ruby, PHP, SQL, YAML, Markdown, Kotlin, Swift y GraphQL. Elige uno del menú o activa la Detección automática para que se adivine el lenguaje desde tu código.
- ¿Qué puedo exportar y con qué calidad?
- Exporta un PNG a densidad de píxeles 1x, 2x o 3x, guarda un SVG vectorial o copia la imagen directamente al portapapeles. Al elegir el fondo Transparente, el PNG conserva un canal alfa sin ningún fondo detrás de la tarjeta.
- ¿Puedo cambiar el aspecto de la tarjeta?
- Sí. Cambia entre siete temas, elige un degradado predefinido, un color sólido o degradado personalizado, o un fondo transparente, y ajusta la fuente monoespaciada, el tamaño de fuente, el relleno, los números de línea, el título de ventana editable y el ancho de salida.
- ¿Se sube mi código a algún sitio?
- No. Tanto el resaltado de sintaxis (Prism) como la captura de la imagen (html-to-image) se ejecutan 100% en el lado del cliente, en tu navegador. Tu código nunca se sube, ni se envía a nuestros servidores, ni se comparte, así que incluso los fragmentos privados permanecen en tu dispositivo.
- ¿Por qué la imagen no aparece hasta que pulso Descargar en la página de la herramienta?
- En la página independiente, el PNG se genera al pulsar Descargar, Copiar imagen o Descargar SVG, de modo que escribir no vuelve a capturar la imagen en cada pulsación. La vista previa con estilo sí se actualiza en vivo; en el espacio de trabajo el PNG se reconstruye automáticamente para poder fluir a la siguiente herramienta.
Herramientas relacionadas
Verificador de contraste de color
Comprueba el contraste WCAG 2.1 y la puntuación APCA Lc entre texto y fondo, revisa las insignias AA, AAA y 3:1 y aplica el color válido más cercano.
Mezclador de colores
Mezcla dos colores HEX en la proporción que elijas, en espacio RGB o Lab, y obtén el color intermedio como muestra y valor HEX copiable.
Generador de tonos de color
Convierte un color HEX base en una escala OKLCH, HSL o RGB con pasos ajustables, avisos de contraste WCAG por paso y exportación a CSS, Tailwind y JSON.
Simulador de daltonismo
Sube una imagen y previsualiza cómo se ve con protanopía, deuteranopía, tritanopía o daltonismo total, y luego descarga el resultado simulado.