Saltar al contenido
Toolars
Explorar
Informar de un error

Desarrollo · utilidad Local

Código a imagen

Code to Image Converter

Convierte código en una tarjeta PNG o SVG con resaltado Shiki para seis lenguajes, temas claro y oscuro, números de línea, título y escala 1x o 2x.

Ruta de la tarea / de la entrada al resultado

Pega tu código

Funciona en local · No se sube nada

Cómo funciona Código a imagen, privacidad y herramientas relacionadas

Ruta de la tarea / de la entrada al resultado

Cómo convertir código en una imagen para compartir

  1. 01

    Pega tu código

    Escribe o pega en el campo Código fuente: hasta 65 536 bytes UTF-8, un máximo de 200 líneas y 240 caracteres por línea. El contador junto a la etiqueta muestra los bytes actuales frente al límite, y lo que supere un límite se rechaza con un mensaje que lo nombra, así que sabes exactamente qué recortar.

  2. 02

    Elige el lenguaje y el tema

    Selecciona JavaScript, TypeScript, HTML, CSS, JSON o Bash en Lenguaje y pon Tema en Claro u Oscuro. Los colores de sintaxis provienen de la gramática Shiki correspondiente y de un tema al estilo GitHub, y Cargar ejemplo rellena el campo con un ejemplo breve en el lenguaje elegido para comparar estilos antes de pegar el tuyo.

  3. 03

    Diseña el marco

    Define el color de Fondo, el Relleno de 16 a 96 px y el Tamaño de fuente de 12 a 28 px; añade un Título de la ventana de hasta 80 caracteres, activa o no Mostrar números de línea y elige una Escala de exportación de 1x o 2x. La altura de línea sigue al tamaño de fuente automáticamente, así que la letra grande sigue siendo legible sin ajustes extra.

  4. 04

    Genera la vista previa

    Al generar se carga el tokenizador local, se miden las fuentes reales y el título, y se muestra el mismo SVG escapado que se exportará. El código sigue siendo texto sin ejecutar. Editar elimina la vista anterior. Se rechazan resultados demasiado grandes o imposibles de medir; las vistas anchas se pueden desplazar con el teclado.

  5. 05

    Descarga el SVG o el PNG

    Usa Descargar SVG para el archivo vectorial escalable o Descargar PNG para un mapa de bits renderizado a través de Canvas con la escala elegida. Ambos archivos se producen localmente, y si la combinación elegida superara el tamaño de exportación seguro, el espacio de trabajo lo indica en lugar de escribir un archivo corrupto.

Datos de la herramienta

Procesamiento
En tu navegador
La entrada sale del dispositivo
Nunca
Retención
No se guarda nada
Precio
Gratis

Tus datos se quedan en el navegador.

Código a imagen usa su ruta de ejecución local verificada y no crea un historial oculto de entradas ni salidas.

Ejecución local

Se ejecuta dentro de la pestaña actual del navegador.

Sin procesamiento oculto

Los datos activos de la herramienta nunca se convierten en un registro de documento de Toolars.

No se necesita cuenta

Usa el flujo de trabajo principal sin crear un perfil. Los favoritos se sincronizan con tu cuenta después de iniciar sesión.

Restablecimiento inmediato

Limpia la pestaña y los datos de trabajo activos desaparecen.

Cuándo es útil Código a imagen

Exportar dos líneas de código

Pega dos líneas: const total = 2 + 3; y console.log(total); (40 bytes UTF-8). Elige JavaScript, tema Oscuro, fondo #111827, relleno 64 px, fuente 16 px, números de línea activos, título sum.js y escala 1×. En la prueba local del 2026-09-24, generar la vista previa y descargar PNG produjo toolars-code-image.png, de 406 × 270 píxeles y 12.784 bytes. La imagen muestra el código; no lo ejecuta.

Comparar 1×, 2× y SVG

Conserva el código y los ajustes, cambia a 2×, regenera y descarga PNG. El archivo del 2026-09-24 midió 812 × 540 píxeles y 31.366 bytes. A 1×, descargar SVG produjo toolars-code-image.svg (1.647 bytes) con viewBox 406 × 270. La escala cambia los píxeles PNG, no el código; dimensiones y bytes pueden variar con la fuente y el navegador. Un SVG sin fuente incrustada puede verse distinto.

Recuperarse de una fuente vacía

Vacía Código fuente y pulsa generar vista previa. El espacio pide introducir código y desactiva ambas descargas. Pega de nuevo las dos líneas y vuelve a generar: cualquier cambio borra la vista previa anterior. Si la exportación supera 4.096 píxeles por lado, prueba 1× o reduce el relleno y la fuente.

Qué hace Código a imagen en realidad

