CodeSnap is a feature-rich code snippet beautifier and sharing tool, inspired by Ray.so.
- 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
- React
- TypeScript
- Vite
- Tailwind CSS
- Zustand
- Shadcn UI
- Radix UI & Icons
- React Hot Keys Hook
- React Hot Toast
- HTML-to-Image
- highlight.js
- highlight.js: Syntax highlighting
- clsx and tailwind-merge: Conditional CSS classes
- ESLint: Code linting
- 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
-
Open your browser and visit
http://localhost:5173
We welcome contributions to Ray.so-Clone! Here's how you can contribute:
- Fork the repository
- Create a new branch:
git checkout -b feature/your-feature-name - Make your changes and commit them:
git commit -m 'Add some feature' - Push to the branch:
git push origin feature/your-feature-name - Submit a pull request
Please ensure your code adheres to the project's coding standards and includes appropriate tests.
- Inspired by Ray.so
- Built with React and Vite
- Styled with Tailwind CSS and shadcn/ui