From 09ca94326a8f95f36c5038503a3bcb97f58a1780 Mon Sep 17 00:00:00 2001
From: gitee-bot <no-reply@git.oschina.net>
Date: Wed, 28 May 2025 03:23:37 +0000
Subject: [PATCH] Update README.md

---
 README.md | 93 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 README.md

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..88f8eb1
--- /dev/null
+++ b/README.md
@@ -0,0 +1,93 @@
+```markdown
+# Code Canvas 
+
+A web-based editor with real-time previews for creating beautiful code screenshots with customizable styling.
+
+![Screenshot](./.github/screenshot.png)
+
+## Features
+
+- **Code Editor**: Edit code with syntax highlighting in the built-in editor
+- **Multiple Previews**: View real-time HTML and Markdown outputs
+- **Customizable Styling**:
+  - Adjust window appearance (shadows, reflections)
+  - Select color themes and backdrops
+  - Configure text settings (font, size, weight)
+- **Export Options**: Save as PNG image
+- **Presets**: Save and load customized configurations
+- **Responsive Design**: Adjustable frame and editor sizes
+
+## Project Structure
+
+```
+app/
+├── components/         # Vue components
+│   ├── ui/             # UI building blocks
+│   │   ├── editor/     # Code editor components
+│   │   ├── frame/      # Window frame components
+│   │   ├── sidebar/    # Control panel components
+│   │   └── window/     # Window styling components
+│   └── shared/         # Reusable UI components
+│       └── icon/       # SVG icons
+├── lib/                # Core functionality and utilities
+│   ├── colors.ts       # Color management
+│   ├── export.ts       # Export functionality
+│   ├── presets.ts      # Preset management
+│   ├── shiki.ts        # Syntax highlighting
+│   └── ...             # Other utilities
+└── styles/             # CSS stylesheets
+```
+
+## Technologies Used
+
+- Nuxt.js (Vue 3)
+- TypeScript
+- Shiki (Syntax highlighting)
+- Tailwind CSS
+- Vercel hosting
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js (v18+)
+- pnpm
+
+### Installation
+
+1. Clone the repository
+   ```bash
+   git clone https://github.com/your-username/code-canvas.git
+   cd code-canvas
+   ```
+
+2. Install dependencies
+   ```bash
+   pnpm install
+   ```
+
+3. Start development server
+   ```bash
+   pnpm dev
+   ```
+
+4. Open http://localhost:3000 in your browser
+
+## Usage
+
+1. **Edit Code**: Type or paste code in the editor
+2. **Customize Appearance**:
+   - Select a color theme from the sidebar
+   - Adjust window styling (padding, shadow, reflection)
+   - Choose a backdrop
+3. **Preview**: View HTML and Markdown output in real-time
+4. **Export**: Click the download button to save as PNG
+
+## Contributing
+
+Contributions are welcome! Please fork the repository and submit a pull request.
+
+## License
+
+MIT License - see [LICENSE](./LICENSE) for details.
+```
\ No newline at end of file
-- 
Gitee