CodeCapture is a powerful and user-friendly tool designed for developers, educators, and content creators. It enables the seamless creation of visually appealing code snippet images, perfect for sharing in forums, articles, or social media threads. By leveraging cutting-edge technologies, CodeCapture ensures that your code is not only accurately represented but also aesthetically pleasing.
- CodeMirror Integration: Employs
@uiw/react-codemirrorfor an intuitive and feature-rich code editing experience. - Syntax Highlighting: Provides built-in syntax highlighting with various language support through CodeMirror.
- HTML to Image Conversion: Utilizes the
html-to-imagelibrary to transform code snippets into high-quality images, perfect for sharing.
Visit codecapture.app to see CodeCapture in action.
- Node.js
- npm or yarn
- Clone the repository:
git clone https://github.com/otolock/CodeCapture.git
- Navigate to the project directory:
cd CodeCapture - Install dependencies:
npm install # or yarn install
- Start the development server:
npm run dev # or yarn dev - Open http://localhost:3000 with your browser to see the result.
- Write or paste your code into the Monaco Editor.
- Customize the appearance using the editor's built-in features.
- Click the 'Capture' button to convert your code snippet into an image.
- Save or share your generated image directly from the app.
Contributions to CodeCapture are welcome! Whether it's reporting a bug, discussing improvements, or submitting a pull request, all contributions are appreciated.
This project is licensed under the MIT License - see the LICENSE file for details.
@uiw/react-codemirrorfor the code editor integration.html-to-imagefor image generation.