Code Snippet Image Mcp Server

コードスニペット画像 MCP サーバー

ソーシャルメディアに投稿するための、美しいコードスニペット画像を生成する MCP（Model Context Protocol）サーバーです。

デモ

📹 デモ動画を見る

MCP サーバーが美しいコードスニペット画像をリアルタイムで生成する様子をご覧ください

機能

• 美しいコード画像：シンタックスハイライト付きの美しいコードスニペット画像を生成します
• 複数のテーマ：Dracula、Monokai、GitHub、Solarized Dark／Light のテーマに対応しています
• シンタックスハイライト：複数のプログラミング言語に対応しています
• カスタマイズ可能：寸法、テーマ、スタイルのオプションを設定できます

インストール

npm install
npm run build

設定

MCP 設定ファイルに追加します。

{
  "mcpServers": {
    "code-snippet-image-mcp-server": {
      "command": "npx",
      "args": [
        "-y",
        "code-snippet-image-mcp-server",
        "/custom/output/directory"
      ]
    }
  }
}

サーバーは、最初のコマンドライン引数として出力ディレクトリを任意で受け取ります。指定しない場合、カレントディレクトリの ./output がデフォルトで使用されます。

使い方

MCP サーバーは、次のメインツールを1つ提供します。

create_code_image

美しいコードスニペット画像を生成します。

パラメーター：

• code（文字列、必須）：画像に変換するコード
• language（文字列、任意）：シンタックスハイライトに使用するプログラミング言語（デフォルト："javascript"）
• theme（文字列、任意）：カラーテーマ（デフォルト："dracula"）
• title（文字列、任意）：コードスニペットのタイトル
• width（数値、任意）：画像の幅（ピクセル単位、デフォルト：800）
• height（数値、任意）：画像の高さ（ピクセル単位、指定がない場合は自動）
• padding（数値、任意）：コードウィンドウ周囲の余白（ピクセル単位、デフォルト：52）
• backgroundColor（文字列、任意）：カスタム背景色（テーマの背景色を上書きします）
• showLineNumbers（ブール値、任意）：行番号の表示／非表示（デフォルト：true）

例：

{
  "code": "const hello = () => console.log('Hello, World!');",
  "language": "javascript",
  "theme": "dracula",
  "title": "Hello World Function",
  "width": 800,
  "height": 600,
  "padding": 52,
  "showLineNumbers": true
}

対応テーマ

Dracula（デフォルト）

Monokai

GitHub

Solarized Dark

Solarized Light

対応言語

サーバーはシンタックスハイライトに highlight.js を使用しており、次の言語を含む、highlight.js が対応するすべての言語をサポートしています。

• JavaScript／TypeScript
• Python
• Java
• C／C++
• Go
• Rust
• PHP
• Ruby
• その他多数...

出力

生成された画像は、指定した出力ディレクトリ（またはデフォルトの ./output）にタイムスタンプ付きで保存されます。

ライセンス

MIT