Skip to content

Facilitates creating code snippet screenshots with colorful backgrounds and ideal for seamless sharing on social media.

Notifications You must be signed in to change notification settings

ShreyasSN/CodeSnippetShot

Repository files navigation

Project live at: Link to Website

Code-Snippet-Shot.png

This website simplifies creating visually striking code snippet screenshots for social media sharing with vibrant themes and easy customization. Share your code expertise in style and grab attention effortlessly.

Features

  • Diverse Themes: Access a collection of 10+ elegant themes, including both light and dark themes for your preferred aesthetic.
  • Multilingual Support: Enjoy support for multiple languages with automatic detection and syntax highlighting, making your writing experience seamless.
  • Customizable Fonts: Choose from a range of 12+ font styles, featuring popular monospace fonts to tailor your writing environment.
  • Ample Padding Options: Customize your editor with ample padding choices to create a comfortable and visually pleasing workspace.
  • Elegant Dark Mode: Switch effortlessly to a sophisticated dark mode for a comfortable and eye-friendly writing experience.
  • Background-Free Editing: Experience distraction-free editing with a clutter-free interface, allowing you to focus on your content.
  • Image Export: Save your work as high-quality SVG or PNG images to easily share your creations.
  • Effortless Sharing: Share your work with ease by copying it to the clipboard or generating a shareable link for convenient collaboration and distribution.

Tech Stack

  • 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.
  • React-three fiber & drei: For dynamic 3D rendering of a starlight live background.

Sample-picture.png Discover more on the website: Link to Website

About

Facilitates creating code snippet screenshots with colorful backgrounds and ideal for seamless sharing on social media.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published