Generate beautiful, syntax-highlighted code screenshots with professional themes directly from Claude.
Generate code screenshots from code strings with syntax highlighting and language specification
Screenshot code from files with automatic language detection and optional line range selection
Visualize git diffs for staged or unstaged changes, for all files or specific files
Batch process multiple files simultaneously in a single operation
Choose from 5 professional themes: Dracula (default), Nord, Monokai, GitHub Light, and GitHub Dark
Support for 20+ programming languages including JavaScript, TypeScript, Python, Ruby, Java, Go, Rust, C/C++, C#, PHP, Swift, Kotlin, SQL, Shell, YAML, JSON, XML, HTML, CSS, SCSS, and Markdown
Direct integration with Claude Desktop and Claude Code via Model Context Protocol
Enables visualization of git diff output with syntax highlighting, supporting both staged and unstaged changes
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Code Screenshot Generator screenshot lines 15-30 of src/utils.ts with nord theme"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
MCP server for generating beautiful code screenshots directly from Claude
A Model Context Protocol (MCP) server that enables Claude to generate syntax-highlighted code screenshots with professional themes. Supports direct file reading, line selection, git diff visualization, and batch processing.
Related MCP server: code-snippet-image-mcp
5 Professional Themes: Dracula, Nord, Monokai, GitHub Light, GitHub Dark
File Integration: Screenshot code directly from file paths with line range selection
Git Diff Support: Visualize staged or unstaged changes
Batch Processing: Process multiple files simultaneously
Auto Language Detection: Supports 20+ programming languages
Native Claude Integration: Works with Claude Desktop and Claude Code
npm install -g code-screenshot-mcpQuick Setup (Claude Code):
claude mcp add code-screenshot-mcpManual Setup (Claude Desktop):
Add to your Claude configuration file at ~/Library/Application Support/Claude/claude_desktop_config.json:
{
"mcpServers": {
"code-screenshot": {
"command": "code-screenshot-mcp"
}
}
}Restart Claude Desktop after configuration.
git clone https://github.com/MoussaabBadla/code-screenshot-mcp.git
cd code-screenshot-mcp
npm install
npm run build"Generate a code screenshot of this TypeScript function with Nord theme:
function fibonacci(n: number): number {
if (n <= 1) return n;
return fibonacci(n-1) + fibonacci(n-2);
}
""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"dracula - Dark purple theme (default)
nord - Arctic blue-tinted theme
monokai - Classic dark theme
github-light - Clean light theme
github-dark - GitHub's dark theme
generate_code_screenshotGenerate a screenshot from code string.
Parameters:
code (string, required) - Source code to screenshot
language (string, required) - Programming language identifier
theme (string, optional) - Color theme (default: "dracula")
Returns: PNG image with base64 encoding
screenshot_from_fileScreenshot code from file path with automatic language detection.
Parameters:
filePath (string, required) - Path to source file
startLine (number, optional) - Start line number (1-indexed)
endLine (number, optional) - End line number
theme (string, optional) - Color theme (default: "dracula")
Supported Extensions:
.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
Returns: PNG image with base64 encoding
screenshot_git_diffGenerate screenshot of git diff output.
Parameters:
filePath (string, optional) - Specific file to diff (shows all if omitted)
staged (boolean, optional) - Show staged changes instead of unstaged
theme (string, optional) - Color theme (default: "dracula")
Returns: PNG image with base64 encoding
batch_screenshotProcess multiple files in a single operation.
Parameters:
filePaths (string[], required) - Array of file paths
theme (string, optional) - Theme applied to all screenshots (default: "dracula")
Returns: Array of PNG images with success/failure status
Contributions are welcome. Please follow these steps:
Fork the repository
Create a feature branch: git checkout -b feature/your-feature
Commit changes: git commit -m 'Add your feature'
Push to branch: git push origin feature/your-feature
Submit a pull request
MIT License - Copyright (c) 2025 Moussaab Badla
See LICENSE file for details.
Built with Model Context Protocol, Playwright, and Highlight.js.
Repository: github.com/MoussaabBadla/code-screenshot-mcp
Generate screenshots for multiple files at once. Useful for documenting multiple code files quickly.
Inputs: filePaths (required), theme.
Generate a beautiful screenshot of code with syntax highlighting and themes
Inputs: code (required), language (required), theme.
Screenshot code directly from a file path, with optional line range selection. Auto-detects language from file extension.
Inputs: filePath (required), startLine, endLine, theme.
Generate a screenshot of git diff output. Shows changes in your working directory or staged changes.
Inputs: filePath, staged, theme.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 4 tools
The tools are mostly distinct with clear purposes: batch_screenshot for multiple files, generate_code_screenshot for general code, screenshot_from_file for file-based input, and screenshot_git_diff for git diffs. There is minor overlap between generate_code_screenshot and screenshot_from_file, as both handle single-file code screenshots, but the descriptions clarify the input method differences.
The naming is mixed with no consistent pattern: batch_screenshot uses verb_noun, generate_code_screenshot uses verb_adjective_noun, screenshot_from_file uses noun_preposition_noun, and screenshot_git_diff uses noun_noun. This inconsistency makes the set less predictable, though all names are readable and descriptive.
With 4 tools, the count is well-scoped for a code screenshot generator. Each tool serves a distinct use case (batch processing, general code, file input, git diffs), and there are no redundant or missing tools for the domain, making it efficient and focused.
The tool set covers the core workflows for code screenshots: single and batch generation, file-based input, and git diffs. A minor gap exists in lacking a tool for screenshot customization (e.g., themes or layout adjustments), but agents can work around this with the provided tools for most documentation needs.
Your versioned prompt library: search, read, save and version prompts from Claude Code.
Persistent memory for Claude Code and Cursor. Stop re-explaining your project every session.
Screenshot, PDF and HTML-to-image rendering API so Claude and Cursor can see any web page.
Screenshot, PDF and HTML-to-image rendering API so Claude and Cursor can see any web page.