跳到正文
FunCoding

code-snippet-images

Generate beautiful code snippet images (PNG) for social media, tweets, LinkedIn, and documentation. Creates light-themed, macOS-style window chrome screenshots from code using HTML templates and Chrome headless. Use when asked to create code images, tweet images, snippet screenshots, code cards, or visual code examples for sharing. Supports single snippets, multi-image sets, and 2x2 grid composites.

Star
1,013
分类
图像与视频
最近提交
2026年10月8日

config/claude/skills/code-snippet-images/SKILL.md

在 GitHub 上查看

Code Snippet Images

Generate high-resolution code snippet PNGs using HTML templates rendered with Chrome headless at 2x scale.

Quick Start

  1. Copy the template from assets/template.html to a temp file
  2. Replace <!-- FILENAME --> with the title bar text (e.g., filename or description)
  3. Replace <!-- CODE CONTENT --> with syntax-highlighted HTML (see Syntax Highlighting below)
  4. Render with scripts/render.sh:
scripts/render.sh /tmp/snippet.html /tmp/snippet.png
# Produces 2400x1350 PNG (1200x675 at 2x scale)

Design Specs

  • Viewport: 1200×675px, rendered at 2x scale → 2400×1350px output
  • Style: Light theme, warm off-white (#f0ece8 background, #faf8f6 card)
  • Window chrome: macOS-style red/yellow/green dots, no badges or pills
  • Font: JetBrains Mono (loaded from Google Fonts), ligatures disabled
  • Code font size: 25px default (23px if code is longer, 20px if very dense). Use large fonts to fill the card.
  • No footer text below the code card
  • Color scheme: GitHub-light inspired syntax highlighting

Syntax Highlighting

Wrap code tokens in <span> with these classes:

ClassColorUse for
.keywordgreen #22863ause, function, class, return, new, fn
.stringblue #032f62'quoted strings'
.methodpurple #6f42c1method/function names
.class-namepurple #6f42c1class and namespace names
.facadepurple #6f42c1Facade names like Pdf
.commentgray italic #6a737d// comments and # comments
.variableorange #e36209$variables
.named-argorange #e36209PHP named args key:
.arrowdark #24292e-> and =>
.punctuationdark #24292e(), {}, [], ;, ::
.env-keygreen bold #22863a.env keys
.env-valblue #032f62.env values
.numberblue #005cc5numeric literals
.typepurple #6f42c1type hints

Use <br> for line breaks. Use &nbsp; for indentation (4× per level).

Example

<span class="keyword">use</span> <span class="class-name">App\Models\User</span><span class="punctuation">;</span><br><br>
<span class="variable">$users</span> <span class="punctuation">=</span> <span class="class-name">User</span><span class="punctuation">::</span><span class="method">where</span><span class="punctuation">(</span><span class="string">'active'</span><span class="punctuation">,</span> <span class="keyword">true</span><span class="punctuation">)-&gt;</span><span class="method">get</span><span class="punctuation">();</span>

Grid Composite (2×2)

For combining 4 snippets into one image (e.g., LinkedIn posts):

  1. Copy assets/grid-2x2.html to a temp file
  2. Fill in the 4 <!-- FILENAME N --> and <!-- CODE N --> placeholders
  3. Render at 2400×1350 native (no scaling needed since the grid is already 2400px wide):
scripts/render.sh /tmp/grid.html /tmp/grid.png 2400 1350 1

Grid uses slightly smaller fonts (17px) and padding to fit 4 cards.

Render Script

scripts/render.sh <input.html> <output.png> [width] [height] [scale]

ParamDefaultNotes
width1200Viewport width in px
height675Viewport height in px
scale2Device scale factor (2 = retina)

Tips

  • Adjust font size if code doesn't fit: change .code { font-size } in the HTML
  • Adjust card height: the card auto-sizes to content; body height may need increasing for long snippets
  • Arrow ligatures: template already disables ligatures (font-variant-ligatures: none) to prevent -> from rendering as →
  • Multiple images: create separate HTML files per snippet, render each independently
  • PHP code: prefer pdf() helper style over Pdf facade when showing Laravel examples (Spatie convention)
  • Keep code concise — these are for social media, not documentation

相似的 Skill

blender-motion-state-inspection

AFaffaan-m/ECC278k近 7 天新增 4,046 个 star

官方

slack-gif-creator

ANanthropics/skills181k近 7 天新增 1,119 个 star

精选

algorithmic-art

用 p5.js 生成流场和粒子系统，通过种子随机性创作原创算法艺术。

ANanthropics/skills181k近 7 天新增 1,119 个 star

thinking-out-loud

SHShubhamsaboo/awesome-llm-apps141k近 7 天新增 808 个 star

moneyprinterturbo-video

HAharry0703/MoneyPrinterTurbo130k近 7 天新增 1,722 个 star

complain

PApaperclipai/paperclip101k近 7 天新增 2,948 个 star