Code Screenshot MCP

🚀 代码截图生成器 MCP

代码截图生成器 MCP 是一个基于 Model Context Protocol (MCP) 的服务器，可让 Claude 直接生成带有专业主题、语法高亮的代码截图。它支持直接读取文件、选择代码行、可视化 Git 差异以及批量处理等功能。

🚀 快速开始

基础截图

"使用 Nord 主题为这个 TypeScript 函数生成代码截图：

function fibonacci(n: number): number {
  if (n <= 1) return n;
  return fibonacci(n-1) + fibonacci(n-2);
}
"

从文件生成截图

"使用 Dracula 主题为 src/index.ts 生成截图"

指定代码行

"使用 Monokai 主题为 src/generator.ts 的第 20 - 45 行生成截图"

Git 差异截图

"使用 GitHub Dark 主题为我的 Git 差异生成截图"

批量处理

"为 src/index.ts、src/generator.ts 和 src/templates.ts 生成截图"

✨ 主要特性

• 5 种专业主题：Dracula、Nord、Monokai、GitHub Light、GitHub Dark
• 文件集成：可直接从文件路径生成代码截图，并支持选择行范围
• Git 差异支持：可视化暂存或未暂存的更改
• 批量处理：可同时处理多个文件
• 自动语言检测：支持 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

💻 使用示例

可用主题

• dracula - 深紫色主题（默认）
• nord - 北极蓝调主题
• monokai - 经典深色主题
• github-light - 简洁浅色主题
• github-dark - GitHub 深色主题

各主题示例

Dracula 主题

Nord 主题

Monokai 主题

GitHub Light 主题

GitHub Dark 主题

📚 详细文档

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 差异输出的截图。 参数：

• filePath（字符串，可选） - 要对比的特定文件（如果省略，则显示所有文件）
• staged（布尔值，可选） - 显示暂存更改而不是未暂存更改
• theme（字符串，可选） - 颜色主题（默认："dracula"）

返回值：Base64 编码的 PNG 图像

batch_screenshot

在一次操作中处理多个文件。 参数：

• filePaths（字符串数组，必需） - 文件路径数组
• theme（字符串，可选） - 应用于所有截图的主题（默认："dracula"）

返回值：带有成功/失败状态的 PNG 图像数组

🤝 贡献指南

欢迎贡献代码。请遵循以下步骤：

1. 分叉仓库
2. 创建功能分支：git checkout -b feature/your-feature
3. 提交更改：git commit -m 'Add your feature'
4. 推送到分支：git push origin feature/your-feature
5. 提交拉取请求

📄 许可证

本项目采用 MIT 许可证 - 版权所有 (c) 2025 Moussaab Badla。详情请参阅 LICENSE 文件。

🙏 致谢

本项目基于 Model Context Protocol、Playwright 和 Highlight.js 构建。

仓库地址：github.com/MoussaabBadla/code-screenshot-mcp