Code Screenshot

Turn code into a beautiful screenshot rendered on canvas. Download as PNG.

Language

Theme

Font Size (14px)

Padding (32px)

Window ChromeLine Numbers

Background

Preview

About this tool

Turn code snippets into beautiful, shareable screenshots with syntax highlighting, custom backgrounds, padding, and window chrome. Choose from 20+ themes including Dracula, Nord, One Dark, and GitHub. Export as PNG or SVG. Perfect for Twitter/X posts, blog articles, presentations, and documentation.

How to Create a Code Screenshot

1Paste your code into the editor - syntax highlighting applies automatically.
2Select the language if it wasn't detected correctly.
3Choose a theme (Dracula, One Dark, GitHub Light, etc.).
4Adjust padding, background, and window chrome settings.
5Click 'Export PNG' or 'Copy Image' to share.

Frequently Asked Questions

What languages are supported for syntax highlighting?+

Over 100 languages are supported including JavaScript, TypeScript, Python, Rust, Go, CSS, HTML, SQL, Bash, YAML, JSON, and many more - powered by Prism or highlight.js syntax highlighting.

Can I customise the background?+

Yes. Choose a solid colour, gradient, or remove the background entirely for transparent PNG export. Adjust padding, border radius, and whether to show window control buttons (traffic lights).

What size should I export for Twitter?+

Twitter displays images up to 1200x675 px. Use 2x scale for sharp display on Retina screens. Landscape orientation works best in the feed.

Is there a way to share code screenshots without downloading?+

Yes. Click 'Copy Image' to copy directly to clipboard, then paste into Slack, Discord, Notion, or social media without saving a file.

Looking for a deeper guide on this topic? Browse the Searchlight blog.

Visit the blog →

Related tools

View all Code Tools →