Theorem environment not rendering or cross-referencing in distill

Question

I'm trying to write a distill::distill_article blogpost which requires the use of LaTeX math environments eg theorem, lemma, proof etc.

I have tried to follow these instructions and also these instructions but am unable to render the theorem environments whether using LaTeX blocks or rmarkdown blocks.

I also note that a similar question was asked about specifically using distill::distill_article in bookdown . This fix did not work either. Note that my use-case is to use the bookdown theorem environments inside distill::distill_article, not the other way around.

Here is a reprex for the issue:

---
title: "Test Title"
description: |
  Test description
author: Test author
date: 2021-12-31
output:
  distill::distill_article:
    self_contained: false
---


```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(bookdown)
```

# TL;DR;

Trying to ensure that theorem environments are working in 
`distill::distill_article`.

# Main theorems

With the definitional background established, let's move onto the
main theorem of this article.

\begin{align} 
g(X_{n}) &= g(\theta)+g'({\tilde{\theta}})(X_{n}-\theta) \notag \\
\sqrt{n}[g(X_{n})-g(\theta)] &= g'\left({\tilde{\theta}}\right)
  \sqrt{n}[X_{n}-\theta ] (\#eq:align)
\end{align} 

<!-- # This  does not work, i.e., render in html -->
\begin{theorem}[Delta Method]\label{nthm:deltamethod}
g(X_{n}) &= g(\theta)+g'({\tilde{\theta}})(X_{n}-\theta) \notag \\
\sqrt{n}[g(X_{n})-g(\theta)] &= g'\left({\tilde{\theta}}\right)
  \sqrt{n}[X_{n}-\theta ] (\#eq:align)
\end{theorem} 

<!-- # This reference does not work, i.e., is not recognized -->
We have a labeled and named theorem below, and \@ref(nthm:deltamethod).

<!-- # This  does not work either, i.e., render in html -->
::: {.theorem #pythagoras name="Pythagorean theorem"}
For a right triangle, if $c$ denotes the length of the hypotenuse
and $a$ and $b$ denote the lengths of the other two sides, we have

$$a^2 + b^2 = c^2$$
:::

<!-- # This reference does not work either, i.e., is not recognized -->
We have a labeled and named theorem below, and \@ref(thm:pythagoras).

Note that I loaded bookdown in the rmarkdown, with the intent of rendering the theorem environments. It does not work however, ie the theorems or the cross-references are not rendered. Could anyone please help resolve this issue?

Session info

 ─ Session info ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── setting value version R version 4.1.2 (2021-11-01) os macOS Monterey 12.0.1 system x86_64, darwin17.0 ui RStudio language (EN) collate en_US.UTF-8 ctype en_US.UTF-8 tz America/New_York date 2022-01-02 ─ Packages ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── package * version date lib source assertthat 0.2.1 2019-03-21 [1] standard (@0.2.1) backports 1.2.1 2020-12-09 [1] standard (@1.2.1) bookdown * 0.24 2021-09-02 [1] CRAN (R 4.1.0) broom 0.7.10 2021-10-31 [1] CRAN (R 4.1.0) cachem 1.0.5 2021-05-15 [1] standard (@1.0.5) cellranger 1.1.0 2016-07-27 [1] standard (@1.1.0) cli 3.1.0 2021-10-27 [1] CRAN (R 4.1.0) clipr 0.7.1 2020-10-08 [1] standard (@0.7.1) colorspace 2.0-2 2021-06-24 [1] standard (@2.0-2) crayon 1.4.1 2021-02-08 [1] standard (@1.4.1) DBI 1.1.1 2021-01-15 [1] standard (@1.1.1) dbplyr 2.1.1 2021-04-06 [1] standard (@2.1.1) desc 1.4.0 2021-09-28 [1] CRAN (R 4.1.0) details 0.2.1 2020-01-12 [1] CRAN (R 4.1.0) digest 0.6.27 2020-10-24 [1] standard (@0.6.27) distill 1.3 2021-10-13 [1] CRAN (R 4.1.0) downlit 0.4.0 2021-10-29 [1] CRAN (R 4.1.0) dplyr * 1.0.7 2021-06-18 [1] standard (@1.0.7) ellipsis 0.3.2 2021-04-29 [1] standard (@0.3.2) evaluate 0.14 2019-05-28 [1] standard (@0.14) fansi 0.5.0 2021-05-25 [1] standard (@0.5.0) fastmap 1.1.0 2021-01-25 [1] standard (@1.1.0) forcats * 0.5.1 2021-01-27 [1] CRAN (R 4.1.0) fs 1.5.2 2021-12-08 [1] CRAN (R 4.1.0) generics 0.1.0 2020-10-31 [1] standard (@0.1.0) ggplot2 * 3.3.5 2021-06-25 [1] standard (@3.3.5) glue 1.4.2 2020-08-27 [1] standard (@1.4.2) gtable 0.3.0 2019-03-25 [1] standard (@0.3.0) haven 2.4.1 2021-04-23 [1] standard (@2.4.1) hms 1.1.0 2021-05-17 [1] standard (@1.1.0) htmltools 0.5.1.1 2021-01-22 [1] standard (@0.5.1.1) httr 1.4.2 2020-07-20 [1] standard (@1.4.2) jsonlite 1.7.2 2020-12-09 [1] standard (@1.7.2) knitr 1.37 2021-12-16 [1] CRAN (R 4.1.0) lifecycle 1.0.0 2021-02-15 [1] standard (@1.0.0) lubridate 1.7.10 2021-02-26 [1] standard (@1.7.10) magrittr 2.0.1 2020-11-17 [1] standard (@2.0.1) memoise 2.0.0 2021-01-26 [1] standard (@2.0.0) modelr 0.1.8 2020-05-19 [1] standard (@0.1.8) munsell 0.5.0 2018-06-12 [1] standard (@0.5.0) pillar 1.6.1 2021-05-16 [1] standard (@1.6.1) pkgconfig 2.0.3 2019-09-22 [1] standard (@2.0.3) png 0.1-7 2013-12-03 [1] standard (@0.1-7) purrr * 0.3.4 2020-04-17 [1] standard (@0.3.4) R6 2.5.0 2020-10-28 [1] standard (@2.5.0) Rcpp 1.0.7 2021-07-07 [1] CRAN (R 4.1.0) readr * 1.4.0 2020-10-05 [1] standard (@1.4.0) readxl 1.3.1 2019-03-13 [1] standard (@1.3.1) reprex 2.0.1 2021-08-05 [1] CRAN (R 4.1.0) rlang 0.4.11 2021-04-30 [1] standard (@0.4.11) rmarkdown 2.11 2021-09-14 [1] CRAN (R 4.1.0) rprojroot 2.0.2 2020-11-15 [1] standard (@2.0.2) rstudioapi 0.13 2020-11-12 [1] CRAN (R 4.1.0) rvest 1.0.0 2021-03-09 [1] standard (@1.0.0) scales 1.1.1 2020-05-11 [1] standard (@1.1.1) sessioninfo 1.1.1 2018-11-05 [1] standard (@1.1.1) stringi 1.6.2 2021-05-17 [1] standard (@1.6.2) stringr * 1.4.0 2019-02-10 [1] standard (@1.4.0) tibble * 3.1.2 2021-05-16 [1] standard (@3.1.2) tidyr * 1.1.3 2021-03-03 [1] standard (@1.1.3) tidyselect 1.1.1 2021-04-30 [1] standard (@1.1.1) tidyverse * 1.3.1 2021-04-15 [1] CRAN (R 4.1.0) utf8 1.2.2 2021-07-24 [1] CRAN (R 4.1.0) vctrs 0.3.8 2021-04-29 [1] standard (@0.3.8) withr 2.4.2 2021-04-18 [1] standard (@2.4.2) xfun 0.29 2021-12-14 [1] CRAN (R 4.1.0) xml2 1.3.2 2020-04-23 [1] standard (@1.3.2) yaml 2.2.1 2020-02-01 [1] standard (@2.2.1) [1] /Library/Frameworks/R.framework/Versions/4.1/Resources/library

Answer 1

Add this after the YAML and then the method between ::: will work:

<style>
.theorem{
  display: block;
  font-style: italic;
}
.theorem::before{
  content:"Theorem. ";
  font-weight: bold; 
  font-style: normal;
}
.theorem[name]::before{
  content: "Theorem (" attr(name) ") ";
}
</style>

::: {.theorem name="Pythagorean theorem"}
For a right triangle, if $c$ denotes the length of the hypotenuse
and $a$ and $b$ denote the lengths of the other two sides, we have
$$a^2 + b^2 = c^2$$
:::

If you would like to be able to refer via hyperlink to the theorem, you can use href , like this:

If you want to refer to your theorem, you can do it. Considering the <a href="#Pythagorean theorem"> Pythagorean theorem </a> , there should be a way to link it.`

Answer 2

I didn't work through all of them, but here is one for Lemma. This uses two classes: lemma and lemmaS. When you use the class lemma, it changes the whole number, when you use lemmaS it increments the decimal. This method can be applied to all of the different types of blocks for formulas.

The updated styles:

<style>
h1 {
  counter-reset: lemma;
}
h2 {
  counter-reset: lemmaS;
}
.lemma, .lemmaS, .theorem { /* updated to add two types of lemma */
  display: block;
  font-style: italic;
}
.lemma:first-of-type::before, 
.lemmaS:first-of-type::before {
  counter-set: lemma 1;
}
.theorem::before{
  content:"Theorem. ";
  font-weight: bold; 
  font-style: normal;
}
.theorem[name]::before{
  content: "Theorem (" attr(name) ") ";
}
.lemma::before {    /* This will increment by whole numbers: 1, 2, 3 */
  counter-increment: lemma; 
  content: "Lemma " counter(lemma) "." counter(lemmaS);
  font-weight: bold;
  font-style: normal;
}
.lemmaS::before {   /* This will increment by decimals numbers: 2.1, 2.2 */
  counter-increment: lemmaS;
  content: "Lemma " counter(lemma) "." counter(lemmaS) " ";
  font-weight: bold;
  font-style: normal;
}
</style>

The code, using h1 or # to reset the whole number; <h2> or ## to reset the decimal.

# TL;DR;

::: {.theorem name="Pythagorean theorem"}
For a right triangle, if $c$ denotes the length of the hypotenuse
and $a$ and $b$ denote the lengths of the other two sides, we have
$$a^2 + b^2 = c^2$$
:::

<div class="lemma" name="pythag">
For a right triangle, if $c$ denotes the length of the hypotenuse
and $a$ and $b$ denote the lengths of the other two sides, we have
$$a^2 + b^2 = c^2$$
</div>

<div class="lemmaS" name="YetAnotherPythag">
For a right triangle, if $c$ denotes the length of the hypotenuse
and $a$ and $b$ denote the lengths of the other two sides, we have
$$a^2 + b^2 = c^2$$
</div>

## Tell me about lemmas

<div class="lemma" name="andMore">
For a right triangle, if $c$ denotes the length of the hypotenuse
and $a$ and $b$ denote the lengths of the other two sides, we have
$$a^2 + b^2 = c^2$$
</div>

Looking at this as I type it, I've thought of a few ways that would make this cleaner...but I just want it out there working, I'm sure there is a way to only use one class of lemma. using headings to signify when to increment the whole number, Either way. this should get you there with the other options, If you don't want numbers, use the theorem setup. just change the word theorem to the word you want to see, If you want to number them. change the word lemma to the word you want to appear, If you want all of the above. append the names in CSS.

For example, to use numbering, but add Corollary- you can append where the words "Content" aren't used, where "Content" is used, copy and change the word:

.corrolary, 
.lemma, 
.lemmaS, 
.theorem {    /* updated to add two types of lemma */
  display: block;
  font-style: italic;
}
.corollary::before{. /* Copy of .theorem, updated for Corollary */
  content:"Corollary. ";
  font-weight: bold; 
  font-style: normal;
}

Answer 3

bookdown feature can be used with other single format using the base_format argument as described in bookdown.org/yihui/bookdown/a-single-document.html

If all bookdown 's feature is not 100% compatible with distill format, the theorem and proof handling should be. So this will work:

---
title: "Test Title"
description: |
  Test description
author: Test author
date: 2021-12-31
output:
  bookdown::html_document2:
    self_contained: false
    base_format: distill::distill_article
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

# TL;DR;

Trying to ensure that theorem environments are working in `distill::distill_article`.

::: {#pythagoras .theorem name="Pythagorean theorem"}
For a right triangle, if $c$ denotes the length of the hypotenuse and $a$ and $b$ denote the lengths of the other two sides, we have

$$a^2 + b^2 = c^2$$
:::

We have a labeled and named theorem below, and \@ref(thm:pythagoras).

You would get the same HTML rendering as in bookdown.

See issue on Github for more context: https://github.com/rstudio/distill/issues/433