Cómo hacer una captura de código para diapositivas o publicaciones

Para hacer una captura de código, abre el generador de capturas de código y pega tu código en la ventana. Elige el lenguaje en «Lenguaje» para que los colores se adapten al código. Escribe un nombre en «Nombre de archivo» para la barra de título y luego haz clic en «PNG». La imagen se crea en tu navegador.

Una captura de tu editor también muestra pestañas, menús y texto pequeño. Aquí solo obtienes la ventana con tu código, a tres veces su tamaño en pantalla. El texto se mantiene nítido en una diapositiva grande.

Cómo crear la imagen

1. Haz clic dentro de la ventana y pega tu código. También puedes escribir ahí. Al pulsar Intro, se conserva la sangría de la línea anterior.
2. Elige el lenguaje en «Lenguaje». JavaScript es el predeterminado.
3. Elige un marco en «Estilo de ventana»: macOS, Windows o Ninguno. macOS es la opción predeterminada.
4. Escribe un nombre de archivo, como retry.py. Aparecerá en la barra de título.
5. Haz clic en «PNG», debajo de la vista previa.

Generador de capturas de código con la función de reintento de Python en el editor, Python seleccionado como lenguaje y retry.py escrito como nombre de archivo

El archivo se guarda como snippet seguido de un número, por ejemplo, snippet-1792757286543.png. Haz clic en «Insertar muestra» para ver primero una muestra breve de JavaScript.

Qué lenguajes puedes elegir

La lista de «Lenguaje» tiene 25 opciones.

• Web: JavaScript, TypeScript, HTML y CSS.
• Programación: Python, Java, Rust, C++, C, Go, PHP, SQL y Shell.
• Datos y configuración: JSON, JSON5, XML, YAML, CSV, INI, TOON, Nginx y Prisma Schema.
• Texto: Markdown, LaTeX y texto sin formato.

El lenguaje solo determina los colores. No se detecta a partir del código ni del nombre del archivo, así que debes elegirlo tú.

Cómo cambiar los colores

Los colores del código siguen el tema del sitio. Para una imagen oscura, abre el menú en la parte superior de la página, haz clic en el botón del tema y elige «Tema oscuro». Para una imagen blanca, elige «Tema claro».

La barra de título permanece oscura en ambos temas hasta que cambies «Color de la barra de título». El texto del título se vuelve blanco o negro, según cuál sea más fácil de leer. Si «Estilo de ventana» está configurado como «Ninguno», no hay barra de título y el campo del color está desactivado.

La fuente y el relleno son fijos. La imagen no tiene números de línea.

Cómo ajustar el ancho

La ventana tiene el ancho de su línea más larga. Arrastra el pequeño controlador punteado de la esquina inferior derecha para hacerla más estrecha o más ancha. Las líneas largas pasarán a la línea siguiente. La ventana tiene un ancho mínimo de 300 píxeles y el controlador no aparece en la imagen.

Una línea muy larga puede hacer que la ventana se salga de la vista previa. Haz clic en el botón «Restablecer» de la barra situada encima de la vista previa para volver a ajustarla. Los botones de zoom solo cambian la vista previa, no la descarga.

Qué formato elegir

• PNG mantiene transparente el área exterior de las esquinas redondeadas, así que la imagen encaja en una diapositiva de cualquier color.
• JPG rellena de negro esas pequeñas esquinas.
• Imprimir abre la imagen en una ventana nueva con el cuadro de diálogo de impresión.

Ambos formatos tienen tres veces el tamaño de la ventana en pantalla. Por ejemplo, una ventana de 752 píxeles de ancho genera una imagen de 2256 píxeles de ancho.

Pega el código, elige el lenguaje y descarga la imagen PNG para tu diapositiva.