Plex Code Editor

一个功能强大的Chrome浏览器扩展代码编辑器，支持多种编程语言和主题，提供IDEA风格的用户界面。

🚀 功能特点

• 多语言支持：支持Java、JavaScript、JSON、Markdown、Python、SQL等多种编程语言
• 丰富主题：内置Dracula、GitHub、Material、VS Code等多种编辑器主题
• 双模式编辑：支持弹出式编辑（快速编辑）和独立页面编辑（全屏体验）
• IDEA风格界面：采用IntelliJ IDEA风格的深色主题和交互体验
• 智能语法高亮：基于CodeMirror的高级语法高亮和代码格式化
• 本地存储：自动保存编辑内容，下次打开时自动恢复
• 响应式设计：适配不同屏幕尺寸的编辑体验

📋 支持的编程语言

• JavaScript/TypeScript
• Java
• Python
• SQL
• JSON
• Markdown
• 以及更多...

🎨 支持的主题

• VS Code主题
• GitHub主题
• Material主题
• Dracula主题
• One Dark主题

🛠️ 技术栈

• 前端框架：React 18
• 代码编辑器：CodeMirror 6
• UI组件：React-CodeMirror
• 构建工具：Vite
• 样式：Tailwind CSS
• 开发语言：TypeScript
• 浏览器扩展：Chrome Extension Manifest V3

📦 安装方法

开发环境安装

1. 克隆仓库

git clone https://github.com/yourusername/plex-code-editor.git
cd plex-code-editor

2. 安装依赖

npm install

3. 开发模式

npm run dev

4. 构建生产版本

npm run build

Chrome浏览器安装

1. 打开Chrome浏览器，进入扩展管理页面（chrome://extensions/）
2. 开启右上角的「开发者模式」
3. 点击「加载已解压的扩展程序」
4. 选择项目根目录下的 dist 文件夹
5. 扩展将自动安装并显示在工具栏中

📖 使用说明

弹出式编辑

1. 点击Chrome工具栏中的Plex Code Editor图标
2. 在弹出的编辑器中选择语言和主题
3. 开始编写代码
4. 编辑内容会自动保存

独立页面编辑

1. 在弹出式编辑器中点击「打开完整编辑器」按钮
2. 在新标签页中获得全屏编辑体验
3. 支持更多高级功能和更大的编辑空间

📁 项目结构

🔧 开发说明

• 使用 npm run dev 启动开发服务器
• 使用 npm run build 构建生产版本
• 构建后的文件将输出到 dist 目录
• 扩展使用Manifest V3，支持现代Chrome浏览器

📄 许可证

MIT License

🤝 贡献

欢迎提交Issue和Pull Request！

📞 联系方式

如有问题或建议，欢迎通过以下方式联系：

• GitHub Issues: https://github.com/lustan/plex-code-editor/issues

---

享受编码的乐趣！ 🎉