Stop posting ugly code screenshots — turn code into a real image instead

You've seen the two kinds of code on your timeline. One is a flat screenshot of someone's editor — random theme, the file tree poking in on the left, a notification half-cropped at the top, jagged when it scales. The other is a clean card: nice background, a little window frame, syntax colours that pop. Same code. Wildly different impression.

The second one isn't fancier tooling or better taste. It's a 15-second step the person took before posting.

Why the raw screenshot looks bad

A screenshot captures your environment, not your code. So it drags along everything around the snippet:

• Whatever editor theme you happen to use, clashing with wherever you post it
• Uneven margins, a sliver of the sidebar, a stray tab bar
• Your OS's compression, which softens the text the moment it's scaled
• No breathing room — the code is jammed edge to edge

None of that has anything to do with the point you're making. It's noise, and it makes good code look careless.

What a "code image" actually fixes

The idea is simple: instead of screenshotting your screen, you paste the code into a tool that renders just the snippet — properly highlighted — onto a clean canvas you control. You pick the theme, the background, the padding, maybe a Mac-style window frame. Then you export a crisp PNG (or SVG, if you want text that stays sharp at any zoom).

The result reads as intentional. In a tweet it stops the scroll. In a slide it doesn't look like you alt-tabbed mid-talk. In a README it matches the rest of your docs.

A few things worth getting right:

• Pick a theme that fits the destination. A dark snippet on a light slide is hard to read. Most tools let you set the window's light/dark mode independently of the syntax colours.
• Give it padding. Generous space around the code does more for "looks professional" than any theme. Cramped is the giveaway.
• Use SVG for docs, PNG for social. SVG keeps text razor-sharp when someone zooms a diagram in your documentation. PNG is the safe default everywhere else.
• Don't go overboard on effects. A subtle shadow and a clean background beat neon gradients and a 3D tilt cranked to eleven. The code is the subject.

The text-versus-image tradeoff

One honest caveat, because it matters: an image of code is not code. Nobody can copy-paste it, a screen reader can't read it, and search engines can't index it. That's a real cost, and it's why you should never turn a code image into the only copy of something someone might need to run.

The rule: plain text when people need to use the code (a thread answer, a docs example, a Stack Overflow reply). A code image when people need to be impressed by it (a launch tweet, a slide, a hero image). Match the medium to the job and you get the best of both.

The honest 15 seconds

Here's the whole workflow with Primova's Code → Image tool:

1. Paste your snippet. It auto-detects the language and highlights it.
2. Pick a theme and a background — start with a dark theme on the brand gradient.
3. Nudge the padding up until it has room to breathe.
4. Export PNG (or copy straight to your clipboard) and paste it wherever you're posting.

Everything renders in your browser, so your code never gets uploaded to anyone's server — which matters if the snippet is from something unreleased. And there's a shareable link that encodes the whole setup, so a teammate can open the exact same image to tweak the wording without you emailing a file back and forth.

When it's worth it

Reach for a code image when the presentation matters:

• A snippet you're showing off on X or LinkedIn
• A slide in a talk or a course
• A hero image for a blog post or a release note
• A "here's the clean version" in a tutorial

For those, the difference between a raw screenshot and a proper render is the difference between looking like you rushed it and looking like you meant it.

Paste a snippet into Code → Image and post the next one as a real image. It's free, it runs locally, and it'll take you about as long as the screenshot would have.