https://github.com/devrajdc/dc-code-screenshot
A powerful tool for sharing code snippets with additional features. Share beautiful screenshots of your code on your social media platforms.
https://github.com/devrajdc/dc-code-screenshot
flourite highlightjs html-to-image react-hot-toast react-hotkeys-hook react-simple-code-editor reactjs resizable shadcn-ui tailwindcss zustand
Last synced: 3 months ago
JSON representation
A powerful tool for sharing code snippets with additional features. Share beautiful screenshots of your code on your social media platforms.
- Host: GitHub
- URL: https://github.com/devrajdc/dc-code-screenshot
- Owner: DevrajDC
- License: gpl-3.0
- Created: 2024-04-06T08:24:30.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-28T20:31:16.000Z (about 1 year ago)
- Last Synced: 2024-05-02T03:26:21.518Z (about 1 year ago)
- Topics: flourite, highlightjs, html-to-image, react-hot-toast, react-hotkeys-hook, react-simple-code-editor, reactjs, resizable, shadcn-ui, tailwindcss, zustand
- Language: JavaScript
- Homepage: https://dc-code-screenshot.vercel.app
- Size: 153 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Code Screenshot
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://dc-code-screenshot.vercel.app/
---
## 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](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.
- [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.
- [Vite](https://vitejs.dev/) - Frontend Tooling
---
## Build steps
1. Clone this repo
```bash
git clone https://github.com/DevrajDC/dc-code-screenshot && cd code-screenshot
```
2. Install project dependencies
```bash
npm install
```
3. Build the project and start a local server
```bash
npm run build && npm run serve
```