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!

[hawkticehurst]

Hi all,

I'm very sorry to say that the toolkit is being deprecated and all active development will be coming to a close.

There was an announcement last week where you can learn more details and leave any questions or comments you may have.

Beyond that, thank you so much filing this issue and apologies for never getting around to addressing it. It means a lot that you contributed to the improvement of this project. I wish you all the best in your future VS Code extension endeavors!