Fix: Add Syntax Highlighting to Sidebar Code Snippets

[SOUMITRO-SAHA]

Resolve Code Highlighting Issue in Sidebar

Issue Reference: #76

---

Description:

This PR resolves issue #76 where code snippets in the sidebar were not displaying syntax highlighting. The issue has been addressed, ensuring that code blocks in the sidebar are now properly highlighted, improving readability.

How to Test:

• Open a sidebar that includes code snippets.
• Verify that the code is highlighted according to the selected programming language.

[mathewpareles]

This is great, but it seems like you're using an external react-syntax-highlighter library to do this.

Can you instead make it use the Monaco editor (which is what VS Code uses to render code)?

Or even better, use VS Code's native code renderer, instead of a library.

[andrewpareles]

I think we're going to have to use Monaco to do this instead of react-syntax-highlighter.

[SOUMITRO-SAHA]

Hi, @andrewpareles @mathewpareles

I have a quick question regarding Monaco. Is there a way to utilize VS Code’s Monaco syntax highlighting without installing additional packages? I've tried implementing this feature with highlight.js and prism.js, but they didn't work perfectly.

Additionally, for Monaco, do I need to install the monaco-editor separately and resolve the .ttf font loading using tools like url-loader? This approach seems cumbersome, and I'm not entirely satisfied with it either.

I've explored multiple options before submitting the last PR. Then, I reverted back to using react-syntax-highlighter, but I'm not keen on relying on external libraries.

It would be great if you could suggest a better approach or provide some resources for implementing this feature more efficiently.

[andrewpareles]

Thanks for all the work. It's possible to add syntax highlighting in a Monaco editor - you just need to build a custom Monarch language syntax definition. I've done this in the past and will finish up this PR in a bit! (Edit: the custom Monarch definition might not be needed...)

[IDLe-Engineering]

well, this is better than nothing ;-) as long as the monaco implementation isn't done, I would consider using it in the main branch. I have adapted the implementation to the latest architecture and it's working like a charm...If anyone is interested, I will create a new pull request to be compatible to the latest main