qmd-lab / closeread

https://closeread.dev
MIT License
130 stars 5 forks source link

Code highlighting: Lua or JS? #30

Closed andrewpbray closed 5 months ago

andrewpbray commented 5 months ago

@jimjam-slam While thinking through how to build the code-highlighting feature, I took a look at the HTML produced by revealjs.

Screenshot 2024-06-04 at 4 09 59 PM

The separate of each line of code into (labeled) spans makes it pretty easy to assign the highlight-line class to particular lines and then has-highlights to the wrapping code tag. It got me wondering: should this be implemented in Lua or JS? 🤔

The Lua approach would seem to be:

  1. Copy the relevant code block into a new code block and assign it it's own cr-id (say: penguins-plot-hl-1).
  2. Affix the classes to the appropriate block or inline elements.

The JS approach would just be to modify the existing DOM, adding and removing those classes when necessary.

The only advantage that I can see to the Lua approach is that if we wanted, we could later extend it to do something helpful if the author wanted a non-interactive version of the page (either static html or pdf). The advantage of the JS approach is that it keeps the DOM a bit leaner (we're not duplicating blocks) and it makes it possible to think of closeread more like closereadjs - a JS library that could be used independently of Quarto.

Thoughts?

jimjam-slam commented 5 months ago

Mmmm, good question! One potential reason to go for JS is that we know we won't mess with any of Quarto's treatment of the code block — if it's Lua and there's code block processing happening after, that could break.

andrewpbray commented 5 months ago

Ah, good point!

jimjam-slam commented 5 months ago

That said, Quarto does offer a lot of control over Lua filter execution timing now!

andrewpbray commented 5 months ago

I chatted with Christoph at the Quarto office hours about this. Learned a lot and came down on the side of JS.