`highlight()` output is missing per-line `<span>`

This was first report in https://github.com/rstudio/distill/issues/418, as distill_article() is using downlit by default.

In short, downlit is doing the highlighting instead of Pandoc but applies the classes expected by Pandoc. However the resulting structure is different, and this conflict with the CSS inserted by Pandoc. Especially, Pandoc's expect Div > pre > code > on span by line of code > spans for highlighted element.

highlight(..., classes = classes_pandoc()) currently does not create a span per line of code like Pandoc. From details shared in https://github.com/rstudio/distill/issues/418#issuecomment-958955609

for input

```{r}
configural_model <- '
  # Measurement model
  w1comp =~ w1vst1 + w1vst2 + w1vst3
    w2comp =~ w2vst1 + w2vst2 + w2vst3
'


Downlit will output 

````html
<span class="va">configural_model</span> <span class="op">&lt;-</span> <span class="st">'
  # Measurement model
  w1comp =~ w1vst1 + w1vst2 + w1vst3
  w2comp =~ w2vst1 + w2vst2 + w2vst3
'</span>

But pandoc will produced

<span id="cb1-1">configural_model <span class="ot">&lt;-</span> <span class="st">'</span></span>
<span id="cb1-2"><span class="st">  # Measurement model</span></span>
<span id="cb1-3"><span class="st">  w1comp =~ w1vst1 + w1vst2 + w1vst3</span></span>
<span id="cb1-4"><span class="st">    w2comp =~ w2vst1 + w2vst2 + w2vst3</span></span>
<span id="cb1-5"><span class="st">'</span></span>

However, Pandoc will insert some CSS for highlighting. e.g in the case of the issue mentioned https://github.com/jgm/skylighting/blob/87d7b35731d634b9a629b23f6e06a76cf1a0c1d7/skylighting-core/src/Skylighting/Format/HTML.hs#L185

pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }

the display inline-block is causing formatting issue;

it should apply on <span> after <code> only, which are supposed to be the spans for each line, and not the ones holding the highlighting classes.

I could probably deal with that on a per-format basis, to tweak the CSS, but this will need to be done with any HTML format that uses Pandoc's CSS.

It seems last changed in evaluate_and_highlight() from https://github.com/r-lib/downlit/pull/96 will add a span for each line of a class r-in. This would be compatible with Pandoc.

There is also a probabily that downlit support in distill should be done differently that it is now. It was done early and may need some adjustment (it is done using a knitr hook for now)

r-lib / downlit

`highlight()` output is missing per-line `<span>` #122