c2stack/cc-code-img repository overview

⁠CC Code Image

A modern, browser-based code screenshot generator with beautiful syntax highlighting. Create stunning code snippets for presentations, documentation, or social media.

⁠✨ Features

• Syntax Highlighting: Beautiful code highlighting with dark and light themes
• 15+ Languages Supported: JavaScript, TypeScript, Python, Java, C++, C#, PHP, Ruby, Go, Rust, JSON, XML, CSS, HTML, and SQL
• Screenshot Export: Copy to clipboard or download as high-quality PNG images
• Customizable Scale: Generate screenshots at 1x to 5x resolution for pixel-perfect results
• Line Numbers: Optional line number display
• Rounded Corners: Toggle rounded corners on your screenshots
• Theme Options: Choose between dark (Atom One Dark) and light (Atom One Light) themes
• Code Editing: Built-in editor to write or paste your code
• Quick Actions: Copy code to clipboard or save as file
• Responsive Design: Works seamlessly on desktop and mobile devices

⁠🚀 Getting Started

⁠Prerequisites

• Bun⁠ runtime installed

⁠Installation

1. Clone the repository and navigate to the app directory:

cd apps/cc-code-img

1. Install dependencies:

bun install

⁠Development

Run the development server:

bun dev

The app will be available at http://localhost:5173 (or another port if 5173 is in use).

⁠🏗️ Building For Production

Build the application for production:

bun build

Preview the production build:

bun preview

⁠📖 Usage

1. Edit Code: Click "Edit Code" to open the editor and paste or write your code
2. Select Language: Choose the programming language from the dropdown (15+ languages available)
3. Customize Appearance:
   • Switch between dark and light themes
   • Set screenshot scale (1x to 5x)
   • Toggle line numbers on/off
   • Enable/disable rounded corners
4. Export Options:
   • Copy Screenshot: Copies the code as an image to your clipboard
   • Download Screenshot: Downloads the code as a PNG file
   • Copy Code: Copies the raw code text to clipboard
   • Save File: Saves the code as a file with the appropriate extension

⁠Supported Languages

JavaScript, TypeScript, Python, Java, C++, C#, PHP, Ruby, Go, Rust, JSON, XML, CSS, HTML, SQL

⁠Screenshot Features

• High Resolution: Choose up to 5x scale for ultra-sharp images
• Optimized Output: Automatically sized to fit your code perfectly
• Background Colors: Theme-matched backgrounds for professional appearance
• Custom Styling: Rounded corners and line numbers for enhanced readability

⁠🧪 Testing

Run the test suite:

bun test

This project uses Vitest⁠ for testing.

⁠🛠️ Tech Stack

• React 19⁠ - UI framework
• TanStack Router⁠ - File-based routing
• Vite⁠ - Build tool and dev server
• Tailwind CSS 4⁠ - Styling
• React Syntax Highlighter⁠ - Code syntax highlighting
• html2canvas⁠ - Screenshot generation
• Lucide React⁠ - Icon library
• Bun - JavaScript runtime and package manager

⁠📁 Project Structure

src/
├── components/
│   └── screenshot-buttons.tsx    # Screenshot generation and export
├── lib/
│   └── languages.ts               # Supported language definitions
├── routes/
│   ├── __root.tsx                 # Root layout component
│   └── index.tsx                  # Main application component
├── main.tsx                       # Application entry point
└── styles.css                     # Global styles

⁠🎨 Use Cases

• Documentation: Create beautiful code examples for technical documentation
• Presentations: Generate high-quality code snippets for slides
• Social Media: Share code on Twitter, LinkedIn, or blog posts
• Tutorials: Enhance educational content with syntax-highlighted code
• Code Reviews: Take screenshots of specific code sections for discussion
• Portfolio: Showcase your code with professional styling

⁠📝 License

Part of the CC Web Tools collection.