---
name: snapcode
description: Generate beautiful code snippet images (PNG/SVG) from the terminal or MCP. Use whenever a polished code visual would improve documentation, a README, a PR description, a blog post, or a changelog.
---

# 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.

## When to use Snapcode

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.

## How to call it

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

### Option 1: MCP (preferred)

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).

### Option 2: CLI fallback

```bash
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.

## Reference

- **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.

## Example

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

Then in markdown:

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