Code2Image

一个代码预览工具，可以将代码转换为美观的图片进行下载。

功能特性

• ✨ 代码编辑器：基于 Monaco Editor 的强大代码编辑体验
• 🎨 语法高亮：支持多种编程语言的语法高亮显示
• 🖼️ 图片下载：将代码预览转换为 PNG 图片下载
• 📱 响应式设计：支持桌面和移动设备
• 🌐 浏览器窗口风格：使用 @zachleat/browser-window 提供美观的预览效果

支持的语言

• JavaScript
• TypeScript
• Python
• Java
• C/C++
• Go
• Rust
• HTML
• CSS
• JSX/TSX

技术栈

• React 19 - 前端框架
• Vite - 构建工具
• TypeScript - 类型支持
• Monaco Editor - 代码编辑器
• Prism.js - 语法高亮
• html2canvas - HTML转图片
• @zachleat/browser-window - 浏览器窗口样式

开发

安装依赖

pnpm install

启动开发服务器

pnpm run dev

构建项目

pnpm run build

预览构建结果

pnpm run preview

使用方法

1. 在左侧的语言选择器中选择你的编程语言
2. 在代码编辑器中输入或粘贴你的代码
3. 右侧会实时显示代码的预览效果
4. 点击顶部导航栏的"下载 PNG"按钮下载图片

项目结构

src/
├── components/          # 组件目录
│   ├── Navbar.tsx      # 顶部导航栏
│   ├── CodeEditor.tsx  # 代码编辑器
│   ├── CodePreview.tsx # 代码预览
│   └── LanguageSelector.tsx # 语言选择器
├── types/              # 类型定义
└── App.tsx            # 主应用组件

License

MIT