Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mohamedafraz/raycode
A fully functional and powerful tool for sharing code snippets as screenshots with cool features.
https://github.com/mohamedafraz/raycode
code-editor raycode react shadcn-ui tailwindcss
Last synced: 2 days ago
JSON representation
A fully functional and powerful tool for sharing code snippets as screenshots with cool features.
- Host: GitHub
- URL: https://github.com/mohamedafraz/raycode
- Owner: MohamedAfraz
- License: gpl-3.0
- Created: 2024-02-22T16:30:36.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-02-23T16:36:27.000Z (11 months ago)
- Last Synced: 2024-11-18T01:09:27.545Z (2 months ago)
- Topics: code-editor, raycode, react, shadcn-ui, tailwindcss
- Language: JavaScript
- Homepage: https://raycode.netlify.app
- Size: 307 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [RayCode](https://raycode.netlify.app/)
A fully functional and powerful tool for sharing code snippets with Professional features. Share beautiful screenshots of your code on your social media platforms.
**Try it at:** [https://raycode.netlify.app/](https://raycode.netlify.app/)
---
## Features
- 10+ elegant themes (light + dark theme included).
- 15+ font styles (popular monospace fonts).
- Support for all popuplar languages with auto-detection and syntax highlighting.
- Multiple export options: save as SVG/PNG, copy to clipboard and copy link.
- Other customization options like: font size, padding, background etc.
---
## Technologies used
- [React](https://es.reactjs.org/) - Front-End JavaScript library.
- [Tailwind CSS](https://tailwindcss.com/) - A utility-first CSS framework.
- [ShadCN UI](https://ui.shadcn.com) - Re-usable components built using Radix UI and Tailwind CSS.
- [Vite](https://vitejs.dev/) - Frontend Tooling
- [Zustand](https://zustand-demo.pmnd.rs/) - Bear necessities for state management in React.
- [Highlight.js](https://highlightjs.org/) - Syntax highlighter.
- [React Simple Code Editor](https://www.npmjs.com/package/react-simple-code-editor) - Browser based code editor.
- [HTML to Image](https://www.npmjs.com/package/html-to-image) - Generates an image from a DOM node using HTML5 canvas and SVG.
- [React Hot Toast](https://react-hot-toast.com/) - Toast notifications for React.
- [React Hotkeys Hook](https://www.npmjs.com/package/react-hotkeys-hook) - A React hook for using keyboard shortcuts in components in a declarative way.
- [Resizable](https://www.npmjs.com/package/re-resizable) - A resizable component for React.
---
### You can fork this Repo or follow the steps below to build it yourself :D
## Build steps
### Prerequisites
i. Have [Node.js](https://nodejs.org/en/) installed on your machine.
ii. Update npm to the latest version. Run:
```bash
npm install -g npm@latest
```
iii. Install [Git](https://git-scm.com/downloads) and run the installer.
**Now follow the steps below !!**
1. Clone this repo
```bash
git clone https://github.com/MohamedAfraz/RayCode.git && cd RayCode
```
2. Install project dependecies
```bash
npm install
```
3. Build the project and start a local server
```bash
npm run build && npm run dev
```
4. Now open [this link](localhost:5173) to open the project.
Hope you got it and all is working!! If not, feel free to start an [Issue](https://github.com/MohamedAfraz/RayCode/issues)⚡