generate_code_screenshot
Create syntax-highlighted code screenshots with customizable themes for documentation, sharing, or presentations.
Instructions
Generate a beautiful screenshot of code with syntax highlighting and themes
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| code | Yes | The code to screenshot | |
| language | Yes | Programming language (e.g., javascript, python, rust) | |
| theme | No | Color theme (dracula, nord, monokai, github-light, github-dark) |
Implementation Reference
- src/index.ts:34-56 (registration)Registration of the 'generate_code_screenshot' tool in the ListTools response, including name, description, and input schema definition.
{ name: "generate_code_screenshot", description: "Generate a beautiful screenshot of code with syntax highlighting and themes", inputSchema: { type: "object", properties: { code: { type: "string", description: "The code to screenshot", }, language: { type: "string", description: "Programming language (e.g., javascript, python, rust)", }, theme: { type: "string", description: "Color theme (dracula, nord, monokai, github-light, github-dark)", enum: ["dracula", "nord", "monokai", "github-light", "github-dark"], }, }, required: ["code", "language"], }, }, - src/index.ts:137-184 (handler)MCP CallToolRequest handler for 'generate_code_screenshot': validates arguments, invokes generateScreenshot, constructs response with success/error text and base64 image.
if (name === "generate_code_screenshot") { if (!args) { throw new Error("Arguments are required"); } try { const { code, language, theme = "dracula" } = args as { code: string; language: string; theme?: string; }; if (!code || !language) { throw new Error("Both 'code' and 'language' are required"); } // Generate the screenshot const result = await generateScreenshot({ code, language, theme, }); return { content: [ { type: "text", text: `✅ Screenshot generated successfully!\n\nFile saved to: ${result.path}\n\nTheme: ${theme}\nLanguage: ${language}\n\nYou can view the image in your file browser.`, }, { type: "image", data: result.base64, mimeType: "image/png", }, ], }; } catch (error) { return { content: [ { type: "text", text: `❌ Error generating screenshot: ${error instanceof Error ? error.message : String(error)}`, }, ], isError: true, }; } } - src/generator.ts:68-113 (handler)Core tool implementation: renders syntax-highlighted code HTML in headless browser using Playwright, screenshots the code container, saves PNG to temp file, returns file path and base64 data.
export async function generateScreenshot( options: ScreenshotOptions ): Promise<GenerateScreenshotResult> { const html = generateHTML(options); const browser = await getBrowser(); const page = await browser.newPage(); try { // Set viewport for better rendering await page.setViewportSize({ width: 1920, height: 1080, }); // Load the HTML content await page.setContent(html, { waitUntil: "networkidle", }); // Wait for syntax highlighting to apply await page.waitForTimeout(500); // Find the container element const container = await page.locator(".container"); // Take screenshot of just the container const screenshot = await container.screenshot({ type: "png", }); // Save to temp file const tempDir = await fs.mkdtemp(path.join(os.tmpdir(), "code-screenshot-")); const tempFile = path.join(tempDir, "screenshot.png"); await fs.writeFile(tempFile, screenshot); // Convert to base64 const base64 = screenshot.toString("base64"); return { path: tempFile, base64: base64, }; } finally { await page.close(); } }