feat: port @michael-makes/shiki-colorized-brackets JSR package
#831
Conversation
✅ Deploy Preview for shiki-matsu ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for shiki-next ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Awesome! Thanks a lot! Please give me some time to properly review.
Do you consider using https://shiki.style/guide/decorations? It should handle the complexity of token splitting, where you just need to provide the positions.
Yeah I would vote to enable it only for the page of that package. You can refer to how we do that with theme or other transformers.
Surely! It totally make sense to have your name on that package! |
Certainly! No rush
I should clarify a bit. Splitting the tokens apart feels like the right approach to me. We are dealing with actually distinct tokens here, that are just joined together by the engine because they share a color. Also this approach has a couple benefits: no additional CSS needed so it's easier to set up, and it's able to work more seamlessly with other things in the broader ecosystem, such as Expressive Code (which generally does not work Shiki transaformers). That said, if you prefer decorations, I can look into refactoring that. The part I considered hacky was the method for finding those distinct bracket tokens. That's needs to happen regardless of whether we use decorations or stick with current method of changing the tokens themselves. Currently this just uses regular expressions, with some logic for ignoring matches in certain tokens (eg comments and strings). The method that feels better to me, is to using the token explanations, which contains info about all of the same-color tokens that have been joined together. However, that fails with mismatched tokens, which are still are joined together even in the explanations. Eg
Great, I'll take a look sometime in the next few days |
MichaelMakesGames
force-pushed
the
colorized-brackets
branch
from
e35a828 to
b30dcbb
Compare
This is done in the latest commit. I added an |
antfu
changed the title
@michael-makes/shiki-colorized-brackets JSR package
|
Thanks a lot! Let's have it and see how it works |
Description
There is a long-standing feature request to add VSCode-style bracket pair colorization to Shiki. I created a transformer that accomplishes this, and after discussion in the linked issue, it sounds like there's interest in incorporating it as an official plugin.
Linked Issues
fix #303
Additional context
This is mostly a straight port of my package, https://github.com/MichaelMakesGames/shiki-colorized-brackets. I've made some efforts to align with the styles and patterns I observed elsewhere in the Shiki repo, but let me know if there are other improvements I can make.
I'd like to call out that the way this splits tokens apart feels a little hacky, mostly just doing some basic text search. I investigated another route that used the token explanations, but that had issues highlighting mismatched brackets. If that can be worked around, that would be a more robust solution.
Question regarding the docs: currently this transformer isn't enabled in the docs. Would we want this enabled there? Perhaps only for the page for this package?
Another note: I listed myself as the author of the package. I noticed all the other packages list @antfu. I'm fine changing that.