Details breaks code formatting

[llrs]

Many thanks for maintaining and developing this package! It has been very useful for my presentations and workshops.

I would like to use details for my slides to show code people could run but not evaluate it. When I use it the code block inside slides it breaks the code formatting and seems to be formatted as latex.

I'm not sure why this happens (sorry don't know how to check and debug this) and #219 doesn't work on this as I don't evaluate the code and the code block is displayed directly.

---
title: "Presentation Ninja"
subtitle: "⚔<br/>with xaringan"
author: "Yihui Xie"
institute: "RStudio, PBC"
date: "2016/12/12 (updated: `r Sys.Date()`)"
output:
  xaringan::moon_reader:
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

 <details><summary>Details</summary>
Code in details:

```r
if (!requireNamespace("package", quiet = TRUE)) {
  stop("We need this package")
}
package::function()
```

 </details>


---

<details><summary>Details</summary>
Code in details:

```{r eval=FALSE}
if (!requireNamespace("package", quiet = TRUE)) {
  stop("We need this package")
}
package::function()
```

</details>

Example of the output:

I'm tied to R 3.6.3 for the project so I haven't tested it on newer versions of R.

R version 3.6.3 (2020-02-29)
Platform: x86_64-pc-linux-gnu (64-bit)
Running under: Ubuntu 20.04.3 LTS, RStudio 1.4.1717

Locale:
  LC_CTYPE=en_US.UTF-8       LC_NUMERIC=C               LC_TIME=es_ES.UTF-8        LC_COLLATE=en_US.UTF-8    
  LC_MONETARY=es_ES.UTF-8    LC_MESSAGES=en_US.UTF-8    LC_PAPER=es_ES.UTF-8       LC_NAME=C                 
  LC_ADDRESS=C               LC_TELEPHONE=C             LC_MEASUREMENT=es_ES.UTF-8 LC_IDENTIFICATION=C       

Package version:
  base64enc_0.1.3  digest_0.6.28    evaluate_0.14    fastmap_1.1.0    glue_1.4.2       graphics_3.6.3   grDevices_3.6.3 
  highr_0.9        htmltools_0.5.2  httpuv_1.6.3     jquerylib_0.1.4  jsonlite_1.7.2   knitr_1.36       later_1.3.0     
  magrittr_2.0.1   methods_3.6.3    mime_0.12        promises_1.2.0.1 R6_2.5.1         Rcpp_1.0.7       rlang_0.4.11    
  rmarkdown_2.11   servr_0.23       stats_3.6.3      stringi_1.7.5    stringr_1.4.0    tinytex_0.34     tools_3.6.3     
  utils_3.6.3      xaringan_0.22.1  xfun_0.26        yaml_2.2.1     

---

By filing an issue to this repo, I promise that

• I have fully read the issue guide at https://yihui.org/issue/.
• I have provided the necessary information about my issue.
  • If I'm asking a question, I have already asked it on Stack Overflow or RStudio Community, waited for at least 24 hours, and included a link to my question there.
  • If I'm filing a bug report, I have included a minimal, self-contained, and reproducible example, and have also included xfun::session_info('xaringan'). I have upgraded all my packages to their latest versions (e.g., R, RStudio, and R packages), and also tried the development version: remotes::install_github('yihui/xaringan').
  • If I have posted the same issue elsewhere, I have also mentioned it in this issue.
• I have learned the Github Markdown syntax, and formatted my issue correctly.

I understand that my issue may be closed if I don't fulfill my promises.

[yihui]

I guess you can't mix Markdown code into raw HTML tags. You have to use pure Markdown syntax like the examples in #219.

[cderv]

I think this is indeed not supported by remark.js (gnab/remark#531) and we have encounter this already I think (but I can't find the related issue).

You would need to either produce pure markdown as mentioned. You may need to adapt the JS code to make it work in your case though.

You could also produce HTML code directly but that maybe trickier because I am not sure what the html code could exactly be:

---
title: "Presentation Ninja"
subtitle: "⚔<br/>with xaringan"
author: "Yihui Xie"
institute: "RStudio, PBC"
date: "2016/12/12 (updated: `r Sys.Date()`)"
output:
  xaringan::moon_reader:
    nature:
      highlightStyle: github
      highlightLines: true
---

```{r, include = FALSE}
library(htmltools)
```

```{r, echo = FALSE}
tags$details(
  tags$summary("Details"), 
  "Code in details:",
  tags$pre(tags$code(
    'if (!requireNamespace("package", quiet = TRUE)) {
  stop("We need this package")
}
package::function()',
  class = "r"
)))
```

I would have advice the details R package to help (https://github.com/yonicd/details) but it will produce some fenced div code block.

The JS solution could be the better IMO. Just need a bit of adaptation

It is a fun JS exercice ! and not too hard if you start from #219 solution.

One solution if you don't want to try...

---
title: "Presentation Ninja"
subtitle: "⚔<br/>with xaringan"
author: "Yihui Xie"
institute: "RStudio, PBC"
date: "2016/12/12 (updated: `r Sys.Date()`)"
output:
  xaringan::moon_reader:
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

```{js, echo = FALSE}
(function() {
  var details = document.querySelectorAll(".details");
  details.forEach(function (e) {
    e.outerHTML = "<details><summary>Details</summary>" +
      e.innerHTML + "</details>";
  })
})();
```


.details[
Code in details:
```r
if (!requireNamespace("package", quiet = TRUE)) {
  stop("We need this package")
}
package::function()
```
]

[llrs]

I thought that ```r was pure markdown, but it still doesn't work.
I briefly tried to modify the code on #219 but hadn't managed to make it work. Thanks for providing the JS solution!

[yihui]

Yes, ```r is pure Markdown, but <details> is not (it's HTML).

[gadenbuie]

To add a little more background: the underlying issue here is that remarkjs sets the markedjs option pendantic: true, which, according to the markedjs docs

pedantic: If true, conform to the original markdown.pl as much as possible. Don't fix original markdown bugs or behavior. Turns off and overrides gfm.

which is, incidentally, at odds with remarkjs setting gfm: true earlier in the markedjs options.

Regardless, the short version of this story is that the pedantic setting severely restricts the markdown features available in remarkjs. As described in the original (pedantic) Daring Fireball: Markdown Syntax Documentation:

Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style *emphasis* inside an HTML block.

And since the details element is a block-level tag, the markdown content within it is not processed.