code-to-image

📁 html2png/skills 📅 Jan 27, 2026

总安装量

周安装量

#53793

全站排名

安装命令

npx skills add https://github.com/html2png/skills --skill code-to-image

Agent 安装分布

opencode 3

antigravity 2

claude-code 2

github-copilot 2

codex 2

droid 2

Skill 文档

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.

GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台