code-as-image

name	code-as-image
description	Use when the user wants to render a code snippet as a shareable image — for tweets, blog posts, READMEs, slide decks, or anywhere syntax-highlighted code looks better than a copy-paste.

Turn a code snippet into a syntax-highlighted image. The default renderer is ray.so — it builds the image from a URL fragment, so the flow is: build the URL, copy it to the clipboard, and optionally screenshot the rendered page to a PNG. carbon.now.sh works the same way and is a drop-in alternative if the user prefers it.

macOS-only: this skill uses pbpaste, pbcopy, and osascript. On Linux, swap in xclip/wl-copy or skip the clipboard steps.

Inputs

Parameter	Default	Notes
code	required	A fenced code block in the user's message, an @path/to/file they mention, the clipboard (if they say so), or inline text in their request
theme	candy	See themes below
padding	64	16, 32, 64, or 128
darkMode	true	true or false
background	true	true or false
language	auto-detect	See languages below

If the user provides just the code with no flags, use the defaults. If they want to pick a theme or language but don't know what's available, show a short list from the tables below and let them choose.

Workflow

1. Resolve the code source

• A fenced code block in the user's message → extract the body and language hint
• An @path/to/file they mention → read that file
• "Use the clipboard" or similar → pbpaste
• Inline code in the request → use it directly

2. Detect the language (if not specified)

Source	Rule
File path	Map by extension (.py → python, .ts → typescript, .kt → kotlin, etc.)
Fenced block with language hint	Use the hint
Shebang or shell-like start (gh , git , npm , pnpm , bun , ./gradlew , /plugin)	bash
Syntax cues	fun + { → kotlin, def → python
Otherwise	auto

3. Build the URL

build_ray_so_url() {
  local code="$1" theme="${2:-candy}" padding="${3:-64}" dark="${4:-true}" bg="${5:-true}" lang="${6:-auto}"
  local b64
  b64=$(printf %s "$code" | base64 | tr -d '\n')
  b64="${b64//+/%2B}"; b64="${b64//\//%2F}"; b64="${b64//=/%3D}"
  printf 'https://ray.so/#code=%s&theme=%s&padding=%s&darkMode=%s&background=%s&language=%s\n' \
    "$b64" "$theme" "$padding" "$dark" "$bg" "$lang"
}

The code fragment is base64 of the literal bytes (newlines included). +, /, and = are percent-encoded so the fragment survives messengers and chat clients that re-encode URLs.

4. Print + copy URL to the clipboard

URL=$(build_ray_so_url "$code" "$theme" "$padding" "$dark" "$bg" "$lang")
printf '%s\n' "$URL"
printf '%s' "$URL" | pbcopy

Always print the URL even when copying — useful for logs and for the user to inspect.

5. (Optional) Render the PNG

If the user asks for the image (e.g. "with image", "render the png", "as a screenshot"), use the playwright MCP tools (mcp__plugin_playwright_playwright__*):

1. browser_navigate to the URL
2. browser_snapshot once to confirm the code-frame selector for the current ray.so build (look for the rendered code container — historically [data-element="frame"] or the wrapper around the syntax-highlighted code)
3. browser_wait_for until that element is visible and fonts have settled (a short text-presence check on the rendered code is more reliable than a fixed timeout)
4. browser_take_screenshot scoped to that element, saving to ~/Downloads/code-image-<timestamp>.png
5. Verify the file is non-empty and at least ~10KB — anything smaller suggests a blank or timing-failed render
6. Report the saved absolute path

To copy the PNG to the clipboard on macOS:

osascript -e "set the clipboard to (read (POSIX file \"$path\") as «class PNGf»)"

If the selector has shifted since this skill was written, fall back to a full-page screenshot at a fixed viewport (e.g. 1280x800) and use the whole image.

Themes (common)

candy, breeze, crimson, falcon, meadow, midnight, raindrop, sunset, vercel, supabase, bitmap, noir, ice, sand, forest, tailwind

Languages (common)

auto, bash, shell, javascript, typescript, jsx, tsx, python, ruby, go, rust, kotlin, swift, java, c, cpp, csharp, php, html, css, scss, sql, json, yaml, toml, markdown, dockerfile, plaintext

Padding

16, 32, 64, 128

Examples

# Default theme/padding, language auto-detected from extension
build_ray_so_url "$(cat hello.py)" candy 64 true true python

# Shell snippet, dark vercel theme, no background
build_ray_so_url "$(pbpaste)" vercel 32 true false bash

Common Mistakes

Mistake	Fix
Forgetting to strip newlines from base64 output	macOS base64 doesn't wrap by default for stdin, but pipe through tr -d '\n' to be safe
Leaving + / = un-encoded in the fragment	Messengers and chat clients re-encode URLs and can mangle the fragment — always percent-encode
Using `echo "$code"	base64` (adds a trailing newline)
Hard-coding a selector for the screenshot	Confirm the selector with browser_snapshot on the live page each run; ray.so's DOM can shift between releases
Reporting success without checking the PNG	Verify file size > ~10KB before claiming the render worked