How to Take Beautiful Code Screenshots on Mac

Why developers need code screenshots

Plain-text code snippets break when pasted into Slack threads, tweet replies, or slide decks. Formatting gets lost, indentation collapses, and syntax highlighting disappears. A code screenshot preserves exactly what you see in your editor — colors, font, indentation — in a single image that looks the same everywhere it’s shared.

Code screenshots are used constantly in technical blog posts, documentation, social media, pull request discussions, bug reports, presentations, and tutorial videos. This guide covers every method available on Mac, from the built-in screenshot tool to dedicated code-screenshot apps.

Method 1: Mac’s built-in screenshot tool

The fastest way to screenshot code is to use what macOS already has. Open your code in any editor and use the standard shortcuts:

Tips for cleaner built-in captures

• Increase the font size before capturing — press Cmd+= a few times in VS Code, Xcode, or most editors. Code that’s readable at 12px on your Retina screen becomes tiny in a screenshot viewed on a phone
• Use a dark theme — dark backgrounds with light text look better on most platforms (Twitter/X, Slack, blog posts with dark mode) and reduce visual noise around the edges
• Hide the sidebar and minimap — in VS Code, press Cmd+B to toggle the sidebar and go to View > Show Minimap to toggle it off
• Remove the window shadow — hold Option while clicking a window in Cmd+Shift+4+Space mode

The downside of the built-in tool is that you get a raw screenshot with no padding, no background, and whatever is behind the window bleeds into the edges.

Method 2: VS Code extensions

If you write code in VS Code, extensions can capture the selected code directly from your editor with proper formatting and export options.

CodeSnap

CodeSnap is the most popular code screenshot extension with over 2 million installs. Here’s how to use it:

1. Install CodeSnap from the VS Code Extensions marketplace
2. Select the lines of code you want to capture
3. Open the Command Palette (Cmd+Shift+P) and search for CodeSnap
4. A preview panel opens showing your code with a clean background
5. Click the camera icon to save the image, or right-click the preview to copy to clipboard

CodeSnap respects your current VS Code theme, so if you use One Dark Pro or Dracula, the screenshot uses those exact colors. You can customize the background color, padding, border radius, and whether to show line numbers in the extension settings.

Polacode

Polacode works similarly — select code, open the Polacode panel, and save the image. It uses a Polaroid-style frame around the code. Polacode hasn’t been updated as frequently as CodeSnap, but it’s still functional.

Method 3: Web-based code screenshot tools

Web tools are editor-agnostic. You paste code from any source — VS Code, Xcode, Vim, a GitHub diff, a log file — and get a styled image back. These work in any browser on Mac.

Ray.so

Built by the team behind Raycast, Ray.so is a fast, clean code screenshot generator:

1. Paste your code into the editor
2. Select the language for syntax highlighting
3. Choose a theme (Midnight, Breeze, Candy, and more)
4. Toggle dark mode, background padding, and line numbers
5. Click Export to download as PNG or copy to clipboard

Ray.so supports over 30 languages and produces high-resolution 2x images that look sharp on Retina displays and in print.

Carbon

Carbon is the original web-based code screenshot tool and still widely used:

1. Paste your code or drop a file into the editor
2. Pick a theme (Monokai, Solarized, One Dark, Dracula, and dozens more)
3. Choose the language, font, and padding
4. Click Export to download as PNG or SVG

Carbon supports more themes than Ray.so and adds a macOS-style window frame with red/yellow/green traffic light buttons by default. It also supports exporting as SVG, which is useful for embedding in web pages where you want the image to scale without losing quality.

Snappify

Snappify goes beyond static images — it can create animated code walkthroughs and multi-step presentations. The free tier handles basic code screenshots; the paid version adds animations, custom fonts, and team features. Good for creating code-focused slide decks or tutorial sequences.

Method 4: Native Mac apps

If you prefer an app that runs locally instead of pasting code into a browser:

Silicon

Silicon is a lightweight Mac app that generates code screenshots from your clipboard. Copy code in any editor, open Silicon, and it renders the snippet with syntax highlighting and a clean background. Silicon supports 100+ languages via the same TextMate grammar system used by VS Code and Sublime Text. It runs entirely offline — your code never leaves your Mac.

Screenshotting Terminal and shell output

Terminal output is a special case. The text is already styled with ANSI colors (green for success, red for errors, yellow for warnings), but those colors only exist inside the terminal — copying the text to a code screenshot tool loses them. Here’s how to capture terminal output cleanly:

Window capture with Cmd+Shift+4+Space

This captures the Terminal window as an image, preserving all ANSI colors. Click on the Terminal window to capture it with its title bar and shadow. Hold Option while clicking to remove the shadow.

Increase font size first

Terminal text defaults to 11–13pt, which is hard to read in a screenshot. Press Cmd+= a few times to bump it up to 16–18pt before capturing. Set it back with Cmd+- afterward, or press Cmd+0 to reset to the default.

Use a clean Terminal profile

Create a dedicated Terminal profile for screenshots in Terminal > Settings > Profiles:

• Set the background to a solid dark color (avoid transparency)
• Use a clear monospace font like SF Mono, JetBrains Mono, or Fira Code at 16pt
• Set the window size to 80×24 or 100×30 for consistent captures
• Disable the scroll bar for a cleaner look

Switch to this profile with Shell > New Window > [profile name] when you’re about to take screenshots.

Getting the font and theme right

The difference between an amateur and professional code screenshot usually comes down to font choice, theme, and padding:

Fonts that photograph well

• JetBrains Mono — designed for code, excellent at small sizes, includes ligatures
• Fira Code — popular open-source coding font with programming ligatures (=> becomes an arrow)
• SF Mono — Apple’s system monospace font, ships with macOS, clean and neutral
• Cascadia Code — Microsoft’s coding font, good readability at all sizes
• Source Code Pro — Adobe’s open-source monospace font, versatile and widely supported

Font size

16px is the minimum for readability in a code screenshot that will be viewed on the web. For social media posts where the image is small in the feed, go to 18–20px. For presentations projected on a screen, 24px or higher.

Best themes for screenshots

Dark themes with high-contrast syntax highlighting produce the most readable code screenshots:

• One Dark Pro — balanced colors, good for most languages
• Dracula — vibrant purples and greens, distinctive look
• Night Owl — designed for reduced eye strain, excellent contrast
• Monokai — the classic, especially good for Python and JavaScript
• GitHub Dark — familiar to developers, works well in documentation

Light themes work too, especially for documentation embedded in light-themed websites. GitHub Light and Solarized Light are the strongest options.

Sharing code screenshots from Mac

Once you have the image, getting it where it needs to go:

• Clipboard — most tools can copy directly to clipboard. Paste with Cmd+V into Slack, Notion, GitHub comments, or any app that accepts images
• Drag and drop — drag the PNG file from Finder into a compose window, editor, or upload field
• AirDrop — right-click the file, choose Share > AirDrop to send it to a nearby Apple device
• iCloud link — right-click in Finder, choose Share > Add People to generate a shareable link

Optimizing file size

Code screenshots are typically small (under 500 KB for a PNG) because they contain mostly solid-color blocks with sharp edges — ideal for PNG compression. If you need smaller files for a blog with many code images, switch to WebP format or run the PNGs through an optimizer like pngquant or ImageOptim.