Latest Articles
Social Media
How to Share Code on Twitter, LinkedIn & Instagram
By Anmol Dubey5 min read
Developers share code every day — in tweets, LinkedIn updates, GitHub READMEs, and Slack messages. But pasting raw text is a missed opportunity. Formatted code images get significantly more engagement because they stop the scroll and look professional.
CodeHilite is a free, browser-based tool that turns any code snippet into a beautiful, shareable image in seconds — no account needed, no watermark.
Step-by-step: From code to shareable image
- Paste your code into the editor on the left. CodeHilite auto-detects your language, or pick it manually from the dropdown.
- Choose a theme. For dark-mode audiences on Twitter, try Atom One Dark or Dracula. For LinkedIn, GitHub Light or VS look clean and professional.
- Set your background. Use white for a minimal look, or pick a gradient to make it visually striking. Gradients perform well on Instagram.
- Adjust card width. For Twitter, keep it under 600px. For LinkedIn posts, 700–800px looks great.
- Export as PNG — lossless, sharp on all screens, and supported everywhere.
💡 Pro tip: Turn on the Mac-style titlebar and set a descriptive filename like api-handler.js — it adds context and looks polished in social feeds.
Platform-specific tips
- Twitter / X: Keep code short — 10–20 lines max. Dark themes perform well in night mode.
- LinkedIn: Wider cards with light themes look more corporate. Add a caption explaining what the code does.
- Instagram: Square crops work best. Bold gradient backgrounds pop in the feed. Use large font sizes (16–18px).
- GitHub README: Export as PNG and embed with
. Use light themes to match GitHub's default look.
// A clean snippet, ready to share
const greet = (name) => {
return `Hello, ${name}! 👋`;
};
console.log(greet('world')); // Hello, world! 👋
Themes
Best Syntax Highlighting Themes for Code Screenshots
By Anmol Dubey4 min read
The theme you choose can make or break a code screenshot. Too dark and it disappears on a light background. Too busy and the syntax colours clash. Here's a breakdown of the best themes in CodeHilite and exactly when to use each one.
Dark themes
- Atom One Dark — the most popular choice for social media. Muted tones, high readability, looks great on any background.
- Dracula — vibrant purples and pinks. Stands out on Instagram and in slide decks.
- Tokyo Night — cool blues and soft purples. Perfect for a clean, modern aesthetic.
- Nord — arctic colour palette, extremely readable. Great for documentation screenshots.
- Night Owl — designed for low-light reading, excellent colour contrast.
Light themes
- GitHub Light — the standard for tech content. Universally recognised, great for README embeds and blog posts.
- Visual Studio — clean and professional, ideal for LinkedIn and corporate tech content.
- Xcode — Apple-style syntax colours, great for Swift and iOS snippets.
- Solarized Light — warm tones, easy on the eyes, classic developer aesthetic.
💡 Pro tip: Match your background to your theme. Dark themes pair beautifully with deep gradient backgrounds. Light themes look sharpest on white or very light grey.
Font pairing recommendations
For the sharpest screenshots, use JetBrains Mono (default) or Fira Code — both render cleanly at any size. Avoid Courier New for screenshots as it can look pixelated at small sizes.
Portfolio
Level Up Your Developer Portfolio With Code Images
By Anmol Dubey6 min read
Your portfolio is your first impression. Recruiters and clients judge your attention to detail before they read a single line of code. Using beautifully formatted code images throughout your portfolio signals that you care about presentation — which often correlates with caring about code quality.
Where to use code images in your portfolio
- Project cards: Show a key function or algorithm from each project instead of a plain UI screenshot.
- About / Skills section: Display a snippet in your primary language to immediately establish credibility.
- Case studies: Walk through your solution with annotated code images — use the line highlight feature to draw attention to the important parts.
- GitHub profile README: Embed a code image as a hero graphic at the top of your README.
- CV / résumé PDF: Export your best snippet as a small image and drop it into your CV header.
💡 Pro tip: Use the Highlight Lines feature in CodeHilite to draw attention to a specific part of your code. It's subtle but powerful — great for case studies where you want to explain a particular decision.
The 3-snippet portfolio formula
You don't need to show everything. Pick three snippets that show range: one showing your problem-solving ability, one showing your code style, and one showing domain knowledge. Export all three with a consistent theme and background for visual coherence.
Export
PNG vs JPEG vs PDF — Which Format Should You Use?
By Anmol Dubey3 min read
CodeHilite lets you export in five formats: PNG, JPEG, PDF, HTML, and plain text. Here's exactly when to use each one.
PNG — Use this 90% of the time
PNG is lossless, meaning the image stays perfectly sharp at any size. Use PNG for social media posts, embedding in websites, GitHub READMEs, and Notion pages. It also supports transparent backgrounds, which is useful for placing your snippet over a custom background in a design tool.
JPEG — Only for photographic contexts
JPEG compresses images and can blur sharp text edges. Avoid it for code screenshots unless file size is a hard constraint. If you're embedding in a large PDF where image quality is less critical, JPEG can reduce file size significantly.
PDF — For documents and print
Export as PDF when your snippet is going into a report, academic paper, or printable document. The PDF export produces a clean result that prints crisply at any resolution.
HTML — For embedding on webpages
The HTML export gives you a self-contained file with syntax highlighting intact — useful if you want to embed a live, selectable code block on a webpage without JavaScript dependencies.
💡 Bottom line: When in doubt, use PNG. It looks the best, is universally supported, and preserves every pixel exactly as it appeared in the preview.
Comparison
CodeHilite vs Carbon vs Ray.so — Honest Comparison
By Anmol Dubey7 min read
There are several tools for turning code into images. Carbon, Ray.so, Codeimg, and Showcode are the most well-known. Here's how CodeHilite compares — and where it wins.
CodeHilite advantages
- No account required. Open the URL, paste your code, export. That's it.
- Multiple export formats. PNG, JPEG, PDF, HTML, and plain text — most alternatives only offer PNG.
- Line highlighting. Draw attention to specific lines with a subtle background highlight — great for tutorials.
- Snippet saving. Save and reload your snippets within a session without any backend or login.
- File upload. Drag and drop a source file directly onto the editor — language is auto-detected.
- Fully free. No paywalled themes, no watermarks, no premium tier.
When to use alternatives
Carbon is a solid choice if you want a very minimal interface and only need PNG. Ray.so has excellent default aesthetics if you don't want to customise. But for developers who want control — typography, padding, line numbers, highlight lines, and multiple export formats — CodeHilite gives you more in a single free tool.
Teaching
How to Use Code Images in Tutorials and Online Courses
By Anmol Dubey5 min read
If you create programming tutorials, YouTube videos, blog posts, or online courses, code images are one of your most powerful visual tools. They're clearer than a raw IDE screenshot, easier to annotate, and look professional even at low video resolutions.
Why code images beat IDE screenshots for teaching
- No visual noise. IDE screenshots include toolbars, file trees, and notifications. Code images focus 100% on the code.
- Consistent appearance. Your screenshots look the same regardless of which OS or IDE a student has.
- Highlight what matters. Use CodeHilite's line-highlight feature to visually emphasise the line you're explaining.
- High contrast for video. Dark themes with large fonts (16–18px) remain readable even on compressed YouTube video.
Recommended settings for tutorial creators
- Font size: 15–18px — readable in video thumbnails and at lower resolutions
- Theme: Atom One Dark or Night Owl for video; GitHub Light for blog posts
- Card width: 700–800px for 16:9 slides; 560px for blog post embeds
- Line numbers: On — they help students follow along ("look at line 7")
- Shadow: Soft or Mid — adds depth when placed on a slide background
💡 Pro tip: Create a standard set of settings for your course — same theme, font, and size throughout. Consistent styling across all your code images gives your content a polished, professional brand.
Ready to make your code beautiful?
Free, instant, no account needed. Paste your code and export in seconds.
Open CodeHilite →