Skills code-to-image

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. Produces crisp, syntax-highlighted code with customizable themes, window chrome, and professional styling.

install

source · Clone the upstream repo

git clone https://github.com/html2png/skills

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/html2png/skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/code-to-image" ~/.claude/skills/html2png-skills-code-to-image && rm -rf "$T"

manifest: code-to-image/SKILL.md

source content

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.