𝗛𝗼𝘄 𝗪𝗲 𝗚𝗲𝗻𝗲𝗿𝗮𝘁𝗲 𝗖𝗼𝗱𝗲 𝗦𝗰𝗿𝗲𝗲𝗻𝘀𝗵𝗼𝘁𝘀 𝗳𝗼𝗿 𝗦𝗼𝗰𝗶𝗮𝗹𝘀
We used to take code screenshots by hand.
We would open the editor, crop the window, and drop the file into a post. This caused three problems:
- Themes changed between posts.
- Image widths were inconsistent.
- Screenshots looked blurry on mobile screens.
We stopped doing it manually. Now we use two different methods based on our needs.
For one-off posts We use a browser tool. You paste your code, pick a language, and download a clean PNG. This is fast for a single tweet or a slide.
For automated posts We use an API. This is for when you need to generate images at publish time or inside a build pipeline. You send the code via a POST request and get a URL back.
Why use an API? A human cannot click a button in a deployment pipeline. An API allows your system to create perfect images every time without manual work.
Our tips for better social media code images:
- Keep it short. Do not exceed twenty lines. Long snippets become too small to read on mobile.
- Use high contrast. Themes like Dracula or One Dark stay sharp after social media platforms compress your images. Low contrast themes look muddy.
- Maintain resolution. High resolution ensures your code stays crisp on retina displays.
- Cache your results. Store the image URL so you do not render the same code twice.
The browser tool and the API use the same renderer. This means your manual posts and your automated posts always look the same.
How do you handle code screenshots? Do you do it by hand or use an API? Let me know in the comments.
Source: https://dev.to/accreditly/how-we-generate-code-screenshots-for-socials-b91