An MCP server that enables Claude to generate code screenshots with syntax highlighting and professional themes, supporting file reading, line selection, git diff visualization, and batch processing.

Installation

NPM Global

npm install -g code-screenshot-mcp

From Source

git clone https://github.com/MoussaabBadla/code-screenshot-mcp.git
cd code-screenshot-mcp
npm install
npm run build

Configuration

Claude Desktop

{
  "mcpServers": {
    "code-screenshot": {
      "command": "code-screenshot-mcp"
    }
  }
}

Available Tools

Tool	Description
generate_code_screenshot	Generate a screenshot from a code string with syntax highlighting and themes
screenshot_from_file	Create a code screenshot from a file with automatic language detection and line range selection
screenshot_git_diff	Generate a screenshot of git diff for staged or unstaged changes
batch_screenshot	Process multiple files in a single operation to create multiple screenshots

Features

• 5 professional themes: Dracula, Nord, Monokai, GitHub Light, GitHub Dark
• File integration: create code screenshots directly from file paths with line range selection
• Git Diff support: visualize staged or unstaged changes
• Batch processing: handle multiple files simultaneously
• Automatic language detection: support for 20+ programming languages
• Native Claude integration: works with Claude Desktop and Claude Code

Usage Examples

Generate a code screenshot of this TypeScript function with Nord theme

Screenshot src/index.ts with Dracula theme

Screenshot lines 20-45 of src/generator.ts with Monokai theme

Screenshot my git diff with GitHub Dark theme

Screenshot src/index.ts, src/generator.ts, and src/templates.ts

Notes

Supports 20+ file extensions, including .js, .jsx, .ts, .tsx, .py, .rb, .go, .rs, .java, .c, .cpp, .cs, .php, .swift, .kt, .sql, .sh, .yml, .yaml, .json, .xml, .html, .css, .scss, .md. Built with Playwright and Highlight.js.