Ir al contenido

Código a imagen: convierte tu código en una imagen

Código a imagen es una herramienta gratuita en línea que convierte un fragmento de código en una imagen para compartir. Pegas el código, eliges el lenguaje y el tema, y descargas el resultado en PNG o JPG. No hace falta instalar nada ni crear una cuenta en la versión gratuita.

  • Las líneas no se ajustan. Una línea larga hace la imagen más ancha, y los tabuladores se convierten en 4 espacios.
  • La fuente es solo Liberation Mono. Los caracteres que no contiene se dibujan con una fuente de respaldo y pueden no alinearse.
  • En la herramienta gratuita, la altura de la imagen se limita a 2000 px a 1x. La herramienta lo indica si tu código es más alto.

3 KB de 256 KB permitidos en la herramienta web gratuita.

Lenguaje detectado: javascript. 7 líneas. Imagen: 516 x 346 px a 1x.

Vista previa

Se dibuja con las fuentes de tu navegador, así que el espaciado puede diferir ligeramente del resultado del servidor.

Completa la verificación de seguridad para activar el botón.

Resultado

Tu imagen aparecerá aquí.

La herramienta web gratuita captura como máximo 2000px de altura. Para capturas más altas, usa la API.

Conservación: los resultados de la herramienta web se eliminan tras 10 minutos y no se guarda historial. Los resultados de la API se conservan 1 día en el plan gratuito y 7 días en Starter y Pro (30 días en Business y Scale).

  • No necesitas cuenta

    10 por minuto y 50 al día gratis.

  • Renderizado en navegador real

    Chromium sin interfaz (headless), el mismo motor que la API.

  • Eliminación automática

    Los resultados de la herramienta web se eliminan tras 10 minutos.

Privacidad: lo que envías solo se usa para crear este archivo. La copia de trabajo se elimina al terminar la tarea, y el resultado, tras 10 minutos. Consulta la política de privacidad.

Hazlo desde tu código

La misma petición, creada a partir de la entrada y las opciones de arriba. Crea una cuenta para obtener una clave de API.

curl -X POST https://api.aiipworld.com/v1/render \
  -H "Authorization: Bearer $AIIPWORLD_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"html":"","output":"pdf","options":{}}'

# returns {"job_id": "...", "status": "queued"}; then poll:
curl https://api.aiipworld.com/v1/jobs/JOB_ID -H "Authorization: Bearer $AIIPWORLD_API_KEY"

Lotes

La herramienta web procesa 1 documento a la vez. La API acepta una petición por cada documento, así que puedes automatizar tantas como permita tu plan.

Más control

La captura de página completa (full_page), el recorte a una región, los encabezados de la petición y un agente de usuario personalizado son opciones de la API. Consulta la documentación.

Conservación

Los resultados de la herramienta web se conservan 10 minutos; los resultados de la API gratuita, 1 día; los de Starter y Pro, 7 días; los de Business y Scale, 30 días. La herramienta web permite 10 conversiones por minuto y 50 al día por visitante.

En una frase

Código a imagen es una herramienta gratuita en línea que convierte un fragmento de código en una imagen para compartir, con colores de sintaxis, un tema y un marco de ventana opcional.

Datos clave

  • Entrada: código, con detección automática del lenguaje o una elección de 21 lenguajes.
  • Temas: Midnight, Paper y Graphite; fondos: degradados Ocean, Sunset y Mint, Slate, White o Transparent (solo PNG).
  • Salida: PNG o JPG a 1x, 2x o 3x (2x por defecto), de hasta 4000 px de ancho y 2000 px de alto a 1x; el código se escribe en Liberation Mono y las líneas no se ajustan.
  • Gratis sin cuenta: hasta 10 conversiones por minuto y 50 al día por visitante, sin marca de agua. Con sesión iniciada, cada renderizado cuesta 1 crédito (100 créditos gratuitos cada mes).
  • Los archivos se eliminan automáticamente: 10 minutos tras la conversión sin cuenta, 1 día con una cuenta gratuita.
  • Puedes ejecutar el mismo renderizado con POST https://api.aiipworld.com/v1/render y una clave de API (consulta la página API de capturas de pantalla).

Cómo funciona

  1. Pega tu código en el cuadro, o deja el ejemplo que aparece para probar la herramienta.
  2. Elige un lenguaje de la lista o deja la detección automática.
  3. Elige un tema de color y un fondo. Activa los números de línea o un título de ventana si los quieres.
  4. Define el tamaño del texto, el margen, el formato (PNG o JPG) y la densidad de píxeles (1x, 2x o 3x).
  5. Completa la verificación de seguridad si aparece, haz clic en Crear imagen y descarga el archivo.

