7个超实用功能让你的代码分享颜值爆表：Ray.so完全指南

你还在为代码截图杂乱无章而烦恼？还在用PS手动调整代码展示效果？本文将带你全面掌握Ray.so这款开源神器，从代码美化到AI提示工程，从图标设计到主题定制，一站式解决开发者的内容创作痛点。读完本文，你将能够：- 3分钟生成杂志级代码图片- 批量管理和应用自定义编辑器主题- 创建符合Raycast生态的扩展图标- 利用AI模型优化开发提示词- 掌握高级排版和导出技巧- 参与开源贡献并分享...

俞纬鉴Joshua

1123人浏览 · 2024-09-14 07:24:38

俞纬鉴Joshua · 2024-09-14 07:24:38 发布

7个超实用功能让你的代码分享颜值爆表：Ray.so完全指南

【免费下载链接】ray-so Create code snippets, browse AI prompts, create extension icons and more. 项目地址: https://gitcode.com/gh_mirrors/ra/ray-so

你还在为代码截图杂乱无章而烦恼？还在用PS手动调整代码展示效果？本文将带你全面掌握Ray.so这款开源神器，从代码美化到AI提示工程，从图标设计到主题定制，一站式解决开发者的内容创作痛点。读完本文，你将能够：

3分钟生成杂志级代码图片
批量管理和应用自定义编辑器主题
创建符合Raycast生态的扩展图标
利用AI模型优化开发提示词
掌握高级排版和导出技巧
参与开源贡献并分享个人作品
实现跨平台工作流无缝集成

项目概述：不止于代码美化的全能工具箱

Ray.so（GitHub加速计划镜像地址：https://gitcode.com/gh_mirrors/ra/ray-so）是由Raycast团队开发的开源项目，它不仅仅是一个代码截图工具，更是一套完整的开发者内容创作生态系统。通过Next.js构建的现代化Web应用，提供了七大核心功能模块：

mermaid

技术架构亮点：

基于React 19和Next.js 15构建的SSR应用
使用Tailwind CSS实现响应式设计
采用Radix UI组件库保证交互体验
集成Shiki和highlight.js实现语法高亮
支持PWA特性，可离线使用

环境搭建：5分钟启动本地开发环境

系统要求

Node.js ^22.0.0
npm ^10.0.0
Git

快速安装步骤

# 克隆仓库
git clone https://gitcode.com/gh_mirrors/ra/ray-so.git
cd ray-so

# 安装依赖
npm install

# 启动开发服务器
npm run dev

项目结构解析

ray-so/
├── app/                  # Next.js 15 App Router
│   ├── (navigation)/     # 核心功能模块
│   │   ├── (code)/       # 代码图片生成器
│   │   ├── icon/         # 图标生成器
│   │   ├── presets/      # AI预设浏览器
│   │   ├── prompts/      # 提示词资源库
│   │   ├── quicklinks/   # 快捷链接集合
│   │   ├── snippets/     # 代码片段库
│   │   └── themes/       # 主题浏览器
├── components/           # 共享UI组件
├── api/                  # API路由
├── utils/                # 工具函数
└── public/               # 静态资源

启动成功后，访问http://localhost:3000即可看到应用界面。开发模式下支持热重载，任何代码修改都会实时反映在浏览器中。

核心功能详解：从入门到精通

1. 代码图片生成器：让你的代码截图会说话

代码图片生成器是Ray.so最核心的功能，它能将普通代码转换为视觉吸引力强的图片。其工作流程如下：

mermaid

基础使用示例：

// 代码格式化功能实现核心代码
const formatCode = async (code: string, language: Language | null) => {
  if (!language || !formatterSupportedLanguages.includes(language.name)) {
    return code;
  }

  if (language.name === "Python") {
    const { default: initRuff, Workspace } = await import("@astral-sh/ruff-wasm-web");
    await initRuff();

    const workspace = new Workspace(Workspace.defaultSettings());
    const formatted = workspace.format(code);
    return formatted.replace(/\n$/, "");
  }
  
  // 其他语言使用Prettier格式化
  const prettier = await import("prettier/standalone");
  const parserModule = await parsers[language.name].import();
  
  return prettier.format(code, {
    parser: parsers[language.name].name,
    plugins: [parserModule],
    ...prettierConfig
  });
};

高级技巧：

使用快捷键Cmd+Shift+Enter快速格式化代码
按住Option键拖动可精确调整窗口大小
通过URL参数保存和分享配置，例如?theme=dark&padding=24
支持20+编程语言高亮，包括TypeScript、Python、Go等

支持的导出格式包括PNG图片、SVG矢量图以及直接复制到剪贴板。对于需要高清打印的场景，建议选择SVG格式以保证无损缩放。

2. 图标生成器：为你的项目打造专业图标

图标生成器允许开发者创建符合Raycast扩展风格的SVG图标，特别适合开发桌面应用和插件。其核心功能包括：

mermaid

图标处理核心代码：

// 随机颜色生成器
export const randomColor = () =>
  "#" +
  Math.floor(Math.random() * 16777215)
    .toString(16)
    .toUpperCase();

// SVG文件处理
export const getPastedSvgFile = async (items: DataTransferItemList) => {
  for (let index = 0; index < items.length; index++) {
    const item = items[index];
    if (item.kind === "file") {
      const file = item.getAsFile();
      if (file && file.name.endsWith(".svg")) {
        return file.text();
      }
    } else if (item.kind === "string") {
      item.getAsString((content) => {
        if (content.match(/svg/)) return content;
      });
    }
  }
};

使用步骤：

上传SVG文件或粘贴SVG代码
调整颜色、大小和边框样式
添加文字标签（可选）
导出为SVG或PNG格式

生成的图标完全符合Raycast扩展商店的设计规范，可直接用于扩展开发。

3. 主题系统：打造个性化开发环境

Ray.so的主题系统不仅影响自身界面，还可以导出主题文件用于Raycast客户端。主题数据结构如下：

export type Theme = {
  author: string;
  authorUsername: string;
  version: string;
  name: string;
  slug?: string;
  appearance: "light" | "dark";
  colors: {
    background: string;
    backgroundSecondary: string;
    text: string;
    selection: string;
    loader: string;
    red: string;
    orange: string;
    yellow: string;
    green: string;
    blue: string;
    purple: string;
    magenta: string;
  };
};

主题加载流程：

mermaid

安装自定义主题：

从Raycast主题工作室导出JSON
在项目中创建themes/[username]/[theme-name].json
导入主题文件：

# 示例：安装名为"ocean"的自定义主题
mkdir -p app/(navigation)/themes/themes/yourusername
cp ~/Downloads/ocean.json app/(navigation)/themes/themes/yourusername/

重启开发服务器，新主题将自动出现在主题浏览器中

Ray.so目前内置了50+社区贡献的主题，涵盖从简约到炫彩的各种风格，满足不同开发者的审美需求。

高级应用：定制与集成

自定义配置：打造专属工作流

Ray.so支持通过URL参数定制默认行为，常用参数包括：

参数名	类型	说明	示例值
theme	string	设置默认主题	"dark"或"light"
padding	number	设置代码框内边距	16, 24, 32
language	string	设置默认编程语言	"typescript", "python"
linenumbers	boolean	是否显示行号	true或false
background	boolean	是否显示背景	true或false

例如，访问https://ray.so?theme=dark&language=javascript&linenumbers=true将直接打开深色主题、JavaScript语言且显示行号的编辑界面。

与Raycast生态集成

作为Raycast团队开发的工具，Ray.so与Raycast客户端有着深度集成：

主题同步：在Raycast中创建的主题可直接导入Ray.so使用
快捷键共享：支持与Raycast相同的快捷键习惯
数据互通：预设、提示词和代码片段可双向导入导出

Raycast扩展集成示例：

// 主题数据转换函数
export function makeThemeObjectFromParams(params: any): Theme | undefined {
  if (canConvertParamsToTheme(params)) {
    const { appearance, name, author, authorUsername, version, colors: colorString } = params;

    const colorArray = colorString.split(",");
    const colorObject = {
      background: convertLegacyColorIfNeeded(colorArray[0]),
      // 其他颜色转换...
    };

    return {
      appearance,
      name,
      version,
      author,
      authorUsername,
      colors: colorObject,
    };
  }
}

通过这种深度集成，Ray.so成为了Raycast生态中不可或缺的内容创作工具。

贡献指南：参与开源项目

Ray.so欢迎社区贡献，主要贡献方向包括：

添加新预设/提示词/代码片段

编辑相应的文件：
- 预设：app/(navigation)/presets/presets.ts
- 提示词：app/(navigation)/prompts/prompts.ts
- 代码片段：app/(navigation)/snippets/snippets.ts
添加内容示例（以提示词为例）：

// 在prompts.ts中添加新条目
{
  id: "code-review",
  name: "代码审查助手",
  description: "帮助进行代码审查的提示词模板",
  prompt: `我需要你帮我审查以下代码。请关注：
1. 潜在的bug和性能问题
2. 代码风格和最佳实践
3. 安全性问题
4. 可维护性和可扩展性

代码：
\`\`\`${language}
${code}
\`\`\`

请给出具体的改进建议。`,
  author: {
    name: "你的名字",
    url: "https://yourwebsite.com" // 可选
  },
  category: "development"
}

创建Pull Request提交更改

贡献新主题

从Raycast主题工作室导出主题JSON
在app/(navigation)/themes/themes下创建用户名目录
添加主题文件并提交PR

注意：贡献新代码主题时，建议先创建issue讨论，某些主题可能需要特殊考虑。

部署与分享

生产环境部署

Ray.so基于Next.js构建，可以部署到任何支持Next.js的平台：

Vercel部署（推荐）：

连接GitHub仓库
配置环境变量（如有）
部署命令：npm run build

自托管部署：

# 构建生产版本
npm run build

# 启动生产服务器
npm start

分享你的作品

使用Ray.so创建的内容可以通过多种方式分享：

直接导出：下载图片或SVG文件分享到社交媒体
链接分享：复制编辑页面URL，他人可直接查看和编辑
嵌入网页：通过iframe将代码图片嵌入博客或文档

Markdown嵌入示例：

![我的代码示例](https://ray.so/image.png?theme=dark&language=typescript)

常见问题与解决方案

性能优化

如果在处理大量代码时遇到性能问题，可以尝试：

关闭实时格式化功能
减少代码行数（超过500行建议分块处理）
禁用不必要的视觉效果

浏览器兼容性

Ray.so在现代浏览器中表现最佳，对于旧浏览器（如IE11）可能存在兼容性问题。建议使用以下浏览器：

Chrome 88+
Firefox 85+
Safari 14+
Edge 88+

功能请求与bug报告

如果发现bug或有功能建议，可以通过以下方式反馈：

在GitHub仓库创建issue
发送邮件至feedback+rayso@raycast.com
在Raycast社区论坛讨论

总结与展望

Ray.so作为一款开源的开发者内容创作工具，通过简洁的界面和强大的功能，解决了开发者在代码分享和内容创作中的诸多痛点。本文详细介绍了其核心功能、安装配置、高级应用和贡献指南，希望能帮助你充分利用这款工具提升工作效率。

随着AI技术的发展，Ray.so未来可能会加入更多智能功能，如代码自动美化、智能提示生成、多语言自动转换等。作为开源项目，它的发展离不开社区的支持，期待更多开发者参与贡献，共同打造更强大的开发者工具生态。

如果你觉得本指南对你有帮助，请点赞、收藏并分享给其他开发者。关注项目仓库获取最新更新，下一篇我们将深入探讨Ray.so的主题开发指南，教你创建独具特色的编辑器主题。

最后，记住最好的工具是能融入你工作流的工具，Ray.so的真正价值在于它能让代码分享和展示变得简单而美好。现在就去尝试用Ray.so美化你的下一段代码吧！

【免费下载链接】ray-so Create code snippets, browse AI prompts, create extension icons and more. 项目地址: https://gitcode.com/gh_mirrors/ra/ray-so

CSDN-OPC开发者社区

这里是“一人公司”的成长家园。我们提供从产品曝光、技术变现到法律财税的全栈内容，并连接云服务、办公空间等稀缺资源，助你专注创造，无忧运营。

更多推荐

OpenClaw 完整安装教程（2026最新版，全平台通用）

CSDN-OPC开发者社区

openclaw新手入门指南：一文看懂环境搭建、模型配置与 WebUI 远程访问

CSDN-OPC开发者社区

国产GLM-5开源模型炸裂发布！编程能力超越Gemini逼近Claude！

CSDN-OPC开发者社区

所有评论(0)

查看更多评论

俞纬鉴Joshua

@gitblog_00914

已为社区贡献1条内容

7个超实用功能让你的代码分享颜值爆表：Ray.so完全指南

俞纬鉴Joshua

7个超实用功能让你的代码分享颜值爆表：Ray.so完全指南

项目概述：不止于代码美化的全能工具箱

环境搭建：5分钟启动本地开发环境

系统要求

快速安装步骤

项目结构解析

核心功能详解：从入门到精通

1. 代码图片生成器：让你的代码截图会说话

2. 图标生成器：为你的项目打造专业图标

3. 主题系统：打造个性化开发环境

高级应用：定制与集成

自定义配置：打造专属工作流

与Raycast生态集成

贡献指南：参与开源项目

添加新预设/提示词/代码片段

贡献新主题

部署与分享

生产环境部署

分享你的作品

常见问题与解决方案

性能优化

浏览器兼容性

功能请求与bug报告

总结与展望

所有评论(0)

温馨提示：您尚未绑定手机号

俞纬鉴Joshua