Code Snippet Generator

Transform your code into beautiful, shareable images perfect for tutorials, documentation, and social media. Customize themes, add syntax highlighting, and export with just a click — making your code snippets as engaging as your content.

✨ Features

• Multiple Languages Support: JavaScript, TypeScript, Python, Ruby, Go, Rust, Java, C#, and SQL
• Custom Themes: Choose from various themes including One Dark, GitHub Dark, Monokai, and more
• Syntax Highlighting: Automatic language-specific syntax highlighting
• Export Options: Export as PNG or JPEG with customizable quality
• Customization Options:
  • Adjustable font size
  • Custom padding
  • Border radius control
  • Line numbers toggle
  • Window controls toggle
• One-Click Export: Easily export or copy to clipboard
• Code Formatting: Built-in code prettifier for JavaScript/TypeScript
• Responsive Design: Works seamlessly on desktop and mobile devices

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/AlexJurik/code-snippet.git
cd code-snippet-generator

2. Install dependencies:

npm install
# or
yarn install

3. Start the development server:

npm run dev
# or
yarn dev

4. Open http://localhost:5173 in your browser

🛠️ Built With

• React - UI Framework
• Vite - Build Tool
• Tailwind CSS - Styling
• Prism.js - Syntax Highlighting
• html-to-image - Image Generation
• Prettier - Code Formatting
• Lucide Icons - Icons

📝 Usage

1. Enter Code: Paste or type your code in the editor
2. Choose Language: Select the appropriate programming language
3. Customize Appearance:
   • Select a theme
   • Adjust font size
   • Set padding
   • Configure border radius
   • Toggle line numbers and window controls
4. Export:
   • Choose PNG or JPEG format
   • Click download or copy to clipboard

🎨 Themes

Available themes include:

• One Dark
• GitHub Dark
• Monokai
• Nord
• Dracula

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Prism.js for syntax highlighting
• html-to-image for image generation
• Tailwind CSS for styling utilities
• Lucide for beautiful icons

📧 Contact

@Alex Jurik