Introduction
At some point behind that screen, you’ll need to capture an image of code – whether it’s yours or someone else’s. This could be for different reasons; reference for an article, asking for help from a forum, showing off on Twitter, or even storing valuable tidbits that you’d like to go through later. Either way, the importance of screenshot tools cannot be overemphasized right now because like it or not, we could all use one.
After some digging, here are six awesome ways to take screenshots of your code. Let’s look in!
Polacode
Polacode is a Visual Studio Code extension that lets you create unique and sharable screenshots of your code. While using Polacode, it retains your existing theme and fonts and renders them for an awesome layout. Check this out:
In the screenshot above, Polacode effectively handles the shadow, padding and rounded corner of my Mac OS’s screenshot and hides stuff like color decorators, folding markers, and scrollbars.
Installation
- Open Visual Studio Code.
- On the menu bar, navigate to View > Extensions.
- In the input box, enter Polacode and click on Install.
Take A Screenshot
Open VS Code, on the menu select View then click on Command Palette. In the input box, enter Polacode and select from the drop-down menu. Polacode will be opened to the side of the editor.
Highlight and copy the code you would like to make a screenshot of. Click on the screenshot button below the box. You will be asked for a path to save. Choose a path and save your newly created screenshot.
Pros
- Takes lightweight screenshots (as low as 7kb).
- Easy to install if you’re using Visual Studio Code.
- Retain the theme of your code editor in the screenshot.
Cons
- Could be a bit daunting for newbies.
- Can’t effectively take screenshots of long lines of code.
Carbon
Carbon is a free and open source library to create and share awesome images of your source code. Options available when using Carbon include the ability to change your color theme, the ability to select your preferred programming language, the ability to share a tweet of your code’s screenshot and customize stuff like image syntax, window style, background color, color theme and more.
Installation
There is absolutely no need to install Carbon on your PC, just visit its website here, paste your code and screenshot away!
Take a Screenshot
To take a screenshot with Carbon, copy the code you want a screenshot of from your IDE or text editor, paste in Carbon’s text area and click on the Save Image button.
Pros
- Easy to understand and user-friendly layout.
- Takes super light screenshots.
- Ability to format produced images with font size, font family, and color theme.
- Auto-detect programming language and apply matching syntax highlight.
- Generate either SVG or PNG images.
Cons
- The journey from copying to pasting code may seem arduous to some people and mistakes could even be made in the process.
- Cannot take screenshots of long lengths of code.
You can check out Carbon’s Github repository here. It has plugins for various editors and IDE’s. Just follow the outlined steps in the documentation. Should you want to use Carbon with either PhpStorm or any other JetBrains IDE, simply select the code and select Open in carbon.now.sh from the context menu that you open by right-clicking the selected text.
Greenshot
Greenshot is a screenshot software tool that can be used not only by developers but also by project managers, testers, and technical writers. With Greenshot, users can screenshot an image and edit it using a built-in image editor or render a part of the image unreadable by blurring it. Key features of Greenshot include:
- Image Editing: With Greenshot, you can easily annotate, highlight or hide parts of a screenshot.
- Image Sharing: Export screenshots in various ways including uploading to cloud-based photo sites like Flickr, attach to emails or save as a file.
- Additional options: Greenshot offers lots of additional options to simplify your work with screenshots, like optical character recognition (OCR).
- Multi-language support: Greenshot supports 32 languages worldwide.
Installation
To install Greenshot, Windows users can navigate through Greenshot’s website and download it for free here. However, it’s quite different for Mac users as they have to install Greenshot via the iTunes store for $1.99.
Take a Screenshot
After you’ve installed Greenshot, navigate to the lower right-hand corner of your desktop and click on the Greenshot icon. Choose the kind of screenshot you would like to take:
Pros
- It’s quite straightforward to use.
- Includes multiple options for taking screenshots.
Cons
- Not free for Mac users.
- Not available for Linux and similar distros.
If you would like to tinker with Greenshot’s source code, you could check it out on Github.
CodeCool
Created by Functional Cave, CodeCool is a web application that allows you to take lightweight (as low as 7kb) snapshots of your basic code snippets. Key features include the ability to change the screenshot’s background color as well as increase or decrease the font size of the code.
Installation
Just like Carbon, you don’t have to install Codecool. Just navigate to its website here, paste your code and take a screenshot.
Take a Screenshot
To take a screenshot with Codecool, copy the code you want a screenshot of from your IDE or text editor, paste it in Codecool’s text area and click on the Export Image button.
Pros
- Takes lightweight screenshots.
- Includes options of increasing or decreasing font size.
Cons
- Its user interface leaves a lot to be desired.
- Is very limited in the size of code samples it can handle at a time.
You can check out CodeCool’s source code on Github here.
Code Screenshots
Code Screenshots is a JetBrains plugin which is used to take screenshots of code on Jetbrains IDEs. It’s compatible with IntelliJ IDEA, PhpStorm, WebStorm, PyCharm, RubyMine, AppCode, CLion, GoLand, DataGrip, Rider, MPS and Android Studio.
Installation
To install Code Screenshots, download the plugin from the Jetbrains website here and follow the installation process.
Take a Screenshot
How does it work? Select the code you want to make a screenshot of and press a hot-key (Ctrl+Alt+Shift+A by default) to make a screenshot of it. You could configure the hotkey settings to what suits you as well, navigate to Settings|Keymap to do this. After taking a screenshot, a “Save as Image” action is available which lets you save the screenshot as a PNG file.
Pros
- Is super fast and straightforward to use
- Light to install (about 47kb)
Cons
- It’s only compatible with Jetbrains IDEs
You can also view the source code for Code Screenshots on Github here.
ShareX
An app created for Windows users. With ShareX, not only can you capture your screen, you can also take screenshots of a large amount of code that scrolls thus removing any need to crop your captures. It also has tools for editing as well as multiple captures. ShareX can also be extended as a plugin to be used in your browser. You can check out Sharex’s source code on Github here.
Installation
To install ShareX, navigate to the website here, download the setup file and follow the installation prompt.
Take a Screenshot
After installing, launch the application and on the menu bar, navigate to Capture. Choose from the available options in the submenu. Should you need to save every screenshot taken, remember to navigate to After image tasks on the menu and check the Save image to file option.
Pros
- Quite a good amount of options to choose from.
- Can take screenshots of long lines of code.
Cons
- Can only be used by Windows users.
Other key features of ShareX include:
- Productivity tools
- Multiple image and file destination uploads
- Multiple capture and upload methods
Summary
A good part of these awesome tools is that they are free to use. It would be worthwhile to check out all of them to determine which would be the perfect fit for your work. I might have failed to cover some of your favorite tools so if you’ve got any tool that you’d like to share please do not hesitate to do so in the comment section. Throw in more pros and cons if you can as well!
Source: Scotch.io