ray.so 代码片段图片生成器 - 一键生成精美代码截图，提升技术分享效率

ray-so-code-snippet by intellectronica/agent-skills

162 周安装量

228 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/intellectronica/agent-skills --skill ray-so-code-snippet

内容创作开发自动化

🇨🇳中文介绍

ray.so 代码片段图片生成器

使用 ray.so 生成精美的代码片段图片并保存到本地。

要求

用户必须提供代码片段，可以直接提供或通过指向上下文中的文件/选择
在生成之前，必须向用户询问所有样式参数，呈现所有可用选项
必须使用 agent-browser 进行截图捕获（首先检查可用性）

工作流程

步骤 1：验证 agent-browser 可用性

在继续之前，验证 agent-browser 是否可用：

which agent-browser

如果在 PATH 中未找到 agent-browser，请告知用户此技能需要 agent-browser，没有它无法继续。

步骤 2：获取可用选项

使用 curl 从 ray.so 的 GitHub 仓库获取当前主题和语言：

# 获取并解析可用主题
curl -s "https://raw.githubusercontent.com/raycast/ray-so/main/app/(navigation)/(code)/store/themes.ts" | grep -oE 'id:\s*"[^"]+"' | sed 's/id:\s*"//;s/"//' | sort -u

# 获取并解析可用语言
curl -s "https://raw.githubusercontent.com/raycast/ray-so/main/app/(navigation)/(code)/util/languages.ts" | grep -oE '^[[:space:]]*"?[a-zA-Z0-9+#-]+"?\s*:\s*\{' | sed 's/[[:space:]]*"//g;s/".*//;s/:.*//' | sort -u

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

FlyClaw：零登录航班聚合查询工具，Python实现多源航班信息与价格搜索

4,000,000 周安装

find-skills 技能搜索工具 - Vercel Labs 开源智能体技能包管理器

843,800 周安装

Vercel React 最佳实践指南 | 58条Next.js性能优化规则与代码重构

278,000 周安装

Vercel Web界面规范检查工具 - 自动检测代码是否符合Web设计指南

224,400 周安装

用户明确指定了语言
代码来自具有明确扩展名的文件（例如，.py → python，.js → javascript，.ts → typescript，.rs → rust，.go → go 等）
语法明确可识别（例如，def/import → python，func/package → go，fn/let mut → rust）

# 1. 对代码进行 Base64 编码
CODE_BASE64=$(echo -n 'YOUR_CODE_HERE' | base64)

# 2. 对 base64 字符串进行 URL 编码
CODE_ENCODED=$(python3 -c "import urllib.parse; print(urllib.parse.quote('$CODE_BASE64'))")

# 3. 构建 URL，所有参数都在哈希中
# 格式：https://ray.so/#param1=value1&param2=value2&code=ENCODED_CODE
# 不要包含 width 参数 - 让 ray.so 自动调整大小以适应内容
URL="https://ray.so/#theme=THEME&padding=PADDING&background=BACKGROUND&darkMode=DARKMODE&language=LANGUAGE&code=${CODE_ENCODED}"

# 如果需要，添加可选参数：
# 如果启用行号：在 &code= 之前添加 "&lineNumbers=true"
# 如果有标题：在 &code= 之前添加 "&title=URL_ENCODED_TITLE"

参数	值	默认值
theme	列表中的任何主题	breeze
padding	16, 32, 64, 128	64
background	true, false	true
darkMode	true, false	true
language	列表中的任何语言，或 "auto"	auto
lineNumbers	true, false	false
title	URL 编码的字符串	（无）
width	数字（像素）	auto
code	Base64 编码，然后 URL 编码	（必需）

# 代码：for i in range(23):\n    print(i)
# 主题：midnight，内边距：64，深色模式：true，背景：true，语言：python，标题：test.py

CODE='for i in range(23):
    print(i)'
CODE_BASE64=$(echo -n "$CODE" | base64)
CODE_ENCODED=$(python3 -c "import urllib.parse; print(urllib.parse.quote('$CODE_BASE64'))")
TITLE_ENCODED=$(python3 -c "import urllib.parse; print(urllib.parse.quote('test.py'))")
URL="https://ray.so/#theme=midnight&padding=64&background=true&darkMode=true&language=python&title=${TITLE_ENCODED}&code=${CODE_ENCODED}"
echo "$URL"

