R markdown HTML文件中自定义和反应图形的编号标题答案

【问题标题】：Numbered captions on customized and reactive figure in R markdown HTML fileR markdown HTML文件中自定义和反应图形的编号标题
【发布时间】：2020-06-22 16:20:20
【问题描述】：

近年来，已经可以在html_document2 的 R 块上的图形标题中添加编号，正如谢益辉的在线文本bookdown 中所述。然而，在保留这些编号的同时还要从这些块中输出自定义数字变得更加困难。例如，尝试使用来自 Carson Sievert 的 online text 的 CSS flexbox 创建自定义图形。

还有几个其他线程讨论了numbering HTML Rmd figures 并使用hooks 或CSS 计数器来添加自定义编号。但是，我找不到允许保留自定义图形以及 html_document2 编号的解决方案。

在下面的示例中，我希望一个并排的绘图图形能够对屏幕大小做出反应，但也具有相同的图形标题和编号。

---
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)
```

这会产生这样的输出：

【问题讨论】：

标签： r r-markdown knitr

【解决方案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>

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

```{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)
```

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

【讨论】：