Code snapshot renders code snippets as styled PNG images with window decorations, syntax highlighting, and a gradient canvas. Paste code, choose a language and theme, then download a ready-to-publish image. It's built on ray.so and is useful for technical blog posts, social media shares, and presentation slides where hand-cropped screenshots look inconsistent.
Background padding and when to change it
Padding controls the width of the gradient canvas around the code window (0–100 px slider; the underlying range goes up to 200 px). Mobile default is 32 px, desktop default is 64 px.
- Technical docs or GitHub README: 16–32 px keeps the image compact
- Social media cover or card: 48–80 px adds breathing room
Transparent background strips the gradient canvas entirely and exports only the code window, which is useful for embedding in Figma or layering on custom backgrounds. Some platforms (WeChat articles, Feishu docs) flatten transparent PNGs to white on upload — turn off transparent background before exporting for those destinations.
Image width and resolution
Width is estimated from the longest line (character count × font size × 0.62 + 160), capped between 280 px and 1,600 px (default 960 px). On retina displays the exported pixel dimensions are 2× the display width, which means a 960 px display width produces a 1,920 px wide PNG — enough for high-resolution publishing.
Code that snapshots well
- 10–40 lines
- Fewer than 80 characters per line
- Focused on a single function or key fragment
- Irrelevant comments and blank lines removed
What can go wrong
- Wrong language selection disables syntax color
- Lines wider than the max width cause text wrapping
- Transparent background flattened by some platforms
- Zero padding removes the gradient decoration entirely
Keeping sensitive code safe
Rendering and export happen entirely in the browser — no code is sent to any server. Even so, replace real API keys and passwords with placeholders (like YOUR_API_KEY) before taking the snapshot. Published images are indexed by search engines and cannot be easily revoked.