# 生成唯一会话名称
SESSION="rayso-$(date +%s)"

# 1. 设置视口
agent-browser --session $SESSION set viewport 1400 900

# 2. 打开 URL
agent-browser --session $SESSION open "$URL"

# 3. 等待页面完全渲染
agent-browser --session $SESSION wait --load networkidle
agent-browser --session $SESSION wait 3000

# 4. 加载 html-to-image 库（与 ray.so 内部使用的库相同）
agent-browser --session $SESSION eval 'new Promise((r,e)=>{const s=document.createElement("script");s.src="https://cdn.jsdelivr.net/npm/html-to-image@1.11.11/dist/html-to-image.js";s.onload=r;s.onerror=e;document.head.appendChild(s)})'

# 5. 使用 html-to-image 以 4 倍分辨率捕获（产生清晰的文本）
agent-browser --session $SESSION eval 'htmlToImage.toPng(document.querySelector("#frame > div"),{pixelRatio:4,skipAutoScale:true})' > /tmp/rayso-dataurl-$SESSION.txt

# 6. 关闭浏览器
agent-browser --session $SESSION close

# 7. 将数据 URL 转换为 PNG 文件
DATAURL=$(cat /tmp/rayso-dataurl-$SESSION.txt | tr -d '"' | tr -d '\n')
echo "$DATAURL" | sed 's/data:image\/png;base64,//' | base64 -d > /path/to/output.png

# 8. 清理临时文件
rm /tmp/rayso-dataurl-$SESSION.txt

SESSION="rayso-$(date +%s)"

agent-browser --session $SESSION set viewport 1400 900
agent-browser --session $SESSION open "$URL"
agent-browser --session $SESSION wait --load networkidle
agent-browser --session $SESSION wait 3000

# 加载 html-to-image 库
agent-browser --session $SESSION eval 'new Promise((r,e)=>{const s=document.createElement("script");s.src="https://cdn.jsdelivr.net/npm/html-to-image@1.11.11/dist/html-to-image.js";s.onload=r;s.onerror=e;document.head.appendChild(s)})'

# 以 4 倍分辨率捕获
agent-browser --session $SESSION eval 'htmlToImage.toPng(document.querySelector("#frame > div"),{pixelRatio:4,skipAutoScale:true})' > /tmp/rayso-dataurl-$SESSION.txt
agent-browser --session $SESSION close

# 保存为 PNG
DATAURL=$(cat /tmp/rayso-dataurl-$SESSION.txt | tr -d '"' | tr -d '\n')
echo "$DATAURL" | sed 's/data:image\/png;base64,//' | base64 -d > ./fibonacci.png
rm /tmp/rayso-dataurl-$SESSION.txt

如果 agent-browser 不可用： 通知用户并不要继续
如果 curl 无法获取主题/语言，请使用这些常见默认值：
- 主题：breeze, midnight, candy, crimson, falcon, meadow, raindrop, sunset, vercel, supabase, tailwind
- 语言：auto, javascript, typescript, python, rust, go, java, ruby, swift, kotlin, css, html, json, yaml, bash
如果参数未应用： 确保所有参数都在 URL 哈希中（在 # 之后），而不是在查询字符串中
如果标题未显示： 标题参数必须在哈希中：#title=filename.py&code=...
如果 html-to-image 加载失败： 检查网络连接；该库从 jsdelivr CDN 加载
如果捕获返回空： 框架选择器 #frame > div 可能已更改；检查页面结构
对于非常长的代码片段，ray.so 可能会截断；考虑拆分为多个图像
如果页面未正确加载，请增加等待时间（尝试 4000 毫秒或更多）
如果出现空白页面： 使用带有 --session 标志的新的唯一会话名称
如果数据 URL 格式错误： 在 base64 解码之前确保引号和新行被去除

🇺🇸English

ray.so Code Snippet Image Generator

Generate beautiful code snippet images using ray.so and save them locally.

Requirements

The user MUST provide the code snippet, either directly or by pointing to a file/selection in context
MUST ask the user for ALL styling parameters before generating, presenting ALL available options
MUST use agent-browser for screenshot capture (check availability first)

