SuperAPI AI 工具集

ray-so-code-snippet

编程与开发

查看项目

更新于 10-15 20:21

技能介绍

用途

ray.so Code Snippet Image Generator 是一个用于生成精美代码片段图片的技能。它借助 ray.so 的渲染能力,把代码转换为带样式的高清图片并保存到本地,适合需要将代码以图片形式分享或展示的场景。

主要能力

  • 使用 ray.so 生成代码片段图片,并保存为本地 PNG 文件。
  • 支持从 ray.so 的 GitHub 仓库动态获取当前可用的主题和语言列表。
  • 支持配置主题、语言、深色/浅色模式、渐变背景、内边距、行号、标题等样式参数。
  • 使用 html-to-image 库以 4 倍像素比渲染,输出文字清晰的高分辨率图片,且画面自动适配代码内容,无多余空白。

使用方式

  1. 确认 agent-browser 可用(通过 which agent-browser 检查)。若不可用,则无法继续。
  2. 使用 curl 从 ray.so 的 GitHub 仓库获取可用主题与语言列表。
  3. 通过 AskUserQuestion 向用户询问全部样式参数,顺序为:主题、语言(可推断时跳过)、深色/浅色模式、背景、内边距、行号、标题。
  4. 将代码进行 Base64 编码,再 URL 编码,并把所有参数放入 ray.so 的 URL 哈希(# 之后)中构建链接。
  5. 使用 agent-browser 打开该 URL,等待页面渲染完成,加载 html-to-image 库,以 pixelRatio:4 截取图片,再将 data URL 转换为 PNG 文件保存。
  6. 向用户报告保存的文件位置后即停止。

适用场景

  • 用户要求创建代码图片、代码截图或代码片段图片。
  • 需要将代码以带样式的图片形式用于分享、演示或文档。

限制

  • 必须依赖 agent-browser 进行截图,若其不可用则无法执行。
  • 用户必须提供代码片段,可直接给出或指向上下文中的文件/选区。
  • 生成前必须询问全部样式参数,并展示所有可用选项。
  • 所有参数必须放在 URL 哈希中,而非查询字符串。
  • 除非用户明确指定,否则不询问输出路径/文件名,默认保存到当前工作目录。
  • 对于非常长的代码片段,ray.so 可能会截断,建议拆分为多张图片。
  • 若 curl 获取主题/语言失败,可使用资料中列出的常见默认值。