DEV Community

Cover image for Crear capturas del código desde Visual Studio Code con CodeSnap
Ruslan Gonzalez
Ruslan Gonzalez

Posted on • Edited on

Crear capturas del código desde Visual Studio Code con CodeSnap

Si quieres más contenido como éste por favor no dudes en suscribirte y apoyarme con un comentario o difundirlo con el mundo, muchas gracias.

Introducción

En este artículo voy a enseñarte cómo capturar el código de tu editor Visual Studio Code (VSCode) de una forma elegante usando una extensión llamada "CodeSnap" totalmente gratuita para nuestro editor favorito, si quieres ver una muestra del resultado:

alt CodeSnap

Alternativas

Esta no es la única herramienta con la que puedes realizar capturas de código, por ello antes te mostraré un par de alternativas.

Carbon 😯

alt Carbon

Carbon es una aplicación web pionera de esta moda, en la que tenemos que copiar el código visitar su web, elegir el lenguaje de nuestro código y posteriormente exportar la imagen, sin duda el resultado es impresionante con más de 25 temas y que soporta muchos lenguajes, puedes también puedes exportar el resultado de la imagen o copiarla mediante una opción que nos ofrece en el portapapeles, compartirla en tu red social de twitter y alguna cosa más. En el caso que se me olvide mencionar algo interesante de esta herramienta, te pido que me lo dejes en los comentarios.

Polacode 🤩

alt Image polacode

Polacode es una extensión de VSCode que la descubrí podo después de comenzar a usar Carbon, básicamente es una herramienta que nos permite tener resultados similares pero que funciona directamente desde el mismo VScode, ésta nos permite a partir de una selección de código generar una imagen con la misma fuente de letras que usamos en nuestro editor, sin duda una de las herramientas más populares de su tipo. Solo puede usarse dentro de VScode por lo que no te será compatible con otros editores de texto. Ésta extensión nos permite personalizar el fondo de pantalla, la transparencia y a lo mejor un par de cosas más.

CodeSpap 😱

Codesnap

CodeSnap, es un proyecto que basado en Polacode por lo que funcionan de la misma manera pero su diferencia está principalmente en las configuraciones avanzadas y en el valor agregado que éste ofrece.

Características de CodeSnap

  • Guarda capturas de tu pantalla de forma rápida.
  • Puedes copiar la imagen a tu portapapeles.
  • Puedes mostrar o no las lineas con números.
  • Rápido acceso con el botón derecho del ratón (botón secundario)
  • Posibilidad de configurar un atajo de teclado,
  • y muchas otras configuraciones.

Conclusión

En los pocos días que llevo probando a CodeSnap creo que, y sin lugar a dudas, es mi extensión favorita para compartir trazas de código con mis amigos. Si te gusta VScode tanto como a mi, no querás perder la oportunidad de probar esta increíble extensión.

Las tres herramientas que les he traído son totalmente open source y seguro que ustedes podrán contribuir con estos proyectos si así lo desean.

En el caso que no uses VSCode y uses Sublime Text, Atom, o cualquier otro, no cabe duda que la herramienta que yo elegiría sería Carbon ya que es muy fácil de usar y está al alcance de un Copy & Paste.

Notas finales

Espero que te haya gustado mi artículo no olvides darme un me gusta y compartirlo con otros, déjame en los comentarios tus opiniones, y en el caso que conozcas otras alternativas déjalo en los comentarios, ¡gracias!. 😊

Leer más

¿Has encontrado un error en mi artículo?

Si has encontrado un error tipográfico, expresión, referencia o cualquier cosa que debería mejorar y que debe ser actualizado en este post, puedes hacer un fork de mi repositorio y enviarme un Pull Request con la corrección, o bien, en lugar de hacer un comentario, ruego me lo reportes en la sección de issues en el repositorio de mis artículos.

Más artículos de Ruslán González

Top comments (9)

Collapse
 
aresinodev profile image
Aarón Resino Jiménez

Gracias por poner artículos en castellano ya que se encuentran pocos.

Collapse
 
ruslangonzalez profile image
Ruslan Gonzalez

Poco a poco, me alegro que te haya gustado!

Collapse
 
xantosromero profile image
Santos Romero

Estuve buscando cómo capturar fragmentos de código.
Muchas gracias Ruslán por compartir.

Saludos.

Collapse
 
xantosromero profile image
Santos Romero

Tienes un nuevo seguidor

Collapse
 
giiobanny23 profile image
Giobanny Santamaria

Gracias por el articulo amigo, saludos

Collapse
 
dacreb profile image
Alesba

Gracias por el articulo me ha sido de ayuda 👍🏾

Collapse
 
carlosmen351 profile image
CarlosMeneses

Muchas gracias por los datos...

Collapse
 
jorge_buitragov_c297151 profile image
Jorge Buitrago V.

Amigo que buen diseño tiene...pero me quede sin saber como...
"Crear capturas del código desde Visual Studio Code con CodeSnap "
Que es lo que me hizo suscribirme a tu blog

Collapse
 
rosalythr profile image
Rosalyth Rodriguez

Muchas gracias Ruslan, me resolviste la duda de como capturar en imágenes fragmentos de código. 😉👍