代码截图生成器

一款通过MCP服务器直接从Claude生成语法高亮代码截图的工具,支持文件读取、行选择、git差异可视化和批量处理。

  • by MoussaabBadla
  • TypeScript
  • 本地部署
  • 44 星标
  • 更新于
在 GitHub 查看 MoussaabBadla/code-screenshot-mcp

使用说明

代码截图生成器MCP

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

概述

一个模型上下文协议(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图像数组

例子

德古拉主题

北方主题

Monokai主题

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.


仓库: github/Moussaab Badla/code-creenshot-mcp