Code shared as an image, with a window frame, a good theme and a nice font, is how developers post tips on social media and how many slide decks and blog headers show code. Tools like Carbon and ray.so do it by hand, one snippet at a time. To generate them automatically, for a docs site, a newsletter or a "tip of the day" bot, highlight the code as HTML and screenshot it.
Highlight in the page
The simplest route is to let highlight.js run in the page. JavaScript runs before the capture, and selector crops the image to the window:
curl -X POST "https://shotkit.net/api/take" \
-H "X-Access-Key: YOUR_ACCESS_KEY" \
-H "Content-Type: application/json" \
-d '{"html":"<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/highlight.js@11.11.1/styles/github-dark.min.css\"><script src=\"https://cdn.jsdelivr.net/npm/highlight.js@11.11.1/lib/highlight.min.js\"></script><div class=\"win\" style=\"display:inline-block;margin:40px;border-radius:12px;background:#0d1117;box-shadow:0 20px 60px rgba(0,0,0,.4);overflow:hidden\"><div style=\"padding:12px 16px;color:#8b949e;font:12px system-ui\">● ● ● fetch.ts</div><pre style=\"margin:0;padding:0 24px 24px;font:15px/1.6 ui-monospace,Menlo,monospace\"><code class=\"language-ts\">const res = await fetch(url);\nif (!res.ok) throw new Error(res.statusText);\nconst data = await res.json();</code></pre></div><script>hljs.highlightAll()</script>","selector":".win","format":"png","omit_background":true,"device_scale_factor":2,"wait_until":["networkidle0"]}' \
--fail-with-body -o shot.pngomit_background keeps the rounded corners and shadow on a transparent background, so the image sits well on any page.
Or highlight on your server
For full control and faster renders, highlight before sending. Shiki uses VS Code's themes and grammars and outputs HTML with inline colors, so the page needs no scripts:
import { codeToHtml } from "shiki";
const code = await codeToHtml(source, { lang: "ts", theme: "github-dark" });
const html = `<div class="win" style="display:inline-block;padding:24px;border-radius:12px;background:#0d1117">${code}</div>`;
// POST { html, selector: ".win", format: "png", omit_background: true, device_scale_factor: 2 }Details that make it look good
- Fonts: load JetBrains Mono, Fira Code or another coding font from Google Fonts, and wait with
networkidle0. - Line numbers: add them with a CSS counter on each line, or with Shiki's transformers.
- Sharpness:
device_scale_factor2 or 3 keeps text crisp on retina screens and in slides. - Size for the platform: wrap the window in a fixed-size background (for example 1600 × 900 for X) instead of capturing the window alone.
Frequently asked questions
Can I use any syntax theme?
Yes. Any highlight.js stylesheet, any Shiki theme, or your own CSS. You control the HTML, so you control the colors.
Can I screenshot a GitHub file or gist directly?
You can point url at the page and set selector to the file's container, but the markup belongs to GitHub and changes. Fetching the raw file and rendering it yourself is more reliable.
How do I make an animated code image?
Add a CSS typing animation to your HTML and record it with format: "gif" or "mp4". See website to GIF.