Feature Request: add a code snippet component

[guiherzog]

Feature request

Provide a simple component that can render code snippets in a webview with syntax highlighting, themes, and settings considered. They could be read-only initially, but perhaps making the editable could make sense.

I think in general, we strongly prefer creating editors or using VS Code's builtin APIs for showing code (peek view, etc). However, there are several use cases, such as a conversational language model describing some code mixed with text, where having a small code snippet rendered would be nice.

Perhaps the implementation could be from wrapping around a Monaco editor in a web-component (example) that takes VS Code variables or some wrapping around settings, I did not invest much time thinking on the implementation, but I could after hearing your thoughts.

Expected behavior

We could be able to render small snippet with all the settings and themes coming from VS Code. I imagine something like this.

<vscode-snippet language="typescript">
   function foo(bar: string) {
       return 'fuzzy wuzzy was a bear';
   }
<vscode-snippet>

Current behavior

Currently, it's not possible, we have a few options:

1. Highlighting them manually based on some pre-defined semantic coloring and use a code mirror editor (similar to what chrome devtools does).
2. Show a standalone Monaco editor similar to this example. The issue with this one is that, themes are not loaded by default, and user settings are not respected (font-size, indentation, etc).

Use case

We have several use cases:

• Rendering snippets coming from ML extensions / LLMs.
• Rendering snippets of search results from our custom code search extension.
• Rendering inline code for our bug tracking extension.

Screenshots/references

This is similar to https://github.com/microsoft/vscode-webview-ui-toolkit/issues/315.