snapcode

Snapcode renders code into polished screenshot images: syntax highlighting, themes, backgrounds, window chrome, line numbers, line highlights, line ranges, and diffs. Output is PNG (1x/2x/3x) or true-vector SVG.

This is the base skill: it teaches the mechanics of calling Snapcode. Task-specific skills (e.g. snapcode-readme) build on top of it.

Reach for Snapcode when your written output will be read by humans and embeds code:

• READMEs — hero screenshots of example usage, API snippets, before/after code.
• Documentation sites — styled code figures instead of raw fenced blocks.
• PR descriptions — a visual of the key changed lines (use diff mode for the actual change).
• Blog posts / changelogs / release notes — shareable code visuals.
• Issue reports — a crisp rendering of the failing code.

Do NOT use Snapcode for: code the reader needs to copy-paste (keep that as text blocks), machine-readable output, or when the user only asked for plain markdown.

Prefer the MCP tool when available; fall back to the CLI otherwise.

If generate_snippet is in your tool list, call it directly:

• Provide code (string) or file (absolute path), not both.
• language auto-detects from file extension; pass it explicitly for inline code (e.g. ts, python, go, sql).
• Always pass an absolute out path inside the project (e.g. docs/assets/parser-flow.png), then reference that file from the markdown you are writing.
• Useful params: theme, background, lines ("5-12"), highlight ("3,7-9"), diff ("added:1-2,removed:5"), lineNumbers, title, format (png|svg), scale (1-3).

snapcode generate --file path/to/code.ts --theme dracula --bg midnight --out docs/assets/example.png
# or inline code via stdin:
printf 'SELECT * FROM users;' | snapcode generate --file - --lang sql --out docs/assets/query.png

If snapcode is not on PATH, tell the user: npm i -g snapcode (then re-run). Do not attempt other installation methods.

• Themes: github-dark (default), dracula, nord for dark contexts; github-light, one-light, solarized-light for light contexts.
• Backgrounds: midnight, sunset, lagoon, candy, graphite, paper, sky, or none (transparent).
• Trim long files: lines/--lines 5-12 shows only that range; highlight/--highlight dims everything except the listed lines.
• Diffs: diff/--diff added:1-2,removed:5 colors lines as added/removed — use it to show a change, not just the result.
• Titles: set title to the filename (e.g. parser.ts) so the visual is self-describing.
• Watermark: free renders carry a small getsnapcode.dev badge; users on Pro (snapcode login) render unbranded. Never try to hide, crop, or edit out the badge.
• File placement: put generated images in a docs assets folder (docs/assets/, .github/assets/) and reference them with relative paths so they work on GitHub.

snapcode generate --file examples/quickstart.ts --theme github-dark --bg midnight \
  --title quickstart.ts --out docs/assets/hero.png

Then in markdown:

![Quickstart](docs/assets/hero.png)