Feature Request: Implement Syntax Highlighting for Input Code Snippets

[blackkspydo]

Problem Statement

The "codeverter" website currently provides syntax highlighting only for output code snippets. However, there is no syntax highlighting for input code snippets. Incorporating syntax highlighting for the input code snippets would enhance the user experience by improving code readability and comprehension during the code conversion process.

Proposed Solution

I propose implementing syntax highlighting for input code snippets using a content editable div instead of a textbox. This approach would allow for better integration of syntax highlighting libraries and ensure consistent code presentation across both input and output sections.

Alternative Solutions

An alternative solution could involve using a third-party code editor component, such as Ace or Monaco, that offers built-in syntax highlighting and additional editing features. These editors can be embedded directly into the website, providing a feature-rich and consistent user experience.

[TGlide]

This could be interesting! The biggest challenge IMO is auto-detecting a language, and performance concerns.

I don't particularly love the idea of using a code-editor because the syntax highlighting engine would probably be different from the one we're using. If we do use a code editor, I'd rather have it all with the same syntax highlighting (we can change the one we have today if that works).

Feel free to tackle this if you want! Would be greatly appreciated 💪