suhaibkhan/code-snippet-image-mcp

Code snippet image MCP server

An MCP (Model Context Protocol) server that generates beautiful code snippet images to post to social media.

Demo

📹 Watch Demo Video

Watch the MCP server generate beautiful code snippet images in real-time

Features

• Beautiful Code Images: Generate beautiful code snippet images with syntax highlighting
• Multiple Themes: Support for Dracula, Monokai, GitHub, Solarized Dark/Light themes
• Syntax Highlighting: Support for multiple programming languages
• Customizable: Configurable dimensions, themes, and styling options

Installation

npm install
npm run build

Configuration

Add to your MCP configuration file:

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

The server accepts an optional output directory as the first command line argument. If not provided, it defaults to ./output in the current working directory.

Usage

The MCP server provides one main tool:

create_code_image

Generate a beautiful code snippet image:

Parameters:

• code (string, required): The code to convert to image
• language (string, optional): Programming language for syntax highlighting (default: "javascript")
• theme (string, optional): Color theme (default: "dracula")
• title (string, optional): Title for the code snippet
• width (number, optional): Image width in pixels (default: 800)
• height (number, optional): Image height in pixels (auto if not specified)
• padding (number, optional): Padding around the code window in pixels (default: 52)
• backgroundColor (string, optional): Custom background color (overrides theme background)
• showLineNumbers (boolean, optional): Show or hide line numbers (default: true)

Example:

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

Supported Themes

Dracula (Default)

Monokai

GitHub

Solarized Dark

Solarized Light

Supported Languages

The server uses highlight.js for syntax highlighting and supports all languages that highlight.js supports, including:

• JavaScript/TypeScript
• Python
• Java
• C/C++
• Go
• Rust
• PHP
• Ruby
• And many more...

Output

Generated images are saved in the specified output directory (or ./output by default) with timestamps.

License

MIT