ayusht777/ray.so-clone

CodeSnap is a feature-rich code snippet beautifier and sharing tool, inspired by Ray.so.

CodeSnap a Ray.so Clone

CodeSnap is a feature-rich code snippet beautifier and sharing tool, inspired by Ray.so.

Features

• Syntax highlighting for 38+ programming languages
• 11+ modern, visually appealing themes
• 19+ monospaced font styles
• Adjustable font sizes from small to huge
• Toggleable background for versatile image generation
• Dark mode support for reduced eye strain
• Auto-detect language option for 38+ languages
• Keyboard shortcuts for efficient control
• Local storage persistence for user preferences
• Random Theme Generator for quick theme selection
• Export in multiple formats (PNG, SVG, WEBP) with customizable sizes (2x, 4x, 6x)
• One-click copy of generated image link or image to clipboard
• Responsive design for cross-device compatibility
• Custom padding options for fine-tuning appearance
• Title editing for easy snippet identification

Tech Stack

• React
• TypeScript
• Vite
• Tailwind CSS
• Zustand
• Shadcn UI
• Radix UI & Icons
• React Hot Keys Hook
• React Hot Toast
• HTML-to-Image
• highlight.js

Libraries and Tools

• highlight.js: Syntax highlighting
• clsx and tailwind-merge: Conditional CSS classes
• ESLint: Code linting

Running the Project Locally

1. Clone the repository:

   https://github.com/Ayusht777/CodeSnap-Ray.so-Clone.git

2 . Install dependencies:

pnpm i

or

npm i

or

pnpm run dev

npm run dev

3. Open your browser and visit

   http://localhost:5173
   

Contributing

We welcome contributions to Ray.so-Clone! Here's how you can contribute:

1. Fork the repository
2. Create a new branch: git checkout -b feature/your-feature-name
3. Make your changes and commit them: git commit -m 'Add some feature'
4. Push to the branch: git push origin feature/your-feature-name
5. Submit a pull request

Please ensure your code adheres to the project's coding standards and includes appropriate tests.

License

MIT License

Acknowledgements

• Inspired by Ray.so
• Built with React and Vite
• Styled with Tailwind CSS and shadcn/ui