CodeCard
Convert your code snippets into beautiful, sharing-ready screenshot cards with custom styles 100% locally.
6 lines · Drop a source file here, or paste the code.
Or click the line numbers in the preview. Shift+click for a range, Alt+click inverts, right-click clears.
Live preview
How it works
Paste or drop your code
Type it, paste it, or drop a source file. A dropped file waits for you: it shows its size and line count, and nothing loads until you press the button.
Style it and pick the key lines
Ten themes, nine gradients or your own colour, five window shells. Click a line number to spotlight it and dim the rest — the part reviewers actually need to see.
Export or send it onward
PNG, JPEG, WebP or vector SVG, up to 4x. Copy straight to the clipboard, or hand the image to CompressSnap, CropSnap or WatermarkSnap without downloading it first.
Real syntax, 48 languages
The highlighter reads the raw Prism token stream, so JavaScript, Rust, Zig, Terraform, Dockerfiles and 43 more come out with proper colours — and only the grammar you pick is downloaded.
Spotlight the lines that matter
Click a line number to highlight it and dim the rest. Shift+click takes a range, Alt+click inverts the whole selection, right-click clears it.
Exports nothing gets cut from
The card is measured at its full width before capture, so long lines survive the export instead of being sliced off at the edge of the preview. PNG, JPEG, WebP or vector SVG, up to 4x.
Local, and actually offline
Fonts and grammars are served from this site, not a third-party CDN. Once the page has loaded, highlighting and exporting work with the network unplugged.
Frequently Asked Questions
Why did my long lines get cut off in other tools?+
Because most code-screenshot tools capture the DOM exactly as it is laid out, and a code block with a horizontal scrollbar only lays out the part you can see. CodeCard measures the card at its full, unclipped width before the capture, so the whole line reaches the image.
How do I highlight specific lines?+
Click a line number in the preview to spotlight it and dim the rest. Shift+click extends a range, Alt+click inverts the entire selection, and right-click clears it. You can also type ranges like 3, 7-9, 12 into the Highlighted lines box.
Which languages are supported?+
48, including JavaScript, TypeScript, JSX/TSX, Python, Rust, Go, Zig, C, C++, C#, Java, Kotlin, Swift, Ruby, PHP, SQL, YAML, TOML, Terraform, Dockerfiles, Bash, PowerShell, Markdown and unified diffs. Only the grammar for the language you pick is downloaded.
Can I use CodeCard offline?+
Yes. The monospace fonts and the syntax grammars are served from this site rather than a third-party CDN, so once the page has loaded, highlighting and exporting keep working with no network at all.
Is my code secure?+
Your code is never transmitted anywhere. Highlighting, layout and image rendering all happen in your browser, and nothing is uploaded or logged.
What is the sharpest export setting?+
PNG at 3x or 4x for raster use. If the destination accepts vectors, pick SVG instead: it stays crisp at any size and usually weighs less than a 4x PNG.
Create Stunning Code Screenshot Images Online
Sharing raw text code snippets on social media or in presentations can be visually boring. CodeCard turns your source code into elegant designer cards instantly. With control over padding, shadows, font choices, and window styles, you can match your personal brand.
- PNG, JPEG, WebP and vector SVG up to 4x
- Fonts and grammars self-hosted, so it works offline
- No account, and the watermark is off unless you turn it on
Fast and Secure Local Generation
CodeCard runs fully in your web browser, utilizing client-side rendering engine features. No files or text ever leave your computer.
Perfect for Social Media, Blogs, and Slides
Ideal for tech influencers on Twitter/X, software developers writing technical articles, and teachers creating presentation slides. Beautiful layouts double engagement rates.
Strict Privacy Guaranteed
Unlike other tools that send your code snippets to external API backends, CodeCard performs all syntax coloring and layout generation inside your browser. Your private keys, configurations, or intellectual property remain 100% secure.
Built on the Prism token stream
Instead of asking the highlighter for finished HTML, CodeCard reads the raw token stream and rebuilds the code line by line. That is what makes exact line numbers, per-line highlighting, hanging-indent wrapping and uncropped exports possible at all.