Workflow

Step 1: Verify agent-browser Availability

Before proceeding, verify that agent-browser is available:

which agent-browser

If agent-browser is not found in the PATH, inform the user that this skill requires agent-browser and cannot proceed without it.

Step 2: Fetch Available Options

Fetch the current themes and languages from ray.so's GitHub repository using curl:

# Fetch and parse available themes
curl -s "https://raw.githubusercontent.com/raycast/ray-so/main/app/(navigation)/(code)/store/themes.ts" | grep -oE 'id:\s*"[^"]+"' | sed 's/id:\s*"//;s/"//' | sort -u

# Fetch and parse available languages
curl -s "https://raw.githubusercontent.com/raycast/ray-so/main/app/(navigation)/(code)/util/languages.ts" | grep -oE '^[[:space:]]*"?[a-zA-Z0-9+#-]+"?\s*:\s*\{' | sed 's/[[:space:]]*"//g;s/".*//;s/:.*//' | sort -u

Step 3: Ask User for ALL Parameters

MUST use AskUserQuestion to ask for EVERY parameter, presenting ALL available options. Ask for parameters in this order:

3.1 Theme Selection

Present ALL available themes. In the question, list every theme fetched from step 2. Example:

Question: "Which theme would you like?"
Description: "Available themes: [list ALL themes from curl output]"
Options (pick 4 popular ones for quick select):
- breeze (default, purple gradient)
- midnight (cyan-blue)
- vercel (minimalist dark)
- sunset (warm orange)
Note: User can select "Other" to type any theme from the full list

3.2 Language Selection

Infer the language when possible. Skip this question if:

The user explicitly specified a language
The code comes from a file with a clear extension (e.g., .py → python, .js → javascript, .ts → typescript, .rs → rust, .go → go, etc.)
The syntax is unmistakably identifiable (e.g., def/import → python, func/package → go, fn/let mut → rust)

Only ask this question if the language cannot be confidently inferred:

Question: "Which language for syntax highlighting?"
Description: "Available languages: [list ALL languages from curl output]"
Options:
- auto (auto-detect)
- javascript
- python
- typescript
Note: User can select "Other" to type any language from the full list

3.3 Dark/Light Mode

Question: "Dark or light mode?"
Options:
- Dark mode (default)
- Light mode

3.4 Background

Question: "Show the gradient background?"
Options:
- Yes, show background (default)
- No, transparent/minimal background

3.5 Padding

Question: "How much padding around the code?"
Options:
- 16 (compact)
- 32 (small)
- 64 (medium, default)
- 128 (large)

3.6 Line Numbers

Question: "Show line numbers?"
Options:
- No (default)
- Yes

3.7 Title

Question: "Add a title above the code? (e.g., filename)"
Options:
- No title (default)
- Yes, add title
If yes, ask for the title text.

Note: Do NOT ask about output path/filename. Save to the current working directory with a sensible filename (e.g., rayso-snippet.png, or based on the title if provided like fibonacci.png). Only use a different path if the user explicitly specifies one in their original request.

Step 4: Build the ray.so URL

