Saltar al contenido

Código a imagen SVG

Convierte un fragmento de código en una imagen con resaltado de sintaxis, marco de ventana y fondo degradado.

Entrada
14
48
Salida

Código a imagen SVG

Pega un fragmento de código, elige su lenguaje de programación y esta herramienta lo renderiza como una imagen con resaltado de sintaxis dentro de una ventana redondeada — exactamente el tipo de captura de pantalla de código que quieres compartir en un blog, un tweet, una presentación o documentación interna. Las palabras clave, cadenas, comentarios y números se resaltan automáticamente en color, y la ventana obtiene una barra de título opcional al estilo de macOS con puntos de colores para que el resultado se vea como un verdadero editor, no como un volcado de texto plano.

Se admiten nueve lenguajes de programación — JavaScript, TypeScript, Python, JSON, HTML, CSS, Bash, SQL y texto plano — cada uno con sus propias reglas de resaltado para palabras clave, cadenas y comentarios. Elige un tema de fondo entre seis opciones de gradiente (atardecer, océano, medianoche, bosque, uva o mono) y la herramienta envuelve la ventana en una tarjeta degradada coincidente. Ajusta el espaciado alrededor de la ventana, activa la sombra proyectada, establece el título de la ventana e independientemente activa o desactiva los números de línea o la barra de título. El tamaño de la fuente escala la imagen completa, así que tanto una línea corta como una función de cincuenta líneas quedan legibles.

El resultado es un documento SVG independiente e independiente de la resolución: nítido en cualquier tamaño, fácil de insertar directamente en una página o herramienta de diseño, y lo suficientemente pequeño para copiar como texto. El número de líneas, el recuento de caracteres y el tamaño final de la imagen en píxeles se actualizan en tiempo real debajo de la salida mientras escribes o cambias opciones, por lo que ves exactamente lo que estás a punto de copiar o descargar.

Todo sucede en tu navegador usando un pequeño resaltador integrado — ningún código se carga en un servidor, y ningún servicio externo de resaltado de sintaxis nunca ve lo que pegas. Esto lo hace seguro para usar en funciones no publicadas, herramientas internas o cualquier otra cosa que prefieras no enviar a un servidor externo solo para hacer una bonita captura de pantalla.

Preguntas frecuentes

¿Qué lenguajes de programación tienen resaltado de sintaxis?
JavaScript, TypeScript, Python, JSON, HTML, CSS, Bash y SQL tienen resaltado de palabras clave, cadenas, comentarios y números. Elige "Texto plano" para cualquier otra cosa — se renderiza sin codificación de colores.
¿Puedo cambiar el fondo y el aspecto de la ventana?
Sí. Elige uno de seis temas de gradiente, ajusta el espaciado alrededor de la ventana, activa la sombra proyectada e independientemente activa o desactiva la barra de título con puntos de colores y los números de línea.
¿Qué formato tiene la imagen y puedo obtener PNG?
La salida es un SVG vectorial — nítido en cualquier tamaño y fácil de insertar directamente en una página. Para obtener PNG, abre el archivo .svg descargado en tu navegador o un editor de imágenes y expórtalo como PNG; esta herramienta no lo rasteriza automáticamente.
¿Hay un límite de cuánto código puedo pegar?
Sin límite de líneas fijo, pero la imagen generada está limitada a 10 MB. Los fragmentos extremadamente largos que excedan ese límite generan un mensaje pidiéndote que acortes la entrada.
¿Se carga mi código en algún lugar?
No. El resaltado y el renderizado de imágenes ocurren completamente en tu navegador usando un pequeño tokenizador integrado — tu código nunca abandona tu dispositivo.