Generador de capturas de código

Funciones

• Resaltado de sintaxis: JavaScript, TypeScript, Python, Go, Rust, SQL, Bash, JSON y texto plano
• El resaltado reutiliza el del sitio, igual que la herramienta de resaltar código
• Tres temas: oscuro, claro y alto contraste
• Números de línea opcionales, con tamaño de letra, relleno y radio de esquinas ajustables
• Barra de título de ventana opcional con puntos rojo, amarillo y verde y un título propio
• Ancho monoespaciado medido carácter a carácter, así los comentarios CJK quedan alineados
• Genera un PNG, con dimensiones y peso en la tarjeta
• Se dibuja por completo en tu navegador: el código nunca se sube

Cómo se usa

1. Pon el código a dibujar en el campo Código
2. Elige lenguaje y tema; ajusta tamaño de letra, números de línea, relleno y radio
3. Activa la barra de título y escribe un título si lo quieres
4. Descarga el PNG

Preguntas frecuentes

¿Admite código de varias líneas?

El dibujante sí maneja varias líneas (los números de línea y la altura de línea se calculan por línea), pero el campo de código es ahora mismo una entrada de una línea. Es la forma del control de la carcasa de imagen del sitio: un control de texto estándar de una línea elimina los saltos al pegar, así que en la práctica se hace de una en una. Sirve para una línea de código, una expresión o un fragmento minificado corto. Para una captura de varias líneas, de momento dibújala en otro sitio o divídela en varias pasadas.

¿El resaltado es el mismo que el de la herramienta de resaltar código?

Es la misma implementación. El resaltado reutiliza lib/highlight.ts: la tabla de lenguajes, las de palabras clave y la clasificación de cada tramo existen en un solo lugar. Lo único que se hace aquí es pintar esa clasificación en un canvas (un canvas no tiene innerHTML, así que el HTML no se puede dibujar directamente); el mapa de clase a color solo hace falta para dibujar. Así que la distribución de colores que ves aquí coincide con la de la herramienta de resaltar código, sin un segundo juego de reglas que se desincronice.

¿Por qué se mide el ancho carácter a carácter?

Porque un glifo CJK ocupa dos celdas en una fuente monoespaciada. Si se midiera la línea entera de una vez, el motor de fuentes podría componer un ancho que difiere en unos píxeles del ocupado real (media celda latina, celda CJK completa) cuando se mezclan latino y CJK, y la columna de números de línea se desalinearía. Medir por carácter da un ancho predecible y verificable, así que los comentarios CJK y el código quedan alineados.

¿El fondo puede ser transparente?

La salida tiene ahora mismo un fondo sólido (el color base del tema). Fuera de las esquinas redondeadas, esas cuatro zonas son transparentes, así que la forma redondeada no mostrará un fleco blanco al colocarla sobre una página oscura o clara. Si necesitas otro color base, elige el tema más parecido o sustituye el fondo con una herramienta de imagen después.