CRITICAL: ALL parameters must be in the URL hash (after #), NOT in the query string.

Build the URL using shell commands:

# 1. Base64 encode the code
CODE_BASE64=$(echo -n 'YOUR_CODE_HERE' | base64)

# 2. URL encode the base64 string
CODE_ENCODED=$(python3 -c "import urllib.parse; print(urllib.parse.quote('$CODE_BASE64'))")

# 3. Build the URL with ALL parameters in the hash
# Format: https://ray.so/#param1=value1&param2=value2&code=ENCODED_CODE
# Do NOT include width parameter - let ray.so auto-size to fit content
URL="https://ray.so/#theme=THEME&padding=PADDING&background=BACKGROUND&darkMode=DARKMODE&language=LANGUAGE&code=${CODE_ENCODED}"

# Add optional parameters if needed:
# If lineNumbers: add "&lineNumbers=true" before &code=
# If title: add "&title=URL_ENCODED_TITLE" before &code=

URL Hash Parameters:

Parameter	Values	Default
theme	Any theme from list	breeze
padding	16, 32, 64, 128	64
background	true, false	true
darkMode	true, false	true
language	Any language from list, or "auto"	auto
lineNumbers	true, false	false
title	URL-encoded string	(none)
width	Number (pixels)	auto
code	Base64-encoded, then URL-encoded	(required)

Note on width: Do NOT include the width parameter unless you specifically need a fixed width. Without it, ray.so auto-sizes the frame to fit the code content, avoiding unnecessary empty space.

Example URL construction:

# For code: for i in range(23):\n    print(i)
# Theme: midnight, Padding: 64, Dark mode: true, Background: true, Language: python, Title: test.py

CODE='for i in range(23):
    print(i)'
CODE_BASE64=$(echo -n "$CODE" | base64)
CODE_ENCODED=$(python3 -c "import urllib.parse; print(urllib.parse.quote('$CODE_BASE64'))")
TITLE_ENCODED=$(python3 -c "import urllib.parse; print(urllib.parse.quote('test.py'))")
URL="https://ray.so/#theme=midnight&padding=64&background=true&darkMode=true&language=python&title=${TITLE_ENCODED}&code=${CODE_ENCODED}"
echo "$URL"

Step 5: Capture High-Quality Image with agent-browser

MUST use agent-browser (verified in Step 1). This approach uses the html-to-image library (same as ray.so's internal export) with high pixelRatio for crisp, sharp text rendering.

IMPORTANT: Always use a unique session name with --session to avoid stale session issues.

# Generate unique session name
SESSION="rayso-$(date +%s)"

# 1. Set viewport
agent-browser --session $SESSION set viewport 1400 900

# 2. Open the URL
agent-browser --session $SESSION open "$URL"

# 3. Wait for the page to fully render
agent-browser --session $SESSION wait --load networkidle
agent-browser --session $SESSION wait 3000

# 4. Load html-to-image library (same library ray.so uses internally)
agent-browser --session $SESSION eval 'new Promise((r,e)=>{const s=document.createElement("script");s.src="https://cdn.jsdelivr.net/npm/html-to-image@1.11.11/dist/html-to-image.js";s.onload=r;s.onerror=e;document.head.appendChild(s)})'

# 5. Capture at 4x resolution using html-to-image (produces crisp text)
agent-browser --session $SESSION eval 'htmlToImage.toPng(document.querySelector("#frame > div"),{pixelRatio:4,skipAutoScale:true})' > /tmp/rayso-dataurl-$SESSION.txt

# 6. Close the browser
agent-browser --session $SESSION close

# 7. Convert data URL to PNG file
DATAURL=$(cat /tmp/rayso-dataurl-$SESSION.txt | tr -d '"' | tr -d '\n')
echo "$DATAURL" | sed 's/data:image\/png;base64,//' | base64 -d > /path/to/output.png

# 8. Clean up temp file
rm /tmp/rayso-dataurl-$SESSION.txt

Critical notes:

Uses html-to-image library which is what ray.so uses for its own export feature
pixelRatio: 4 produces high-DPI images with crisp, sharp text (4x native resolution)
The data URL is captured directly from the library, not from a screenshot
No ImageMagick required - pure browser-based rendering at high resolution
Output is correctly sized with no extra whitespace

Step 6: Confirm Output and STOP

Report the saved file location to the user. The task is complete - do not perform any additional checks, explorations, or verifications after the screenshot is saved.

Complete Example

User: "Create a code snippet image of this Python function"

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

Check which agent-browser - confirmed available
Fetch themes and languages:

curl -s "https://raw.githubusercontent.com/raycast/ray-so/main/app/(navigation)/(code)/store/themes.ts" | grep -oE 'id:\s*"[^"]+"' | sed 's/id:\s*"//;s/"//' | sort -u

Ask user for parameters via AskUserQuestion:
- Theme: user selects "midnight"
- Language: inferred as python fromdef syntax - not asked
- Dark mode: user selects "Dark mode"
- Background: user selects "Yes"
- Padding: user selects "64"
- Line numbers: user selects "No"
- Title: user selects "No title"
Build URL (all params in hash, no width for auto-sizing):

CODE='def fibonacci(n):

    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)'
CODE_BASE64=$(echo -n "$CODE" | base64)
CODE_ENCODED=$(python3 -c "import urllib.parse; print(urllib.parse.quote('$CODE_BASE64'))")
URL="https://ray.so/#theme=midnight&padding=64&background=true&darkMode=true&language=python&code=${CODE_ENCODED}"

5. Capture high-quality image:

SESSION="rayso-$(date +%s)"

agent-browser --session $SESSION set viewport 1400 900
agent-browser --session $SESSION open "$URL"
agent-browser --session $SESSION wait --load networkidle
agent-browser --session $SESSION wait 3000

# Load html-to-image library
agent-browser --session $SESSION eval 'new Promise((r,e)=>{const s=document.createElement("script");s.src="https://cdn.jsdelivr.net/npm/html-to-image@1.11.11/dist/html-to-image.js";s.onload=r;s.onerror=e;document.head.appendChild(s)})'

# Capture at 4x resolution
agent-browser --session $SESSION eval 'htmlToImage.toPng(document.querySelector("#frame > div"),{pixelRatio:4,skipAutoScale:true})' > /tmp/rayso-dataurl-$SESSION.txt
agent-browser --session $SESSION close

# Save as PNG
DATAURL=$(cat /tmp/rayso-dataurl-$SESSION.txt | tr -d '"' | tr -d '\n')
echo "$DATAURL" | sed 's/data:image\/png;base64,//' | base64 -d > ./fibonacci.png
rm /tmp/rayso-dataurl-$SESSION.txt

6. Report: "Saved code snippet image to ./fibonacci.png"

Image Resolution and Quality

This skill uses the html-to-image library with pixelRatio: 4 to produce high-quality images with crisp, sharp text. This is the same rendering approach that ray.so uses for its built-in export feature.

Output quality:

Default: 4x native resolution (frame auto-sizes to content, then rendered at 4x)
Text is rendered at high DPI, not upscaled from low resolution
Gradient backgrounds and all CSS styling are preserved
No unnecessary empty space (frame auto-sizes to fit code)

Adjusting resolution:

For smaller files: Change pixelRatio:4 to pixelRatio:2 in the eval command
For maximum quality: Use pixelRatio:6 (same as ray.so's "6x" export option)

Forcing a specific width:

Only add &width=NUMBER to the URL if you need a fixed width (e.g., for consistent sizing across multiple images)

Troubleshooting

If agent-browser is not available: Inform the user and do not proceed
If curl fails to fetch themes/languages, use these common defaults:
- Themes: breeze, midnight, candy, crimson, falcon, meadow, raindrop, sunset, vercel, supabase, tailwind
- Languages: auto, javascript, typescript, python, rust, go, java, ruby, swift, kotlin, css, html, json, yaml, bash
If parameters aren't applied: Ensure ALL parameters are in the URL hash (after #), not the query string
If title isn't showing: The title parameter must be in the hash: #title=filename.py&code=...
If html-to-image fails to load: Check network connectivity; the library loads from jsdelivr CDN
If capture returns empty: The frame selector #frame > div may have changed; inspect the page structure
For very long code snippets, ray.so may truncate; consider splitting into multiple images
If the page doesn't load properly, increase the wait time (try 4000ms or more)
If you get a blank page: Use a fresh unique session name with --session flag
If data URL is malformed: Ensure quotes and newlines are stripped before base64 decoding

Weekly Installs

162

Repository

intellectronica…t-skills

GitHub Stars

228

First Seen

Jan 21, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykFail

Installed on

claude-code139

opencode135

codex129

gemini-cli129

cursor121

github-copilot110

ray.so 代码片段图片生成器 - 一键生成精美代码截图，提升技术分享效率

🇨🇳中文介绍

ray.so 代码片段图片生成器

要求

工作流程

步骤 1：验证 agent-browser 可用性

步骤 2：获取可用选项

相关 Skills

步骤 3：向用户询问所有参数

3.1 主题选择

3.2 语言选择

3.3 深色/浅色模式

3.4 背景

3.5 内边距

3.6 行号

3.7 标题

步骤 4：构建 ray.so URL

步骤 5：使用 agent-browser 捕获高质量图像

步骤 6：确认输出并停止

完整示例

图像分辨率和质量

故障排除