Create elegant code screenshots of your source code.
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.
✅ 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
To run the project locally, you must have in your local machine pnpm >= 6.23.2 and node >= 14.x;
- Install dependencies
$ pnpm install- Build core libraries
$ pnpm libs:build- Run @codeimage/app
- Development mode:
$ pnpm dev- Production mode (no reload, serve static files):
$ pnpm build:prod && pnpm serve --filter=@codeimage/appCodeImage front-end app currently relies on these technologies:
- SolidJS: UI framework
- CodeMirror6: Code Editor
- vanilla-extract: Design system and app theme
- HeroIcons: Icons
- solid-headless: Headless WAI-ARIA widgets for SolidJS
- @ngneat/elf + RxJS: Reactive state management
- solid-primitives: SolidJS primitives library
- solid-use: Collection of solid-js utilities
- material-icon-theme: Icons for custom terminal tabs
- @emotion/css: CSS Utility used for custom codemirror themes
- floating-ui: Utilities for positioning floating elements
- Lion: White label web components in Lit (used for custom combobox)
⚠️ 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.
Until the end of solid hackathon voting ends phase, pull request must target the next branch
See the CONTRIBUTING.md guide for more details.
MIT © Riccardo Perra