codeimage

codeimage copied to clipboard

Create elegant code screenshots of your source code.

Introduction

CodeImage is the newest tool to help developers to create beautiful screenshots of their code, providing several features to speed up the process to post in social media.

🚀 Features

✅ Customizable terminal window, editor and frame style
✅ 15+ custom themes for code editor
✅ Highlighting support for 10+ programming languages
✅ Tab name with customizable icons
✅ Web share api support
✅ Keyboard shortcuts support
✅ Mobile view support
✅ Multi-language support
✅ Light and dark mode support

💻 Run locally

CodeImage use a monorepo structure with pnpm. It's currently subdivided in these packages:

• @codeimage/app: front-end application
• @codeimage/config: Base configuration and interfaces for CodeImage
• @codeimage/dom-export: html-to-image fork which includes several fix for image export
• @codeimage/highlight: Editor themes and highlighting
• @codeimage/locale: Wrapper of @solid-primitives/i18n which includes strict typing for i18n
• @codeimage/ui: UI kit of CodeImage front-end application

To run the project locally, you must have in your local machine pnpm >= 7 and node >= 16.x;

1. Install dependencies

$ pnpm install

2. Build core libraries

$ pnpm libs:build

3. Run @codeimage/app

$ pnpm dev

🤖 Tech stack

CodeImage front-end app is entirely built with SolidJS, and currently relies on these technologies:

• CodeMirror6: Code Editor
• vanilla-extract: Design system and app theme
• HeroIcons: App icons
• solid-aria: High-quality primitives that help to build accessible user interfaces
• @ngneat/elf + RxJS: Reactive state management

Other libraries:

• solid-primitives: SolidJS primitives library
• solid-use: Collection of solid-js utilities
• material-icon-theme: Icons for custom terminal tabs
• floating-ui: Utilities for positioning floating elements
• Lion: White label web components in Lit (used for custom combobox)

🌏 Contributions

:warning: Read this before opening any PR!

When contributing, it's better to first discuss the change you wish to make via issue or discussion, or any other method with the owners of this repository before making a change.

See the CONTRIBUTING.md guide for more details.

CodeImage is the winner of SolidHack 2022 for the Best Application category!

License

MIT © Riccardo Perra