Bracket pair colorization

[theoludwig]

Hey! 👋

Thanks for this awesome package, I can finally use VSCode default Dark+ theme syntax highlighting on my blog. 😄
I'm wondering if Bracket pair colorization could be added to Shiki? It has been added to VSCode natively since v1.60 with settings.json: "editor.bracketPairColorization.enabled": true.

With VSCode:

With Shiki

[muenzpraeger]

That should be in now with 0.12.0.

[theoludwig]

That should be in now with 0.12.0.

How do you enable it? It seems like it is not enabled by default? I updated to [email protected], and there is still no bracket pair colorization. @muenzpraeger

[muenzpraeger]

@divlo VSCode itself has built-in bracket-pair colorization (based on runtime inspection of the code). If that should be replicated in a non-IDE situation like here with Shiki the tmLangauge definition as well as the the used theme have to provide that information.

[octref]

This requires extracting the VS Code bracket pair colorization logic out and bringing it to shiki. I don't quite have the bandwidth to do it right now.

[MichaelMakesGames]

Hey all, I just published a plugin for Shiki that can do this: GitHub / JSR

It is used as a tranformer, like this:

import shikiColorizedBrackets from '@michael-makes/shiki-colorized-brackets';
import { codeToHtml } from 'shiki';

const html = await codeToHtml('let values: number[] = [];', {
  lang: 'ts',
  theme: 'dark-plus',
  transformers: [shikiColorizedBrackets()],
});

When using shiki + the transformer on the above snippet, this is the output:

I've tested lots of languages and situations, but I'm sure there's some edge-cases I've missed, so feedback is appreciated.

PS: if the Shiki maintainers are interested, we could discuss making this an official plugin ;)

[antfu]

Awesome @MichaelMakesGames! I'd love to have it as an official plugin :) Do you want to draft a PR first? Thank you

[MichaelMakesGames]

@antfu sure thing! But can you take a look at #736 first? The plug-in needs some info from includeExplanation, and #736 could improve the slowdown from ~5x to ~2x. I'd be happy to submit a PR for that issue too

[MichaelMakesGames]

@antfu this should be part of the @shiki/transformers package, or a separate package? It seems a bit larger/more complicated than the transformers in @shiki/transformers, but not nearly as complicated as @shiki/twoslash

I might try to get a couple more edge-cases handled before submitting a PR (bracket highlighting in JSDoc comments, and support for multi-character brackets such as {{ in Angular templates)

[antfu]

I would up to have it as a separate package :)

[MichaelMakesGames]

Delayed but not forgotten :)