Code Snippet Image Mcp Server
About
An MCP (Model Context Protocol) server that generates beautiful code snippet images to post to social media.
Details
- Author
- suhaibkhan
- Downloads
- 283
- Categories
- Developer Tools
Jump to
- Generate beautiful code snippet images
- Syntax highlighting with multiple programming languages
- Customizable color themes (default: dracula)
- Adjustable image width, height, and padding
- Toggle line number visibility
Setting up with Highlight
This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:
- Download and install Highlight from highlightai.com/download
- Navigate to the plugins tab and select "Add Custom Plugin"
-
Configure the plugin with the settings below
Plugin Name
Code Snippet Image Mcp ServerCommand (node, npx, python, etc.)Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
- Enable "Start Automatically" if you want the plugin to start when Highlight launches
From the repository
Add the server to your MCP configuration file using the npx -y code-snippet-image-mcp-server command, optionally specifying a custom output directory. The server provides the create_code_image tool with parameters for code, language, theme, title, dimensions, padding, background color, and line numbers.
create_code_image
Generate a beautiful code snippet image with syntax highlighting and styling
Claude Desktop / Cursor
Paste into your MCP client config file to install this server.
{
"mcpServers": {
"code snippet image mcp server": {
"code-snippet-image-mcp-server": {
"command": "npx",
"args": [
"-y",
"code-snippet-image-mcp-server",
"/custom/output/directory"
]
}
}
}
}McpServers
{
"code-snippet-image-mcp-server": {
"command": "npx",
"args": [
"-y",
"code-snippet-image-mcp-server",
"/custom/output/directory"
]
}
}An MCP (Model Context Protocol) server that generates beautiful code snippet images to post to social media.
Watch the MCP server generate beautiful code snippet images in real-time
- 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
{ "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./outputin the current working directory.
Generate a beautiful code snippet image:
- 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)
{ "code": "const hello = () => console.log('Hello, World!');", "language": "javascript", "theme": "dracula", "title": "Hello World Function", "width": 800, "height": 600, "padding": 52, "showLineNumbers": true }
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...
Generated images are saved in the specified output directory (or./outputby default) with timestamps.
This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.
Create crafted UI components inspired by the best 21st.dev design engineers.
Bring agent evaluations, observability, and synthetic test set generation directly into your IDE for free with Galileo's new MCP server
An MCP server to help AI assistants to answer questions and generate AccelByte Extend SDK code more effectively .
MCP server for AI Diagram Maker — generate beautiful software engineering diagrams directly inside Cursor, Claude Desktop, Claude Code, or any MCP-compatible AI agent
ALAPI MCP Tools,Call hundreds of API interfaces via MCP
AI-powered SVG animation generator that transforms static files into animated SVG components using the Allyson platform
MCP server that gives AI assistants on-demand access to 1,500+ amCharts docs, ~300 code examples, and 1000+ class API references.
APIMatic MCP Server is used to validate OpenAPI specifications using APIMatic. The server processes OpenAPI files and returns validation summaries by leveraging APIMatic’s API.
One shared context layer for AI agents and humans — live API specs, DB schemas, and versioned contracts across repos so every agent and teammate works from the same source of truth.
Build and deploy full-stack Next.js apps with 98 tools for React, AWS, and MongoDB
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
