Developer

📸

Code Screenshot

Create beautiful code screenshots with syntax highlighting

Language

Theme

Window Style

Line Numbers

Window Title

Watermark

Background

Padding: 48px

Font Size: 14px

Border Radius: 12px

Code

Preview

function greet(name) {
  const message = "Hello, " + name;
  console.log(message);
  return message;
}

Export:

Share to Community

Was this tool helpful?

What is Code Screenshot?

Free online code screenshot to turn code snippets into beautiful, shareable images.

Choose from multiple syntax themes (dark, light, Monokai, Dracula, Nord), set the language for syntax highlighting, customize padding, font size, and background color. Export as PNG for use in presentations, social media, blog posts, and documentation. All rendering happens in your browser using Canvas. No signup required.

How to Use Code Screenshot

1Paste your code snippet into the editor
2Select the programming language and color theme
3Customize padding, font size, and background
4Click Export to download the code screenshot as PNG

Frequently Asked Questions

What languages are supported for syntax highlighting?

JavaScript, TypeScript, Python, HTML, CSS, JSON, SQL, Rust, Go, Java, C, C++, PHP, Ruby, Swift, Kotlin, and Bash. Each language gets proper keyword and syntax coloring.

What themes are available?

Several popular themes: Dark (VS Code dark), Light, Monokai, Dracula, Nord, One Dark, Solarized Dark, and GitHub. Each theme has carefully chosen colors for readability.

What image formats can I export?

PNG at 2x resolution for crisp output on high-DPI displays. The exported image includes the syntax-highlighted code with your chosen background, padding, and border radius.

How do I turn a code snippet into an image for social media?

Paste your code, pick a language and theme, adjust the padding and background, then export. The 2x PNG looks crisp when posted to Twitter, LinkedIn, or Instagram and includes no watermark.

Is there a watermark on the exported image?

No. The PNG export contains only your code and the styling you chose. There is no logo or watermark added to the image.

Share this tool

Related Tools

📱

Facebook cover maker

Free online social media image generator - create correctly sized images for social media platforms

█

Ascii art generator

Free online text to ascii art - convert text into ASCII art with multiple font styles

IMG

Unsplash search

Free online stock photo search - search and download free high-resolution stock photos from Unsplash

⚙️

Htaccess rewrite rules

Free online htaccess generator - generate Apache .htaccess redirect and rewrite rules

Markdown to html

Free online markdown preview - write Markdown and see a live rendered preview side by side

SQL

Sql pretty print

Free online sql formatter - format and beautify SQL queries with proper indentation and syntax highlighting

🎨

CSS Formatter

Free online CSS formatter - format and beautify CSS code with configurable options

📱

Iphone mockup

Free online device mockup generator - wrap screenshots in device frames (iPhone, laptop, etc.)

Keep reading: Markdown Cheat Sheet and image and canvas sizes reference. Doing this in code instead? See the JSON and data endpoints.