📸 Code Snippet to Image
Paste code, pick a language and a VS Code theme, tweak window chrome and padding, export as PNG. Highlighting is VS Code-grade via Shiki; nothing leaves your browser.
📝 Source
🪟 Window
🎨 Background
📐 Layout
Loading highlighter…
— × —
About Code Snippet to Image
Paste a snippet, pick a language and theme, and get a sharable PNG card — the same idea as Carbon, ray.so, or CodeImage, but entirely in your browser. Highlighting goes through Shiki, which uses the exact TextMate grammars and theme JSON files VS Code ships, so the result reads identically to what you see in your editor.
How to use
- Paste or type code in the editor — Tab inserts two spaces, like most code editors.
- Pick the matching Language and a Theme; the canvas re-renders live.
- Adjust Window chrome, Background (gradient, solid, or transparent), padding, and font size.
- Hit Copy PNG for the clipboard, or Download PNG to save a file.
Common use cases
- Screenshots for blog posts, slides, or release notes where you want syntax-aware highlighting.
- Twitter / X / Bluesky cards showing a short function or config block.
- Mock-up code samples for docs that need to look consistent across pages.
- Pairing a code card with a title card for a richer share image.
Tips
- Keep snippets short — 30 lines or so. The card is most readable when each line is easy to scan at thumbnail size.
- For dark social-card backgrounds, a Dracula / GitHub Dark theme reads better; for light cards, GitHub Light / Vitesse Light.
- Switching the background to Transparent keeps the window chrome's shadow and exports a PNG with an alpha channel — drop it on any surface.
- If your line wraps, drop the font size by one step or pick a wider preset.