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

[cderv]

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

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

<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]

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

pagedown/inst/resources/js/hooks.js

Lines 166 to 171 in 6f27778

	beforeParsed(content) {
	const anchors = content.querySelectorAll('.toc a, .lof a, .lot a');
	for (const a of anchors) {
	a.innerHTML = a.innerHTML + '<span class="leaders"></span>';
	}
	}

This gets apply on the <a> in code chunks (added for Pandoc line numbering) and our CSS will apply

pagedown/inst/resources/css/default.css

Lines 61 to 66 in 6f27778

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

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