rstudio / pagedown

Paginate the HTML Output of R Markdown with CSS for Print
https://pagedown.rbind.io
Other
894 stars 127 forks source link

Some dots (leaders) appearing in code chunk when LOF is on #305

Open cderv opened 1 year ago

cderv commented 1 year ago

Just noticed that while testing other things

---
title: "A Multi-page HTML Document"
author: "Yihui Xie and Romain Lesur"
date: "`r Sys.Date()`"
output:
  pagedown::html_paged:
    self_contained: false
lof: true # insert a list of figures
---

Some text 

```{r, echo = TRUE, fig.cap = 'A very simple plot'}
plot(1)

It renders to 
![image](https://user-images.githubusercontent.com/6791940/210334444-6060ba72-8a5f-4e8c-9fbc-7216a6eecad0.png)

See the dots in the code chunk. It seems to be there only when `lof: true` 

in term of HTML code, it seems to be some specific spans to be added 
````html
<span class="leaders" data-ref="638399fd-56b6-4f00-9825-2e2876f74cb3"></span>

With special CSS rule

.toc .leaders::before, .lot .leaders::before, .lof .leaders::before {
    float: left;
    width: 0;
    white-space: nowrap;
    content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
}

Maybe only some CSS to fix but I suspect this <span> should not be there 🤔

All HTML structure where the leaders is included

<div class="sourceCode" id="cb1" data-ref="8feff7c5-66d1-4ca1-afb0-c2a189c98a01" data-id="cb1">
<pre class="sourceCode r" data-ref="2b7650e6-2c53-4bd3-ad0e-e0f8ce89af48">
<code class="sourceCode r" data-ref="95de5dfd-a9b9-456b-a211-0e18a3d580d8">
    <span id="cb1-1" data-ref="e83e1f45-7c3c-43cf-84fb-1716dadc8ee4" data-id="cb1-1">
        <a href="#cb1-1" aria-hidden="true" tabindex="-1" class="front-matter-ref" data-ref="83470006-3cbd-408c-9ce4-5ec2d2430d33" data-target-counter-94e21eb6-5dfe-4962-a96f-bb48a10b2ee8="c1cb6527-fb25-48ac-b2af-65cd775e04f7" data-target-counter-16687274-d56d-4f70-ba97-72f31638b2eb="726e4965-99b2-4d16-ab33-2c079f4f933a">
            <span class="leaders" data-ref="638399fd-56b6-4f00-9825-2e2876f74cb3"></span>
        </a>
        <span class="fu" data-ref="f202ea8a-6049-40f1-af57-1bb987f036d2">plot</span>(<span class="dv" data-ref="a2ff31d2-96bc-450e-bc17-7eb9eb2c861b">1</span>)
    </span>
</code>
</pre>
</div>
cderv commented 1 year ago

I believe this is just because some missing first headers which makes this JS code adds the span

https://github.com/rstudio/pagedown/blob/6f27778df1acf592206a5a06d01ced04b2d2e0d1/inst/resources/js/hooks.js#L166-L171

This gets apply on the <a> in code chunks (added for Pandoc line numbering) and our CSS will apply https://github.com/rstudio/pagedown/blob/6f27778df1acf592206a5a06d01ced04b2d2e0d1/inst/resources/css/default.css#L61-L66

We should probably see if newer paged.js still have this hooks, and if so add some CSS specific to handle this Pandoc feature , or some JS to remove those span in code blocks.

Pretty rare situation I believe though...