r - R markdown HTML文件中自定义和 react 图形的编号标题

Question

近年来，可以在 html_document2 中的 R block 上的图形标题中添加编号。 , 如 bookdown 谢一辉的在线文本中所述.但是，在保留这些编号的同时还要从这些 block 中输出自定义数字变得更加困难。例如，尝试使用 Carson Sievert 的 online text 中的 CSS flexbox 创建自定义图形。 .
还有其他几个讨论 numbering HTML Rmd figures 的线程并使用 hooks或 CSS 计数器来添加自定义编号。但是，我找不到允许自定义图形以及 html_document2 的解决方案。要保留的编号。
在下面的示例中，我希望一个并排的绘图图形能够对屏幕大小作出 react ，但也具有相同的图形标题和编号。

---
output: 
  bookdown::html_document2:
    self-contained: TRUE
---

```{css, echo=FALSE}
#dualpanel {
  width: 50%
}

@media screen and (max-width: 500px) {
  #dualpanel {
    width: 100%
  }}
```
```{r chunk1, echo=FALSE, htmlcap='FIRST FIGURE CAP'}
temp <- plotly::plot_ly(mtcars, x = ~cyl, y=~mpg)
shiny::div(class = 'figure',
  style = "display: flex; flex-wrap: wrap; justify-content: center",
  shiny::div(temp, id = 'dualpanel'), 
  shiny::div(temp, id = 'dualpanel'))
```

```{r chunk2,  echo=FALSE, fig.cap='SECOND FIGURE CAP'}
plot(mtcars$cyl, mtcars$mpg)
```

这将创建如下输出:

Answer 1

为了解决这个问题，重要的是要知道 knitr在 pandoc 中使用 #fig:label 以在输出中创建自动编号。当您检查来自 knitr 进程的 markdown 临时输出时，您可以看到这一点:

<div class="figure">
<img src="web_tiles_v2_files/figure-html/otherchunk-1.png" alt="SECOND FIGURE CAP"  />
<p class="caption">(\#fig:SPECIFICCHUNKOFINTEREST)SECOND FIGURE CAP</p>
</div>

因此，应该能够通过调整在其他解决方案中看到的自定义 Hook 来维护自定义图形输出。这将如下所示，只需确保包含正确的 block 标签:

```{r}
knit_hooks$set(customcap= function(before, options, envir) {
  if(!before) {
    paste('<p class="caption"> (\\#fig:chunk1)',options$customcap,"</p>",sep="")
    }
    })
```

也可以使用一些内部的 knitr自动抓取 fig.lp的功能和 label : paste('<p class="caption">', knitr:::create_label(options$fig.lp, options$label), options$customcap,"</p>", sep="") 整个代码如下所示:

---
output: 
  bookdown::html_document2:
    self-contained: TRUE
---

```{css, echo=FALSE}
#dualpanel {
  width: 50%
}

@media screen and (max-width: 500px) {
  #dualpanel {
    width: 100%
}}
```

```{r}
knit_hooks$set(customcap= function(before, options, envir) {
  if(!before) {
    paste('<p class="caption"> (\\#fig:chunk1)',options$customcap,"</p>",sep="")
    }
    })
```


```{r chunk1, echo=FALSE, customcap='FIRST FIGURE CAP'}
temp <- plotly::plot_ly(mtcars, x = ~cyl, y=~mpg)
shiny::div(class = 'figure',
  style = "display: flex; flex-wrap: wrap; justify-content: center",
  shiny::div(temp, id = 'dualpanel'), 
  shiny::div(temp, id = 'dualpanel'))
```

```{r chunk2,  echo=FALSE, fig.cap='SECOND FIGURE CAP'}
plot(mtcars$cyl, mtcars$mpg)
```

这会产生一个具有动态元素并保持标签的输出。