Código a imagen
Convierte un fragmento de código en una imagen PNG pulida con resaltado de sintaxis en tu navegador, con tema, fondo de degradado o transparente y relleno, sin subir nada.
Código a imagen — Pega un fragmento, elige su lenguaje, tema, fondo y relleno, y exporta una tarjeta de código estilo Carbon como un PNG transparente o con fondo de degradado. 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. La vista previa se actualiza en vivo mientras escribes o cambias las opciones.
¿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 que puedes incluir en un artículo de blog, una presentación, un README o una publicación en redes. Es popular entre programadores, redactores técnicos y docentes que quieren que su código se vea cuidado en lugar de pegar una captura plana. Elige el resaltado para JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python o Bash, y luego viste la tarjeta con un tema, un fondo de degradado o sólido y el relleno que prefieras. La tarjeta se renderiza en vivo mientras editas, y un único botón de Descargar PNG la exporta al doble de resolución.
Cómo usar Código a imagen
- Pega o escribe tu código en el editor, o conecta la salida de texto de otra herramienta al puerto de entrada en el espacio de trabajo.
- Elige el lenguaje correspondiente —JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python o Bash— para que el resaltado de sintaxis sea correcto.
- Abre Ajustes para elegir un tema (Midnight, Graphite o Snow), un fondo (Aurora, Sunset, Ocean, Slate o Transparente) y el relleno (Ceñido, Normal o Amplio).
- Observa cómo la vista previa se actualiza en vivo mientras escribes y cambias opciones; haz clic en ella para ampliarla en la vista de zoom.
- Pulsa Descargar PNG para guardar la tarjeta como una imagen de alta resolución o, en el espacio de trabajo, envía el PNG directamente a una herramienta de imagen posterior.
Ejemplos
Una función de JavaScript para un artículo de blog
Pega una función corta de JavaScript, deja el lenguaje en JavaScript, elige el tema Midnight con el fondo de degradado Aurora y descarga un PNG nítido para incrustarlo en un artículo en lugar de una captura plana.
Un fragmento de CSS transparente para diapositivas
Cambia el lenguaje a CSS y el fondo a Transparente para que el PNG exportado no tenga fondo, dejando que la tarjeta de código quede limpia sobre el fondo de color de una diapositiva.
Una tarjeta de comando Bash para un README
Selecciona Bash, elige el tema claro Snow con el fondo sólido Slate y relleno Amplio, y exporta una tarjeta de comandos limpia y legible para la documentación de tu proyecto.
Preguntas frecuentes
- ¿Qué lenguajes puede resaltar?
- Resalta JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python y Bash. Elige el que coincida con tu fragmento en el menú de lenguajes; si un token no se puede clasificar, simplemente vuelve al color de texto base.
- ¿En qué formato de imagen exporta?
- Exporta un PNG al doble de densidad de píxeles para resultados nítidos. Si eliges la opción de fondo Transparente, el PNG conserva un canal alfa sin ningún fondo detrás de la tarjeta de código.
- ¿Puedo cambiar el aspecto de la tarjeta?
- Sí. En Ajustes puedes alternar entre los temas Midnight, Graphite y Snow, elegir un fondo Aurora, Sunset, Ocean, Slate o Transparente, y fijar un relleno Ceñido, Normal o Amplio alrededor del código.
- ¿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 PNG, de modo que escribir no vuelve a capturar la imagen en cada pulsación. La vista previa con estilo sí se actualiza en vivo mientras editas; en el espacio de trabajo el PNG también se reconstruye automáticamente para poder fluir a la siguiente herramienta.
Herramientas relacionadas
Verificador de contraste de color
Comprueba la relación de contraste WCAG entre un color HEX de primer plano y uno de fondo, y si cumple AA y AAA para texto normal y grande.
Generador de tonos de color
Convierte un color HEX base en una escala de tonos 50-950 al estilo Tailwind, mezclando hacia blanco y negro, con muestra y HEX copiable.
Generador de box-shadow CSS
Crea sombras CSS box-shadow de varias capas con controles de desplazamiento, desenfoque, expansión, color e inset y copia la propiedad lista para usar.
Generador de degradados CSS
Crea un degradado CSS lineal, radial o cónico con paradas de color y un ángulo, previsualízalo en vivo y copia la regla background.