Ejemplo de resultado

Fragmento de código JavaScript renderizado como imagen
Un fragmento de JavaScript con el tema Midnight, degradado Ocean y densidad 2x. Generado con el motor propio de este sitio. Abrir el archivo (o selecciona la imagen) para verla a tamaño completo.

Código a imagen: convertir código en una imagen

Pegas el código y la herramienta lo dibuja como una imagen. No necesitas instalar software ni crear una cuenta.

El uso anónimo pide primero una verificación de seguridad rápida.

La imagen se ajusta al código: el ancho depende de la línea más larga y el alto, del número de líneas. Puedes añadir un margen exterior alrededor del código. Es útil para documentación, publicaciones en redes sociales y diapositivas.

Lenguajes y temas de color

Elige el lenguaje de la lista o deja que la herramienta lo detecte. Están disponibles 21 lenguajes: JavaScript, TypeScript, Python, JSON, Shell, CSS, HTML/XML, SQL, Go, Rust, Java, C, C++, C#, PHP, Ruby, YAML, Markdown, Diff, Kotlin y Swift.

El tema de color define el aspecto de la ventana: Midnight es oscuro, Paper es claro y Graphite es gris oscuro.

Fondos, ventana y números de línea

Elige un solo fondo para la imagen.

  • Degradado Ocean, Sunset o Mint.
  • Fondo liso Slate o White.
  • Transparente. El fondo transparente funciona solo con PNG. JPG no tiene transparencia, así que un fondo transparente se guarda en blanco.
  • Puntos de ventana: tres puntos de colores dibujados en CSS que dan a la imagen un marco de ventana. Título de ventana: un texto corto en la barra de título. Números de línea: actívalos para código que se explica línea por línea.

Tamaño de la imagen y nitidez

El tamaño del texto se define en píxeles, de 10 a 32 px. El margen exterior también se define en píxeles.

La densidad de píxeles puede ser 1x, 2x o 3x. El valor por defecto es 2x. Elige 3x si la imagen se va a mostrar en tamaño grande.

Elige PNG o JPG. Usa PNG si necesitas un fondo transparente.

En la herramienta gratuita, la altura se limita a 2000 px a 1x. Si la imagen supera ese límite, la herramienta muestra un aviso.

Fuente y fuente de respaldo

La imagen usa Liberation Mono, una fuente monoespaciada que cubre letras latinas, griegas y cirílicas.

Los caracteres que la fuente no tiene, como los chinos, se dibujan con una fuente de respaldo. Esos caracteres pueden no alinearse con la cuadrícula monoespaciada.

En esta herramienta no se puede elegir otra fuente. Las fuentes de tu dispositivo no están en el servidor de renderizado. Para usar otra fuente, crea la imagen con el conversor de HTML a imagen y carga la fuente con @font-face desde una URL pública o una URL de datos.

Líneas largas y archivos largos

Las líneas no se ajustan. Una línea larga hace la imagen más ancha. Si la imagen queda demasiado ancha, divide las líneas largas en el código antes de pegarlo.

Los tabuladores se convierten en 4 espacios, así que la sangría puede ser distinta a la de tu editor. Un archivo largo produce una imagen alta.

En la herramienta gratuita, la altura se limita a 2000 px a 1x. Para un archivo más largo, sepáralo en partes y crea una imagen por parte.

Generar imágenes con la API

Si necesitas muchas imágenes, usa la API en lugar de la herramienta web. La API tiene una operación de captura de pantalla que recibe HTML. Envuelve el código en HTML y escapa caracteres como < y & para que se vean bien. Envíalo a esa operación.

Crea una clave de API en el panel. Envíala como Authorization: Bearer seguido de la clave, o en la cabecera x-api-key. Mantén la clave en secreto y no la publiques.

Las peticiones son asíncronas. POST /v1/render devuelve un job ID con la respuesta 202. Consulta GET /v1/jobs/ con el job ID hasta que el estado sea succeeded, failed o timeout, y descarga el archivo desde el enlace de descarga, que tiene una vida corta. Los créditos de las tareas fallidas y de las que superaron el tiempo límite se devuelven. No hay un endpoint por lotes: envía una petición por imagen.

Comprobaciones antes de compartir

Una imagen de código es solo una imagen, y cualquiera que la vea puede leer cada línea. Quita claves, contraseñas y datos personales antes de pegar el código.

