Code Screenshot MCP

代码截图生成器MCP

MCP服务器，用于直接从Claude生成漂亮的代码截图

](https://www.npmjs.com/package/code-screenshot-mcp) ](https://www.npmjs.com/package/code-screenshot-mcp)   

概述

一个模型上下文协议（MCP）服务器，使Claude能够生成具有专业主题的语法突出显示的代码截图。支持直接文件读取、行选择、git diff可视化和批处理。

特性

• 5专业主题：德古拉、诺德、莫诺凯、GitHub Light、GitHub Dark
• 文件集成：直接从文件路径中选择行范围的截图代码
• Git差异支持：可视化阶段性或非阶段性的变化
• 批处理：同时处理多个文件
• 自动语言检测：支持20多种编程语言
• 克劳德原住民融合：与Claude Desktop和Claude Code配合使用

安装

先决条件

npm install -g code-screenshot-mcp

配置

快速设置（克劳德代码）：

claude mcp add code-screenshot-mcp

手动设置（克劳德桌面）：

添加到您的Claude配置文件 ~/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

快速开始

基本屏幕截图

"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"

Git 差异

"Screenshot my git diff with GitHub Dark theme"

批处理

"Screenshot src/index.ts, src/generator.ts, and 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 （string，可选）-特定于diff的文件（如果省略则显示全部）
• staged （布尔值，可选）-显示阶段性更改而不是非阶段性更改
• theme （字符串，可选）-颜色主题（默认：“dracula”）

退货： 采用base64编码的PNG图像

batch_screenshot

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

参数：

• filePaths （string\[\]，必填）-文件路径数组
• theme （字符串，可选）-应用于所有屏幕截图的主题（默认：“dracula”）

退货： 具有成功/失败状态的PNG图像数组

例子

德古拉主题

Dracula Theme

北方主题

Nord Theme

Monokai主题

Monokai Theme

GitHub轻量级主题

GitHub黑暗主题

贡献

欢迎捐款。请按照以下步骤操作：

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

许可证

麻省理工学院许可证-版权所有（c）2025 Moussaab Badla

看 许可证 文件以获取详细信息。

致谢

内置 模型上下文协议, 剧作家，以及 Highlight.js.

______________________________________________________________________

仓库: