SnapCode - 代码截图美化工具

本项目由 阿里云ESA 提供加速、计算和保护

将代码片段转换为精美图片，方便开发者在社交媒体、博客、文档中分享代码。

#阿里云ESA Pages #阿里云云工开物话题

核心功能

| 功能 | 描述 | |------|------| | 代码美化 | 5 种精选主题（Catppuccin、GitHub Dark、Nord、Dracula、One Dark） | | 窗口样式 | macOS、Windows、无边框三种风格 | | 自定义背景 | 渐变色、纯色、透明背景 | | 语言检测 | 自动识别 15+ 编程语言 | | 一键导出 | PNG、SVG 格式，支持复制到剪贴板 | | 行号显示 | 可选显示/隐藏行号 |

---

技术架构

┌─────────────────────────────────────────────────────────────┐
│                         用户浏览器                           │
│  ┌───────────────────────────────────────────────────────┐ │
│  │          React 18 + Prism.js + html-to-image          │ │
│  │  - 代码高亮渲染                                        │ │
│  │  - 图片导出                                            │ │
│  │  - 实时预览                                            │ │
│  └───────────────────┬───────────────────────────────────┘ │
└──────────────────────┼──────────────────────────────────────┘
                       │ HTTP /api/detect, /api/location
                       ▼
┌─────────────────────────────────────────────────────────────┐
│                  阿里云 ESA Pages 边缘节点                    │
│  ┌───────────────────────────────────────────────────────┐ │
│  │                   Edge Functions                       │ │
│  │  - detect.js: 代码语言自动检测                         │ │
│  │  - location.js: 用户位置检测（界面语言推荐）           │ │
│  └───────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘

---

技术栈

| 层级 | 技术 | 用途 | |------|------|------| | 前端框架 | React 18 | UI 组件化 | | 构建工具 | Vite 5 | 开发和打包 | | 代码高亮 | Prism.js | 语法高亮 | | 图片导出 | html-to-image | PNG/SVG 导出 | | 样式 | TailwindCSS | 深色科技风主题 | | 动画 | Framer Motion | 流畅交互 | | 边缘计算 | ESA Edge Functions | 语言检测 |

---

设计理念

遵循「去 AI 味儿」设计原则：

• 配色: 琥珀色强调色 + 深灰背景，避免蓝紫渐变
• 图标: 全部使用自定义 SVG 图标，不使用 emoji
• 字体: JetBrains Mono 等宽字体，专业感十足
• 布局: 左右分栏，编辑与预览并排，高效工作流

---

项目结构

11_SnapCode_代码截图美化/
├── frontend/                    # 前端项目
│   ├── src/
│   │   ├── components/
│   │   │   ├── Header.jsx      # 顶部导航
│   │   │   ├── CodeEditor.jsx  # 代码编辑器
│   │   │   ├── CodePreview.jsx # 代码预览
│   │   │   ├── ControlPanel.jsx # 控制面板
│   │   │   └── Icons.jsx       # SVG 图标库
│   │   ├── App.jsx             # 主应用
│   │   ├── main.jsx            # 入口
│   │   └── index.css           # 全局样式
│   ├── public/
│   │   └── logo.svg            # 应用图标
│   ├── index.html
│   ├── vite.config.js
│   ├── tailwind.config.js
│   └── package.json
│
├── functions/                   # 边缘函数
│   ├── detect.js               # 语言检测
│   └── location.js             # 位置检测
│
├── esa.jsonc                    # ESA 部署配置
└── README.md

---

快速开始

本地开发

# 1. 进入前端目录
cd frontend

# 2. 安装依赖
npm install

# 3. 启动开发服务器
npm run dev

# 4. 访问应用
# 浏览器打开 http://localhost:5180

---

ESA 能力应用

| ESA 能力 | 应用场景 | 具体实现 | |---------|---------|---------| | 边缘函数 | 代码语言检测 | 基于关键字和正则模式匹配 | | Geo-IP | 界面语言推荐 | 读取 ali-cdn-real-country | | CDN 加速 | 静态资源分发 | 全球边缘节点加速 | | 边缘缓存 | 检测结果缓存 | 1 小时 TTL |

---

支持的语言

JavaScript、TypeScript、Python、Java、C、C++、Go、Rust、SQL、JSON、YAML、Markdown、Bash、CSS、HTML、PHP、Ruby、Swift、Kotlin 等 15+ 种编程语言。

---

开源协议

MIT License