Revisa el lenguaje elegido, decide si quieres números de línea y elige una densidad de píxeles adecuada para el lugar donde aparecerá la imagen. Es adecuada para guías y charlas.

Si vas a poner un PNG en una diapositiva sin caja de fondo, elige PNG y el fondo Transparent. Recuerda que la transparencia funciona solo con PNG.

Fragmento de código a imagen en línea

Empiezas pegando el código en el cuadro, eliges el lenguaje y el tema, y descargas la imagen. No hace falta instalar nada ni tener cuenta.

Úsalo cuando no se permita un bloque de código donde publicas, por ejemplo en una diapositiva o en una publicación de redes sociales. Mantén el fragmento corto, porque las líneas largas hacen la imagen ancha.

Preguntas frecuentes

¿Cómo convierto código en una imagen?

Pega el código en la herramienta, elige el lenguaje y el tema de color, y descarga la imagen en PNG o JPG. En la versión gratuita no necesitas cuenta, aunque es posible que antes aparezca una verificación de seguridad.

¿Qué lenguajes son compatibles?

Son compatibles 21 lenguajes: JavaScript, TypeScript, Python, JSON, Shell, CSS, HTML/XML, SQL, Go, Rust, Java, C, C++, C#, PHP, Ruby, YAML, Markdown, Diff, Kotlin y Swift. También puedes dejar la detección automática.

¿Puedo obtener un PNG transparente?

Sí. Elige el fondo Transparent y guarda la imagen en PNG. No es posible en JPG, porque JPG no tiene canal de transparencia y un fondo transparente se guarda en blanco.

¿Por qué el texto no se ajusta a la línea?

Las líneas no se ajustan para mantener el código tal como está. La imagen toma el ancho de la línea más larga, así que una línea larga la hace más ancha. Para una imagen más estrecha, divide las líneas largas en el código.

¿Puedo usar mi propia fuente?

No en esta herramienta. La imagen siempre usa Liberation Mono. Para usar otra fuente, crea la imagen con el conversor de HTML a imagen y carga la fuente con @font-face desde una URL pública o una URL de datos.

¿Qué tamaño tiene la imagen?

El tamaño depende del código: el ancho viene de la línea más larga y el alto, del número de líneas. En la herramienta gratuita, la altura se limita a 2000 px a 1x. La densidad de píxeles 1x, 2x o 3x escala el resultado.

¿Se guarda mi código?

Los resultados se eliminan tras 10 minutos, y no se guarda un historial de conversiones. Aun así, no pegues claves, contraseñas ni otros secretos en ninguna herramienta en línea.

¿Puedo crear un JPG?

Sí. Elige JPG como formato. JPG no tiene transparencia, así que un fondo transparente se guarda en blanco. Si necesitas fondo transparente, elige PNG.

¿Cómo lo hago desde un script?

Usa la API. Su operación de captura de pantalla recibe HTML, así que envuelve el código en HTML y envíalo con tu clave de API. Después consulta la tarea hasta que tenga éxito y descarga el archivo.

¿La imagen lleva marca de agua?

No. Las imágenes de la herramienta gratuita no llevan marca de agua. El uso anónimo necesita una verificación de seguridad, y los usuarios con sesión iniciada la omiten.

¿La herramienta es gratis?

Sí. La herramienta gratuita se usa sin cuenta. La API necesita una clave de API y usa un plan con créditos.

¿Puedo hacer una captura de código sin instalar software?

Sí. Pega el código, elige el lenguaje y el tema de color, y descarga la imagen. La herramienta funciona en el navegador y en el servidor de renderizado, así que no hay nada que instalar. En la versión gratuita no necesitas cuenta, aunque puede aparecer antes una verificación de seguridad.

¿Puedo usar una imagen de código en un blog o en diapositivas?

Sí. Puedes colocar el PNG o el JPG en una entrada de blog, en una presentación o en una publicación de redes sociales. Antes de compartirla, comprueba que el código no tenga claves ni contraseñas, porque cualquiera que la vea puede leerlo.

¿Puedo convertir una función corta en una imagen para una publicación?

Sí. Unas pocas líneas funcionan bien, porque la imagen se ajusta al código. Un archivo largo produce una imagen alta. Elige un tema y un fondo que encajen con el feed y descarga el PNG. Si la publicación se verá en grande, elige la densidad 2x.

¿Lo necesitas en tu aplicación o por lotes?

Esta herramienta funciona en la API de renderizado, así que el mismo imagen es una sola petición HTTP desde tu código. Una cuenta gratuita incluye 100 créditos al mes.

Herramientas relacionadas