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