freekmurze 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.htmlto a temp file - Replace
<!-- FILENAME -->with the title bar text (e.g., filename or description) - Replace
<!-- CODE CONTENT -->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">)-></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.htmlto a temp file - Fill in the 4
<!-- FILENAME N -->and<!-- CODE N -->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 overPdffacade when showing Laravel examples (Spatie convention) - Keep code concise — these are for social media, not documentation