<h2>Overview:</h2>
CodeImage is a tool designed to help developers create visually appealing screenshots of their source code. It offers a range of features to streamline the process of sharing code snippets on social media platforms. The tool is built on a PNPM monorepo architecture and includes front-end applications, a REST API layer, and various packages for UI, configurations, highlighting, and more.
<h2>Features:</h2>
<ul>
<li>Create elegant code screenshots: Showcase source code in an aesthetically pleasing manner.</li>
<li>Built with SolidJS: Utilizes the SolidJS framework for the front-end application.</li>
<li>Zero-runtime Stylesheets with vanilla-extract: Employs vanilla-extract for stylesheets in TypeScript.</li>
<li>Composable state management: Uses StateBuilder for managing state in a modular way.</li>
<li>Accessible UI Kit: Offers an accessible UI Kit based on Kobaltesolid-primitives.</li>
<li>Custom editor and highlighting themes: Includes custom editor themes and code highlighting for CodeMirror.</li>
<li>Internationalization support: Provides a wrapper for i18n with strict typing for internationalization.</li>
<li>Small state manager: Contains a state manager with utilities for RxJS and solid-js/store.</li>
</ul>

<h2>Overview:</h2>
Solid-codemirror is an innovative library designed to simplify the integration of CodeMirror6 with SolidJS. Initially created for a hackathon, it has evolved into a powerful tool for building code editors, making it easier for developers to implement rich text editing features. This library operates on a modular system, allowing users to tailor their editing experience by selecting only the features they require, ensuring both flexibility and ease of use.
With solid-codemirror, developers can leverage the capabilities of CodeMirror while seamlessly incorporating them into SolidJS applications. Its core functionality revolves around the createCodeMirror function, which serves as the gateway to creating customized editor instances, enabling a smooth and streamlined coding experience.
<h2>Features:</h2>
<ul>
<li>
Easy Integration: Solid-codemirror simplifies the integration process of CodeMirror6 with SolidJS, making it accessible for developers of varying skill levels.
</li>
<li>
Modular Design: The library allows developers to pick and choose which features they want, giving them control over the editor's functionality and size.
</li>
<li>
Flexibility with Peer Dependencies: It requires manual installation of <code>@codemirror/state</code> and <code>@codemirror/view</code>, providing developers with better control and customization options during implementation.
</li>
<li>
CreateCodeMirror Function: This essential function allows users to initiate their CodeMirror instances, facilitating a straightforward setup for the editor environment.
</li>
<li>
Dynamic Ref Management: The library enables dynamic attachment of editor instances to DOM elements, enhancing performance and responsiveness.
</li>
<li>
Extension Creation: The <code>createExtension</code> function assists developers in easily creating new extensions that can enhance the CodeMirror experience by utilizing compartments.
</li>
<li>
Error Handling: Solid-codemirror includes guidance for resolving common integration issues, such as configuring Vite correctly when dependencies encounter issues.
</li>
</ul>

Riccardoperra

Codeimage

Solid Codemirror