Code Snippet Images

Documents

code-snippet-images

Code Snippet Images is an Agent Skill for documents published in the freekmurze/dotfiles repository on GitHub: a SKILL.md instruction file an AI agent can load to do this task.

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.

View on GitHub ↗

QUICK START

How to use this skill

Bring this guide into your coding agent with a prompt tailored to the tool you use.

Open your project in Codex.
Copy and paste the prompt below.
Review files and risks before approving any action.

Prompt to paste

Inspect the Agent Skill at https://github.com/freekmurze/dotfiles/blob/HEAD/config/claude/skills/code-snippet-images/SKILL.md and all supporting files. Report provenance, permissions, scripts, dependencies, and security risks. Propose an exact installation into .agents/skills/code-snippet-images, but wait for my approval before writing files or running scripts.

Copying this prompt does not install or run the skill. Review third-party files before use.

Code Snippet Images

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

Quick Start

Copy the template from assets/template.html to a temp file
Replace  with the title bar text (e.g., filename or description)
Replace  with syntax-highlighted HTML (see Syntax Highlighting below)
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:

Class	Color	Use for
`.keyword`	green #22863a	`use`, `function`, `class`, `return`, `new`, `fn`
`.string`	blue #032f62	`'quoted strings'`
`.method`	purple #6f42c1	method/function names
`.class-name`	purple #6f42c1	class and namespace names
`.facade`	purple #6f42c1	Facade names like `Pdf`
`.comment`	gray italic #6a737d	`// comments` and `# comments`
`.variable`	orange #e36209	`$variables`
`.named-arg`	orange #e36209	PHP named args `key:`
`.arrow`	dark #24292e	`->` and `=>`
`.punctuation`	dark #24292e	`()`, `{}`, `[]`, `;`, `::`
`.env-key`	green bold #22863a	`.env` keys
`.env-val`	blue #032f62	`.env` values
`.number`	blue #005cc5	numeric literals
`.type`	purple #6f42c1	type hints

Use <br> for line breaks. Use   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):

Copy assets/grid-2x2.html to a temp file
Fill in the 4  and  placeholders
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]

Param	Default	Notes
width	1200	Viewport width in px
height	675	Viewport height in px
scale	2	Device 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