skills.rest
freekmurze
freekmurzeCOMMUNITY
Explore all skills by this author →
Website𝕏@freekmurzeGitHub

code-snippet-images

Generate syntax-highlighted code snippet PNG images using HTML templates and Chrome headless.

999|201|Updated May 6, 2014
Search Tags:#image generation#code snippets#screenshot#PNG#syntax highlighting#Chrome Headless#Social Media
One-click install
npx skills add https://github.com/freekmurze/dotfiles --skill code-snippet-images
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: code-snippet-images
Source: https://github.com/freekmurze/dotfiles/tree/main/config/claude/skills/code-snippet-images
Command: npx skills add https://github.com/freekmurze/dotfiles --skill code-snippet-images

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and assets (resource) components.

What problem does it solve?

Creating attractive code snippet images for social media, blog posts, and documentation usually requires manual screenshot cropping and styling. This Skill automates the process by rendering HTML templates with Chrome headless into high-resolution PNGs with consistent light-themed, macOS-style window chrome.

Core Features & Use Cases

  • Single Snippet Rendering: Fill an HTML template with syntax-highlighted code and render it to a 2400x1350 PNG at 2x retina scale.
  • 2x2 Grid Composites: Combine four code snippets into one image, ideal for LinkedIn or Twitter posts comparing multiple examples.
  • GitHub-Light Syntax Highlighting: Predefined CSS classes for keywords, strings, methods, variables, comments, and more, with JetBrains Mono typography.
  • Use Case: When writing a tweet about a new Laravel feature, paste the code into the template, run the render script, and get a polished snippet image ready to attach.

Quick Start

Ask the AI to create a code snippet image of a given piece of code, and it will populate the HTML template and render it to a PNG using the included render script.

Frequently Asked Questions about code-snippet-images

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a code snippet image for Twitter or LinkedIn?▼

Copy the HTML template, replace the filename and code placeholders with syntax-highlighted HTML spans, then run the render script with Chrome headless. It produces a 2400x1350 PNG at 2x scale suitable for social media uploads.

How to combine multiple code snippets into one image?▼

Use the grid-2x2.html template, which holds four code cards in a 2x2 layout. Fill in the four filename and code placeholders, then render at 2400x1350 with scale 1 since the grid is already full resolution.

What tools are required to render code snippet images?▼

The render script requires Google Chrome installed and available as the google-chrome command, since it uses Chrome headless screenshot mode. ImageMagick's identify command is optional and only used to report output dimensions.

Why do arrows like -> render as ligatures in code images?▼

JetBrains Mono has ligatures that turn -> into an arrow glyph. The templates disable this with font-variant-ligatures: none and font-feature-settings, so code renders exactly as typed.

Can I change the colors or fonts of the code snippet images?▼

Yes, all styling lives in the template's CSS. You can adjust the background colors, card style, font family, code font size, and the syntax highlighting class colors directly in the HTML file before rendering.

Related Skills

Explore More Content & Communication Skills→
bettercallfanbettercallfan

code2patent

Extract technical evidence from code repositories and generate patent drafts.

Community
Advanced
brainbrewlabsbrainbrewlabs
7

publishing

Format and distribute finalized content to publishing platforms with scheduling and verification.

Official
Intermediate
synthi-aisynthi-ai
1

visual-branding

Generate on-brand visual prompts and accessible alt-text for social content.

Official
Advanced
mkurmanmkurman
321

ray-so-code-snippet

Generate styled code snippet images via ray.so with configurable themes and backgrounds.

Community
Advanced