feat: syntax highlighting component

[mattrothenberg]

Feature/component description

It'd be awesome if there were a syntax highlighting component that users could put in their web view. We (GitHub Next) have already run into a few cases where we've needed this functionality, and ultimately hand-rolled it with https://highlightjs.org/. This works but it's a pretty heavyweight solution. It was also difficult to match the user's VSCode syntax highlighting theme perfectly.

<vscode-syntax-highlight lang="js">
  const foo = 'bar';
</vscode-syntax-highlight>

Use case

In our case, we have one particular web view that displays the user's currently selected text (from VSCode). We take that text, pass it through Highlight.js, and render it out with a React component. This works fine, but again isn't ideal. And our web view bundle size suffers dramatically with the inclusion of Highlight.js

Ideally, VSCode could pass to the web view (assuming there's an API for this) information about the current syntax highlighting theme, such that we could apply those colors/tokens to the code snippet that is being stuck inside of the component.

Let me know what you think!

[Symbolk]

+1, not sure https://github.com/shikijs/shiki is a good solution here.

[charisk]

This would be really useful to us to us too!