Skip to content
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
Category
Images & video
Last commit
Oct 8, 2026

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

View on 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

Similar Skills

blender-motion-state-inspection

AFaffaan-m/ECC278k4,046 new stars in the last 7 days

Official

slack-gif-creator

ANanthropics/skills181k1,119 new stars in the last 7 days

Featured

algorithmic-art

Generate flow fields and particle systems with p5.js, using seeded randomness for original algorithmic art.

ANanthropics/skills181k1,119 new stars in the last 7 days

thinking-out-loud

SHShubhamsaboo/awesome-llm-apps141k808 new stars in the last 7 days

moneyprinterturbo-video

HAharry0703/MoneyPrinterTurbo130k1,722 new stars in the last 7 days

complain

PApaperclipai/paperclip101k2,948 new stars in the last 7 days