代码截图 MCP
项目介绍
Code Screenshot Generator MCP
一个生成精美代码截图的MCP服务器，直接从Claude生成。
概述
这是一个模型上下文协议（MCP）服务器，它使Claude能够使用专业主题生成语法高亮的代码截图。支持直接文件读取、行选择、git diff可视化和批量处理。
功能
- 5个专业主题：Dracula、Nord、Monokai、GitHub Light、GitHub Dark
- 文件集成：直接从文件路径中截图代码，并选择行范围
- Git Diff 支持：可视化暂存或未暂存的变化
- 批量处理：同时处理多个文件
- 自动语言检测：支持20多种编程语言
- 原生Claude集成：与Claude Desktop和Claude Code兼容
安装
先决条件
npm install -g code-screenshot-mcp
配置
快速设置（Claude Code）：
claude mcp add code-screenshot-mcp
手动设置（Claude Desktop）：
在配置文件 ~/Library/Application Support/Claude/claude_desktop_config.json 中添加：
{
"mcpServers": {
"code-screenshot": {
"command": "code-screenshot-mcp"
}
}
}
配置后重启Claude Desktop。
开发环境设置
git clone https://github.com/MoussaabBadla/code-screenshot-mcp.git
cd code-screenshot-mcp
npm install
npm run build
快速开始
基础截图
"生成这段TypeScript函数的代码截图，使用Nord主题：
function fibonacci(n: number): number {
if (n <= 1) return n;
return fibonacci(n-1) + fibonacci(n-2);
}
"
从文件
"截图src/index.ts，使用Dracula主题"
特定行
"截图src/generator.ts的第20到45行，使用Monokai主题"
Git Diff
"截图我的git diff，使用GitHub Dark主题"
批量处理
"截图src/index.ts、src/generator.ts和src/templates.ts"
可用的主题
dracula- 深紫色主题（默认）nord- 北极蓝调主题monokai- 经典深色主题github-light- 清洁浅色主题github-dark- GitHub的深色主题
API 参考
generate_code_screenshot
从代码字符串生成截图。
参数：
code(字符串，必需) - 要截图的源代码language(字符串，必需) - 编程语言标识符theme(字符串，可选) - 颜色主题（默认："dracula"）
返回值： 带有base64编码的PNG图像
screenshot_from_file
从文件路径截图代码，自动检测语言。
参数：
filePath(字符串，必需) - 源文件路径startLine(数字，可选) - 开始行号（从1开始）endLine(数字，可选) - 结束行号theme(字符串，可选) - 颜色主题（默认："dracula"）
支持的扩展名：
.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
返回值： 带有base64编码的PNG图像
screenshot_git_diff
生成git diff输出的截图。
参数：
filePath(字符串，可选) - 要diff的具体文件（如果省略则显示所有）staged(布尔值，可选) - 显示暂存变化而不是未暂存变化theme(字符串，可选) - 颜色主题（默认："dracula"）
返回值： 带有base64编码的PNG图像
batch_screenshot
在一个操作中处理多个文件。
参数：
filePaths(字符串数组，必需) - 文件路径数组theme(字符串，可选) - 应用于所有截图的主题（默认："dracula"）
返回值： 带有成功/失败状态的PNG图像数组
示例
Dracula 主题
Nord 主题
Monokai 主题
GitHub Light 主题
GitHub Dark 主题
贡献
欢迎贡献。请遵循以下步骤：
- 分叉仓库
- 创建功能分支：
git checkout -b feature/your-feature - 提交更改：
git commit -m '添加你的功能' - 推送到分支：
git push origin feature/your-feature - 提交拉取请求
许可证
MIT 许可证 - 版权所有 (c) 2025 Moussaab Badla
详情见LICENSE文件。
致谢
使用 Model Context Protocol、Playwright 和 Highlight.js 构建。