@bramus@DavidDarnes@Jbasoo This is cool, I recently created a syntax highlighting web component at work for our internal wiki thing, but it uses Shiki, not CSS Highlight.
Looking at Shiki, they do have a codeToTokens function, but it requires some internal (great naming 😀) thing to get passed to it which supposedly needs to initialize the langs/themes and I can't be bothered to figure that out right now, but seems like it should be doable
@bramus@DavidDarnes@Jbasoo Oh cool, you can just import it from the web bundle, not too bad. Funny enough it doesnt actually give you the tokens, but I guess you can differentiate based on the color values
@bramus@DavidDarnes@Jbasoo Hm, can anybody point out to me what I'm doing wrong here? I would have expected 4 different colors in the output, but im seeing only 2?
@bramus@DavidDarnes@Jbasoo Oh lol, figured it out. i++ was in the wrong place, and the fourth color/token is whitespace
This is working nicely then! Very cool api, and nice to see that it can be integrated with shiki pretty easily. Would just have to adjust the stylesheet for the theme to accommodate, but you can probably automate that.
@passle@scrwd I was about to say the same thing, though this is cool regardless! I'm sure a more lean tokenizer can be found. Had a play with it myself but I'm not familiar with the highlight API yet, need to read more
@DavidDarnes@passle I think it will be interesting when this is targeted directly by libs - so we might just see lean tokenisers maybe - right now using an full existing lib that can run on the server, in the browser seems like overkill for syntax highlighting on a blog - maybe it's cool for interactive tools tho. Aside from a smaller amount of elements in the DOM I'm not sure where the big benefits lay - like is that enough?
@scrwd@passle one thing I like about it is how portable it is as a possible web component. Relying on the server means having access to edit the markup in some way
Add comment