Advertisement
CodeCard
Convierte tus fragmentos de código en hermosas tarjetas de captura listas para compartir, 100% de forma local en tu navegador.
6 líneas · Suelta aquí un archivo de código, o pega el código.
O pulsa los números de línea en la vista previa. Mayús+clic para un rango, Alt+clic invierte, clic derecho limpia.
Vista previa
Cómo funciona
Pega o suelta tu código
Escríbelo, pégalo o suelta un archivo. El archivo queda en espera: te enseña su tamaño y sus líneas, y no se carga nada hasta que pulsas el botón.
Dale estilo y elige las líneas clave
Diez temas, nueve degradados o tu propio color, cinco marcos de ventana. Pulsa un número de línea para destacarla y atenuar el resto: justo la parte que hay que mirar.
Exporta o mándala a otra herramienta
PNG, JPEG, WebP o SVG vectorial, hasta 4x. Cópiala al portapapeles, o pásala a CompressSnap, CropSnap o WatermarkSnap sin descargarla antes.
Sintaxis de verdad, 48 lenguajes
El resaltador lee el flujo de tokens de Prism en crudo, así que JavaScript, Rust, Zig, Terraform, Dockerfiles y 43 más salen con sus colores — y solo se descarga la gramática que elijas.
Destaca las líneas que importan
Pulsa un número de línea para resaltarla y atenuar el resto. Mayús+clic coge un rango, Alt+clic invierte la selección entera, clic derecho la limpia.
Exportaciones a las que no se les corta nada
La tarjeta se mide a su ancho completo antes de capturarla, así que las líneas largas sobreviven a la exportación en vez de quedarse cortadas en el borde de la vista previa. PNG, JPEG, WebP o SVG vectorial, hasta 4x.
Local, y sin conexión de verdad
Las fuentes y las gramáticas se sirven desde este sitio, no desde un CDN ajeno. Una vez cargada la página, resaltar y exportar funcionan con la red desenchufada.
Preguntas Frecuentes
¿Por qué otras herramientas me cortaban las líneas largas?+
Porque la mayoría captura el DOM tal y como está maquetado, y un bloque de código con barra de desplazamiento horizontal solo maqueta la parte que se ve. CodeCard mide la tarjeta a su ancho completo, sin recortar, antes de capturarla, así que la línea entera llega a la imagen.
¿Cómo resalto líneas concretas?+
Pulsa un número de línea en la vista previa para destacarla y atenuar el resto. Mayús+clic extiende un rango, Alt+clic invierte la selección entera y el clic derecho la limpia. También puedes escribir rangos como 3, 7-9, 12 en la casilla de líneas resaltadas.
¿Qué lenguajes admite?+
48, entre ellos JavaScript, TypeScript, JSX/TSX, Python, Rust, Go, Zig, C, C++, C#, Java, Kotlin, Swift, Ruby, PHP, SQL, YAML, TOML, Terraform, Dockerfiles, Bash, PowerShell, Markdown y diffs unificados. Solo se descarga la gramática del lenguaje que elijas.
¿Puedo usar CodeCard sin conexión?+
Sí. Las fuentes monoespaciadas y las gramáticas se sirven desde este sitio y no desde un CDN ajeno, así que una vez cargada la página el resaltado y la exportación siguen funcionando sin red.
¿Es seguro mi código?+
Tu código no se transmite a ninguna parte. El resaltado, la maquetación y el renderizado de la imagen ocurren en tu navegador, y no se sube ni se registra nada.
¿Cuál es el ajuste de exportación más nítido?+
PNG a 3x o 4x para uso rasterizado. Si el destino acepta vectores, elige SVG: se mantiene nítido a cualquier tamaño y suele pesar menos que un PNG a 4x.
Crea hermosas imágenes de tus capturas de código en línea
Compartir código como texto simple en redes sociales o presentaciones puede ser visualmente aburrido. CodeCard convierte tu código fuente en tarjetas de diseño elegantes al instante. Controla el espaciado, las sombras, las fuentes y los estilos de ventana para adaptarlo a tu marca personal.
- PNG, JPEG, WebP y SVG vectorial hasta 4x
- Fuentes y gramáticas auto-alojadas: funciona sin conexión
- Sin cuenta, y la marca de agua viene desactivada
Generación local rápida y segura
CodeCard se ejecuta completamente en tu navegador mediante renderizado del lado del cliente. Ningún archivo o texto sale de tu computadora.
Perfecto para Redes Sociales, Blogs y Diapositivas
Ideal para influencers de tecnología en Twitter/X, desarrolladores que escriben artículos técnicos y profesores que crean diapositivas de presentación. Las capturas bonitas duplican la interacción.
Privacidad Estricta Garantizada
A diferencia de otras herramientas que envían tu código a servidores externos, CodeCard realiza toda la coloración y generación de diseño dentro de tu navegador. Tus claves privadas o propiedad intelectual permanecen 100% seguras.
Construido sobre el flujo de tokens de Prism
En vez de pedirle al resaltador el HTML ya hecho, CodeCard lee el flujo de tokens en crudo y reconstruye el código línea a línea. Eso es lo que hace posibles los números de línea exactos, el resaltado por línea, el ajuste con sangría colgante y las exportaciones sin recortes.