Spark
Sign In
MCP Connector

Generate Code Screenshots with Syntax Highlighting

MCP server for generating syntax-highlighted code screenshots with 5 themes, file integration, and git diff support.

Connect
Works with github
Moussaab Badla
Own this? Claim it

Maintainer of this project? Claim this page to edit the listing.

91
Spark score
out of 100
Updated 8 months ago
Fresher alternatives ↓
Version 1.0.0
Models
claude
Add to Favorites

Why it matters

Automate the creation of professional-looking code screenshots for documentation, presentations, or code reviews. This asset integrates with Claude Desktop to generate visually appealing images of your code with syntax highlighting and customizable themes.

Outcomes

What it gets done

01

Generate screenshots from code strings with syntax highlighting.

02

Create screenshots directly from files with automatic language detection.

03

Visualize Git diffs as code screenshots.

04

Process multiple files for batch screenshot generation.

Install

Add it to your toolbox

Run in your project directory:

curl -fsSL https://spark.entire.vc/get/vb-code-screenshot-generator | bash

Capabilities

Tools your agent gets

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

Overview

Code Screenshot Generator MCP Server

This MCP server generates syntax-highlighted code screenshots. It supports 5 professional themes, direct file reading with line selection, and visualization of git diffs. The tool also handles batch processing of multiple files and automatically detects over 20 programming languages. Use this tool when you need to create visually appealing code snippets for documentation, tutorials, presentations, or sharing code changes. It's ideal for integrating with AI assistants like Claude Desktop or Claude Code for seamless code visualization.

What it does

The big job is to easily create professional-looking code snippets for documentation, presentations, or sharing. The small job is to generate a code screenshot from a file with specific line ranges and a chosen theme. Installation is straightforward:

npm install -g code-screenshot-mcp

Then, you can use it with Claude:

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

Code Screenshot Generator MCP

MCP server for generating beautiful code screenshots directly from Claude

npm version
npm downloads
License: MIT
TypeScript
MCP

Code Screenshot Generator MCP server

Overview

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.

Features

  • 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

Installation

Prerequisites

npm install -g code-screenshot-mcp

Configuration

Quick Setup (Claude Code):

claude mcp add code-screenshot-mcp

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

Development Setup

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

Quick Start

Basic Screenshot

"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);
}
"

From File

"Screenshot src/index.ts with Dracula theme"

Specific Lines

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

Git Diff

"Screenshot my git diff with GitHub Dark theme"

Batch Processing

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

Available Themes

  • 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

API Reference

generate_code_screenshot

Generate 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_file

Screenshot 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_diff

Generate 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_screenshot

Process 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

Examples

Dracula Theme

Nord Theme

Monokai Theme

GitHub Light Theme

GitHub Dark Theme

FAQ

Common questions

Discussion

Questions & comments · 0

Sign In Sign in to leave a comment.