Gregory's Server
@bramus @Meyerweb @hi_mayank I'm curious too, need to do some sleuthing.
This clearly wants to be a custom element, right? No shadow dom required, and the progressive enhancement story is "just add color". A perfect use-case.
|
5 comments
@hi_mayank @mia @bramus @Meyerweb just trying to get my head around it - looks like key JS requirement is creating and registering the text ranges - and to do this requires a start an end "position" - so presumably you could "tokenise" somewhere other than the client as long as you shipped this big list of number pairs and types with each code example? Would maybe assume that with a large number of code examples it is very quickly less bytes to do it all clientside though - just thinking aloud…  @mia @Meyerweb @hi_mayank Ooh, good idea. Would be possible indeed :) |
@mia @bramus @Meyerweb
these docs might help you understand the tokens: https://prismjs.com/docs/Prism.html#.tokenize
https://prismjs.com/docs/Token.html
and then you plug the token positions into ranges (and the token types and ranges into highlights): https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API#create_ranges