Smithery is now a part of Arcade.dev! Read more in our announcement here

code-to-image

neversight/code-to-image

Design

About

SKILL.md

code-to-image

neversight/code-to-image

Design

About

Generate beautiful code snippet images with syntax highlighting. Use when users want to share code as an image, create code screenshots for social media, documentation, or presentations...

SKILL.md

Code to Image API

Generate beautiful code snippet images with syntax highlighting via html2png.dev.

How It Works

Write HTML with syntax-highlighted code (use Shiki or similar)
Style with Tailwind CSS or custom CSS
Send to /api/convert endpoint
Get a shareable image URL

Endpoint

POST https://html2png.dev/api/convert

Example

curl -X POST "https://html2png.dev/api/convert?width=800&deviceScaleFactor=2" \
  -H "Content-Type: text/html" \
  -d '<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
  <style>
    .shiki { background: transparent !important; }
    .line::before {
      content: attr(data-line);
      width: 2rem;
      margin-right: 1rem;
      display: inline-block;
      text-align: right;
      color: rgba(128,128,128,0.4);
    }
  </style>
</head>
<body class="p-12" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
  <div class="bg-white rounded-xl shadow-2xl overflow-hidden">
    <div class="flex items-center gap-2 px-4 py-3 border-b border-gray-200">
      <div class="w-3 h-3 rounded-full bg-red-400"></div>
      <div class="w-3 h-3 rounded-full bg-yellow-400"></div>
      <div class="w-3 h-3 rounded-full bg-green-400"></div>
      <span class="ml-2 text-xs text-gray-500 font-mono">hello.js</span>
    </div>
    <pre class="p-6 font-mono text-sm leading-relaxed"><code class="language-javascript"><span style="color:#D73A49">function</span> <span style="color:#6F42C1">greet</span>(<span style="color:#24292E">name</span>) {
  <span style="color:#D73A49">return</span> <span style="color:#032F62">`Hello, ${name}!`</span>;
}

<span style="color:#6F42C1">console</span>.<span style="color:#6F42C1">log</span>(<span style="color:#6F42C1">greet</span>(<span style="color:#032F62">"World"</span>));</code></pre>
  </div>
</body>
</html>'

Key Elements

Syntax Highlighting:

Use Shiki (shiki.style) or highlight.js for token coloring
Inline styles work best for standalone images

Window Chrome:

Traffic light dots (red, yellow, green)
Filename in title bar
Rounded corners, shadows

Typography:

JetBrains Mono or Fira Code for code
Inter or system fonts for UI elements
Line numbers optional

Backgrounds:

Gradient backgrounds for the container
White or dark code window
Glassmorphism effects

Shiki Integration

For server-side syntax highlighting:

import { createHighlighter } from "shiki";

const highlighter = await createHighlighter({
  themes: ["github-light"],
  langs: ["javascript", "python", "rust"],
});

const html = highlighter.codeToHtml(code, {
  lang: "javascript",
  theme: "github-light",
});

Tips

Use deviceScaleFactor=2 for crisp text
Add delay=500 if using web fonts
Container width should match width param
Use omitBackground=true for transparent PNGs

Rate Limits

50 requests/hour per IP.

About

SKILL.md

About

Generate beautiful code snippet images with syntax highlighting. Use when users want to share code as an image, create code screenshots for social media, documentation, or presentations...

SKILL.md

Code to Image API

Generate beautiful code snippet images with syntax highlighting via html2png.dev.

How It Works

Write HTML with syntax-highlighted code (use Shiki or similar)
Style with Tailwind CSS or custom CSS
Send to /api/convert endpoint
Get a shareable image URL

Endpoint

POST https://html2png.dev/api/convert

Example

curl -X POST "https://html2png.dev/api/convert?width=800&deviceScaleFactor=2" \
  -H "Content-Type: text/html" \
  -d '<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
  <style>
    .shiki { background: transparent !important; }
    .line::before {
      content: attr(data-line);
      width: 2rem;
      margin-right: 1rem;
      display: inline-block;
      text-align: right;
      color: rgba(128,128,128,0.4);
    }
  </style>
</head>
<body class="p-12" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
  <div class="bg-white rounded-xl shadow-2xl overflow-hidden">
    <div class="flex items-center gap-2 px-4 py-3 border-b border-gray-200">
      <div class="w-3 h-3 rounded-full bg-red-400"></div>
      <div class="w-3 h-3 rounded-full bg-yellow-400"></div>
      <div class="w-3 h-3 rounded-full bg-green-400"></div>
      <span class="ml-2 text-xs text-gray-500 font-mono">hello.js</span>
    </div>
    <pre class="p-6 font-mono text-sm leading-relaxed"><code class="language-javascript"><span style="color:#D73A49">function</span> <span style="color:#6F42C1">greet</span>(<span style="color:#24292E">name</span>) {
  <span style="color:#D73A49">return</span> <span style="color:#032F62">`Hello, ${name}!`</span>;
}

<span style="color:#6F42C1">console</span>.<span style="color:#6F42C1">log</span>(<span style="color:#6F42C1">greet</span>(<span style="color:#032F62">"World"</span>));</code></pre>
  </div>
</body>
</html>'

Key Elements

Syntax Highlighting:

Use Shiki (shiki.style) or highlight.js for token coloring
Inline styles work best for standalone images

Window Chrome:

Traffic light dots (red, yellow, green)
Filename in title bar
Rounded corners, shadows

Typography:

JetBrains Mono or Fira Code for code
Inter or system fonts for UI elements
Line numbers optional

Backgrounds:

Gradient backgrounds for the container
White or dark code window
Glassmorphism effects

Shiki Integration

For server-side syntax highlighting:

import { createHighlighter } from "shiki";

const highlighter = await createHighlighter({
  themes: ["github-light"],
  langs: ["javascript", "python", "rust"],
});

const html = highlighter.codeToHtml(code, {
  lang: "javascript",
  theme: "github-light",
});

Tips

Use deviceScaleFactor=2 for crisp text
Add delay=500 if using web fonts
Container width should match width param
Use omitBackground=true for transparent PNGs

Rate Limits

50 requests/hour per IP.