Code Screenshot
Create stunning, shareable images of your source code with syntax highlighting and beautiful backgrounds.
function fibonacci(n) { if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); } "color:#6a9955">// Calculate the 10th Fibonacci number console.log(fibonacci(10));
What this tool actually does
Code Screenshot turns source code into a presentation-ready image: your snippet is syntax-highlighted, framed in an editor-style window with optional macOS-style chrome, set on a background of your choice, and rendered to a PNG or JPG at 2× resolution with the html2canvas library. It's built for the places where you share code as a picture — social media posts, blog headers, slide decks, documentation, and chat messages that would mangle formatting.
A worked example
The editor loads with a recursive Fibonacci function as its default snippet. Run through the tool's own highlighter with the vs-dark theme, that snippet produces 10 highlighted tokens: keywords like function and return in blue, the numeric literals in green, and the comment line in the theme's muted green. Export it as PNG and you get a crisp image at twice your screen's pixel density — sharp enough for a retina blog header without any post-processing.
Languages, themes, and how the highlighting works
There are 10 languages to choose from and 5 editor themes. The highlighter is a lightweight pattern-based engine: strings, numbers, and comments are recognized universally, while each language brings its own keyword list (JavaScript's covers 18 keywords, for instance). That makes it fast and fully local — but it's deliberately simpler than a compiler-grade parser, so unusual syntax may not color exactly the way your IDE does. For a social-media snippet, that trade-off is almost always invisible.
Tips for a good-looking screenshot
Keep snippets under ~30 lines — images of long files become unreadable at feed sizes. Increase padding (the 48px default is a good start) when your background is a gradient, so the code window "floats". Use 14–16px font for X/Twitter and LinkedIn; bump to 18px+ for slides viewed from a distance. And prefer PNG for text sharpness — JPG can smear thin letterforms at high compression.
How to use Code Screenshot
- 1Paste your code in the editor.
- 2Pick a language for syntax highlighting and a theme.
- 3Choose a background, padding, and window chrome.
- 4Export as PNG or JPG.
Frequently Asked Questions
Can I use this offline?
Yes. Once the page has loaded, rendering and export run without any network access.
Does it support my language?
Ten languages have keyword highlighting (JavaScript, TypeScript, Python, Go, Rust, SQL, and more). Strings, numbers, and comments are highlighted universally, so even unlisted languages look reasonable.
What resolution is the export?
The image is rendered at 2× scale — a snippet that appears 600px wide exports at 1200px — which keeps text crisp on retina displays and in zoomed blog posts.
Is my code uploaded?
Never. The preview is ordinary HTML in your page, and html2canvas draws it to an image entirely in your browser.
Why does my code look slightly different from my IDE?
The highlighter is pattern-based rather than a full parser, so complex constructs (nested template strings, regex literals) may color differently. The layout and content are always exact.
Limitations & Privacy
- Highlighting is pattern-based, not a full parser — edge-case syntax can be mis-colored. Check the preview before exporting.
- Very long snippets produce very tall images; there's no pagination. Split long files into multiple screenshots.
- Exported images contain your code as pixels — anyone you share them with can read (but not copy-paste) it. Don't screenshot secrets or API keys.
- JPG export uses 92% quality; use PNG when text sharpness matters most.
- Privacy: code never leaves the page. No paste service, no server-side rendering, no storage.