Una función de la que estás orgulloso merece salir en las notas de la versión; un fragmento que costó resolver ilustra bien la wiki interna; una diapositiva de conferencia pide un fragmento con estilo en lugar de una captura con las pestañas cortadas. Código a imagen convierte el fragmento en un marco pulido con números de línea y título de ventana, y el SVG o PNG exportado encaja directamente en diapositivas, documentos y chats sin limpieza manual. Como la tokenización y el renderizado ocurren en esta pestaña, el código fuente no publicado no viaja a ninguna parte.

Preguntas frecuentes

¿Cómo creo una imagen de JavaScript para una diapositiva?
Introduce const total = 2 + 3; y elige JavaScript, tema claro y 1x. Genera la vista previa y descarga PNG. La imagen muestra el código, no el resultado 5: la herramienta no lo ejecuta. Para una imagen mayor, cambia a 2x y genera de nuevo; se duplican el ancho y el alto.
¿Cómo exporto un ejemplo JSON como SVG?
Introduce {"ok":true}, elige JSON y genera la vista previa. Descarga SVG para una ilustración escalable o PNG para conservar el aspecto renderizado. Tras editar el texto, genera de nuevo: la vista anterior se borra. Es una exportación de imagen, no una validación de JSON.
¿Cuáles son los límites de entrada?
Hasta 65 536 bytes UTF-8 de código, un máximo de 200 líneas de no más de 240 caracteres y un título de ventana de 80 caracteres o menos. La exportación está limitada a 4 096 píxeles por lado y 16 777 216 píxeles en total; cualquier cosa que supere esos límites se rechaza con un mensaje específico.
¿Mi código se sube o se ejecuta?
Ninguna de las dos cosas. El tokenizador Shiki se carga dentro de esta pestaña solo cuando pulsas Generar vista previa, la vista previa se construye con tokens de texto en lugar de HTML inyectado, y el código nunca se envía a ningún sitio ni se conserva tras limpiar el espacio de trabajo.
¿Qué lenguajes y temas hay disponibles?
Seis lenguajes —JavaScript, TypeScript, HTML, CSS, JSON y Bash—, cada uno tokenizado con su propia gramática Shiki. Los temas Claro y Oscuro son paletas al estilo GitHub, y el control de color de Fondo da estilo al marco alrededor de la tarjeta con independencia del tema que elijas.
¿Qué cambia la Escala de exportación?
1x usa las dimensiones medidas de la imagen. 2x duplica el ancho y el alto, con cuatro veces más píxeles PNG, sin añadir detalles al código ni cambiar el texto. Ambas escalas respetan los límites de exportación. Reduce la escala si el resultado es demasiado grande.
¿Debo descargar el SVG o el PNG?
PNG conserva los píxeles renderizados aquí. SVG se puede escalar; sin una fuente cargada depende de las fuentes del sistema, que pueden cambiar en otro dispositivo. Una fuente cargada y validada se incrusta completa, pero el visor de destino debe admitir fuentes incrustadas. Elige PNG si necesitas una apariencia consistente.
¿Por qué desapareció la vista previa al cambiar un ajuste?
Es deliberado: cualquier edición del código, el lenguaje, el tema, el fondo, el relleno, el tamaño de fuente, el título, los números de línea o la escala invalida la vista previa anterior en lugar de mostrar una imagen obsoleta. Pulsa Generar vista previa otra vez para renderizar el marco actualizado.
¿Qué fuentes puedo incrustar?
TTF/OTF, hasta 24 MiB. Elige una fuente que puedas incrustar. Se admiten fuentes estáticas de contornos sin restricciones de incrustación; no variables ni de color. Se incluye la fuente completa en el SVG. Si faltan caracteres, se detiene la generación. No se suben archivos. Sin selección, el SVG usa fuentes del sistema.

Sigue leyendo

Continuar en Desarrollo

Tareas relacionadas, no un callejón sin salida.

Pasa a otro espacio de trabajo enfocado sin volver al índice completo.

Generador de slugs URL

URL Slug Generator

Convierte títulos en slugs limpios en vivo: sin acentos, & convertido en and, guiones o guiones bajos como separador y escrituras no latinas intactas.

Crear

Sombras para React Native

React Native Shadow Generator

Ajusta sombras de iOS, elevation de Android o la nueva propiedad boxShadow contra una vista previa en vivo, y copia el fragmento StyleSheet.

Crear

Codificador/decodificador Base64

Base64 Encoder/Decoder

Codifica texto Unicode a Base64 y decodifícalo con validación en vivo, opciones UTF-8 y URL-safe, e intercambio para la ida y vuelta. En local.

Convertir

Codificador/decodificador HTML

HTML Encoder/Decoder

Escapa &, <, > y comillas como entidades HTML o decodifica referencias con nombre y numéricas, en vivo y en local, con intercambio de dirección.

Convertir