Code Screenshot
A fully functional Ray.so clone (a powerful tool for sharing code snippets) with additional features. Share beautiful screenshots of your code on your social media platforms.
Project live at: https://code-ss.pages.dev/
Complete tutorial/walkthrough available on my Youtube channel:
Features
- 10+ elegant themes (light + dark theme included).
- 12+ 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 - Front-End JavaScript library.
- Tailwind CSS - A utility-first CSS framework.
- ShadCN UI - Re-usable components built using Radix UI and Tailwind CSS.
- Zustand - Bear necessities for state management in React.
- Highlight.js - Syntax highlighter.
- React Simple Code Editor - Browser based code editor.
- HTML to Image - Generates an image from a DOM node using HTML5 canvas and SVG.
- React Hot Toast - Toast notifications for React.
- React Hotkeys Hook - A React hook for using keyboard shortcuts in components in a declarative way.
- Resizable - A resizable component for React.
- Vite - Frontend Tooling
Build steps
- Clone this repo
git clone https://github.com/nimone/code-screenshot && cd code-screenshot
- Install project dependecies
npm install
- Build the project and start a local server
npm run build && npm run serve