Add syntax highlighting in output view that matches editor syntax highlighting

[bpringe]

Not sure if this is easy to do / worth the effort, but we should investigate more.

[bpringe]

I asked GitHub Copilot how I can achieve syntax highlighting like it has, in a webview.

My prompt:

I'm an extension author, and my extension has a webview that has code which is syntax highlighted. I noticed in your chat view the code blocks are highlighted with the same colors as in the VS Code editors. How can I achieve that in my extension?

Its answer:

To achieve syntax highlighting in your webview that matches the colors of the VS Code editor, you should use the VS Code theming and token colorization APIs. Here are the steps:

Use the VS Code API to get the current theme and token colors.
Inject the appropriate CSS variables and styles into your webview.
Use the same TextMate grammars or highlight.js with a theme that matches VS Code.
You can use the Get Webview Colors API to retrieve theme colors for your webview, and the Export Color Theme command to inspect the current theme's colors.

For more details and code examples, refer to the Webview theming documentation.

(Link updated to work here.)

I haven't validated that info yet, so some of it could be a hallucination.

[bpringe]

Related issues:

• [api] Allow extensions to use the syntax highlighter  microsoft/vscode#56356
• How to highlight like VSCode highlightjs/highlight.js#1372