Email or username:

Password:

Forgot your password?
Bramus's posts Post Back to profile
Top-level
Mia

@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.

16 February at 3:35 | Wall-to-wall | Open on front-end.social
5 comments
Mayank replied to Mia

@mia @bramus @Meyerweb
these docs might help you understand the tokens: prismjs.com/docs/Prism.html#.t
prismjs.com/docs/Token.html

and then you plug the token positions into ranges (and the token types and ranges into highlights): developer.mozilla.org/en-US/do

16 February at 3:42 | Open on hachyderm.io
Jon replied to Mayank

@hi_mayank @mia @bramus @Meyerweb is Prism essential in producing these tokens or can other JS highlighters (highlight.js etc.) produce these too?

17 February at 20:09 | Open on mastodon.social
Mayank replied to Jon

@scrwd @mia @bramus @Meyerweb you can use anything you want. the custom highlight api doesn't care

17 February at 20:10 | Open on hachyderm.io
Jon replied to Mayank

@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…

17 February at 21:50 | Open on mastodon.social
Bramus replied to Mia

@mia @Meyerweb @hi_mayank Ooh, good idea. Would be possible indeed :)

16 February at 4:02 | Open on front-end.social
Go Up