|
Top-level
 @Meyerweb @hi_mayank Sorry, not yet. My typical flow is hack it together, put it on socials, and then maybe later write about it. What could help you better understand is to console.log(tokens) right after Prism has done its thing. MDN might also have some good info (I'm afk right now, so can't check) 6 comments
 @mia @bramus @Meyerweb 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 @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 :) |
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.