.figure and .table inherit the .box styles now

yihui · Dec 26, 2024 · f004c43 · f004c43
1 parent 85eed64
commit f004c43
Show file tree

Hide file tree

Showing 13 changed files with 51 additions and 29 deletions.
diff --git a/docs/01-start.Rmd b/docs/01-start.Rmd
@@ -16,7 +16,7 @@ For those who are familiar with R Markdown, you can think of the function
 the conversion process from R Markdown to a target format.
 
 ```{mermaid}
-#| fuse-flow, echo = FALSE, fig.env = '.figure .box',
+#| fuse-flow, echo = FALSE,
 #| fig.cap = 'A diagram illustrating how **litedown** converts R Markdown documents to target output formats.'
 
 flowchart LR
@@ -104,7 +104,7 @@ A computational document contains both text narratives and code for computing.
 together.
 
 ```{mermaid}
-#| flow-concepts, echo = FALSE, fig.env = '.figure .box',
+#| flow-concepts, echo = FALSE,
 #| fig.cap = 'An illustration of the structure of a computational document and how its components are split, computed, and merged.'
 flowchart TD
   O@{ shape: lin-doc, label: "Input document" }--"crack()"--> A@{ shape: f-circ } -.-o B[[YAML]]
@@ -156,7 +156,7 @@ After all code has been executed, the output blocks will be merged to a Markdown
 document, which can be further rendered to a target output format such as HTML
 and LaTeX.
 
-:::: {#fig:humpty-dumpty .figure .box}
+:::: {#fig:humpty-dumpty .figure}
 ![Humpty
 Dumpty](https://upload.wikimedia.org/wikipedia/commons/b/b2/Humpty_Dumpty_1_-_WW_Denslow_-_Project_Gutenberg_etext_18546.jpg)
 

diff --git a/docs/02-fuse.Rmd b/docs/02-fuse.Rmd
@@ -274,7 +274,7 @@ actual output but for illustration only).
 }
 ```
 
-::::: {#fig:attr-structure .figure .box}
+::::: {#fig:attr-structure .figure}
 ::: {.attr-blocks .fenced-chunk}
 ``` {.md .open-fence .code-fence}
 :::: {.chunk}
@@ -448,7 +448,7 @@ in the input of the hash will lead to a change in the hash value, which in turn
 invalidates the old cache and creates new cache.
 
 ```{mermaid}
-#| flow-cache, echo = FALSE, fig.env = '.figure .box',
+#| flow-cache, echo = FALSE,
 #| fig.cap = 'The cache (in)validation process.'
 
 flowchart TD
@@ -553,7 +553,7 @@ placed below figures, and table captions are placed above tables.
 @tab:tab-bottom shows an example of a table caption at the bottom.
 
 ```{{r}}
-#| tab-bottom, cap.pos = 'bottom', tab.env = '.table .box',
+#| tab-bottom, cap.pos = 'bottom',
 #| tab.cap = 'A table caption at the bottom via `cap.pos = "bottom"`.'
 head(cars, 4)
 ```
@@ -1153,7 +1153,7 @@ Options to control the formatting include:
 To make it easier to read the numbers in the Markdown table above, we render the
 table to @tab:inline-numbers:
 
-:::: {.table .box}
+:::: table
 ::: caption
 [ ](#@tab:inline-numbers) Inline numbers formatted with different `signif` and
 `power` options.
@@ -1200,7 +1200,7 @@ Both `#'` and `#|` comments are optional. If no `#'` or `#|` comments are found
 in the script, the whole script will be treated as a single code chunk.
 
 ```{mermaid}
-#| flow-sieve, echo = FALSE, fig.env = '.figure .box',
+#| flow-sieve, echo = FALSE,
 #| fig.cap = 'An illustration of how scripts are rendered.'
 flowchart TD
   O@{ shape: lin-doc, label: "Input script" }--"sieve()"--> A@{ shape: f-circ } -.-o B[["#' YAML"]]

diff --git a/docs/04-mark.Rmd b/docs/04-mark.Rmd
@@ -512,7 +512,7 @@ URLs. The shorthand syntax is as follows (`*` stands for
     values contain slashes) will be converted to
     `*/combine/path-1/to/file-1,path-2/to/file-2`.
 
-:::: {.table .box}
+:::: table
 ::: caption
 [ ](#@tab:at-syntax) The `@` syntax for using jsdelivr resources in the `css`
 variable.

diff --git a/docs/05-assets.Rmd b/docs/05-assets.Rmd
@@ -54,7 +54,7 @@ Another way is to enable embedding `https` resources (@sec:embed-resources).
 
 ```{r}
 #| assets, echo = FALSE, print.args = I(list(limit = Inf)),
-#| tab.env = '.table .box .no-ref-label',
+#| tab.env = '.table .no-ref-label',
 #| tab.cap = 'A reference of CSS/JS assets in the `lite.js` repository.'
 a = litedown:::assets
 for (i in c('css', 'js')) a[, i] = ifelse(is.na(a[, i]), NA, paste0('`', a[, i], '`'))
@@ -82,6 +82,30 @@ You can call `fuel()` multiple times in a document to keep adding assets.
 
 ## The default CSS {#sec:default}
 
+The default stylesheet defines the basic styles of the document body, lists,
+code, figures, tables, block quotes, TOC, links, and cross-references, etc. For
+example, the maximum width for the body is set to 800px. If you want to override
+it, you can provide your own stylesheet, e.g.,
+
+``` css
+body {
+  max-width: 1000px;
+}
+```
+
+The default CSS is included when no `css` is provided in the YAML metadata. You
+can use either `@default` or `default` to apply the default CSS.
+
+``` yaml
+css: ["@default"]
+# or
+css: ["default"]
+```
+
+The former uses the jsdelivr resource and will not be embedded in HTML by
+default. The latter points to the `default.css` shipped with the **litedown**
+package, and will always be embedded.
+
 ## Copy buttons {#sec:copy-button}
 
 Normally you would have to select the text before copying it, and copy buttons
@@ -563,7 +587,7 @@ e.g.,
 
 ```` md
 ```{r}
-#| sunspots, fig.dim = c(14, 4), fig.env = '.fullwidth .figure .box',
+#| sunspots, fig.dim = c(14, 4), fig.env = '.fullwidth .figure',
 #| fig.cap = 'Monthly mean relative sunspot numbers from 1749 to 1983.'
 par(mar = c(4, 4, .1, .1), bg = 'lightyellow', fg = 'red', las = 1)
 plot(sunspots, col = 'red')

diff --git a/docs/07-site.Rmd b/docs/07-site.Rmd
@@ -202,7 +202,7 @@ which contains the following `.Rmd` files (explained in @tab:pkg-site):
 list.files('../site/', '[.]Rmd$')
 ```
 
-:::: {.table .box}
+:::: table
 ::: caption
 [ ](#@tab:pkg-site) Explanations of site source files.
 :::

diff --git a/docs/index.Rmd b/docs/index.Rmd
@@ -189,7 +189,7 @@ $$\mathrm{litedown} = \min{\{R\}} + \{D_i\} - \{D_e\} + \{J\}$$
 -   $J$ = Lightweight [vanilla JS/CSS](https://github.com/yihui/lite.js)
 
 ```{mermaid}
-#| scope-litedown, echo = FALSE, fig.env = '.figure .box',
+#| scope-litedown, echo = FALSE,
 #| fig.cap = 'A minimal partial re-implementation of the R Markdown ecosystem as **litedown**.'
 classDiagram
   class litedown {
@@ -235,7 +235,7 @@ classDiagram
 ```
 
 ```{mermaid}
-#| scope-rmarkdown, echo = FALSE, fig.env = '.figure .box',
+#| scope-rmarkdown, echo = FALSE,
 #| fig.cap = 'A set of core packages in the R Markdown ecosystem. `R-dep()`
 #|  stands for recursive R package dependencies (with their numbers), `sys-dep`
 #|  stands for system dependencies, and `web-dep` stands for CSS/JS dependencies.'

diff --git a/examples/001-minimal.Rmd b/examples/001-minimal.Rmd
@@ -1,11 +1,11 @@
 ---
-title: The area of a circle
+title: Area of a circle
 ---
 
-Define the radius of a circle as `x`:
+Define the radius as `x`:
 
 ```{r}
 x = 1 + 1
 ```
 
-The area of the circle with a radius of `{r} x` is `{r} pi * x^2`.
+When the radius is `{r} x`, the area will be `{r} pi * x^2`.
diff --git a/examples/001-minimal.md b/examples/001-minimal.md
@@ -1,11 +1,11 @@
 ---
-title: The area of a circle
+title: Area of a circle
 ---
 
-Define the radius of a circle as `x`:
+Define the radius as `x`:
 
 ``` {.r}
 x = 1 + 1
 ```
 
-The area of the circle with a radius of 2 is 12.6.
+When the radius is 2, the area will be 12.6.
diff --git a/examples/009-option-figure-decoration.Rmd b/examples/009-option-figure-decoration.Rmd
@@ -13,7 +13,6 @@ Place two plots side by side via the `width` attribute:
 #| chunk-a, attr.plot = 'width="45%"',
 #| fig.alt = c('a histogram', 'a sunflower plot'),
 #| fig.cap = 'Exploring the faithful dataset.',
-#| fig.env = '.figure .box'
 
 hist(faithful$eruptions, main = '', border = 'white')
 sunflowerplot(faithful)

diff --git a/examples/009-option-figure-decoration.md b/examples/009-option-figure-decoration.md
@@ -14,7 +14,7 @@ hist(faithful$eruptions, main = '', border = 'white')
 sunflowerplot(faithful)
 ```
 
-:::: {.figure .box #fig:chunk-a}
+:::: {.figure #fig:chunk-a}
 ![a histogram](<009-option-figure-decoration__files/chunk-a-1.png>){width="45%"}
 ![a sunflower plot](<009-option-figure-decoration__files/chunk-a-2.png>){width="45%"}
 

diff --git a/examples/018-option-table.Rmd b/examples/018-option-table.Rmd
@@ -7,7 +7,6 @@ See @tab:simple.
 <!-- ... -->
 
 ```{r}
-#| simple, tab.env = '.table .box',
-#| tab.cap = 'First 3 rows of the `cars` data.',
+#| simple, tab.cap = 'First 3 rows of the `cars` data.',
 head(cars, 3)
 ```
diff --git a/examples/018-option-table.md b/examples/018-option-table.md
@@ -10,7 +10,7 @@ See @tab:simple.
 head(cars, 3)
 ```
 
-:::: {.table .box #tab:simple}
+:::: {.table #tab:simple}
 
 ::: {.caption}
 [](#@tab:simple)

diff --git a/inst/resources/default.css b/inst/resources/default.css
@@ -14,8 +14,8 @@ pre, img { max-width: 100%; }
 pre { white-space: pre-wrap; word-break: break-word; }
 pre code { display: block; padding: 1em; overflow-x: auto; }
 code { font-family: 'DejaVu Sans Mono', 'Droid Sans Mono', 'Lucida Console', Consolas, Monaco, monospace; }
-:not(pre) > code, code[class], .box > .caption { background-color: #f8f8f8; }
-pre > code:is(:not([class]), .language-plain, .language-none), .box { background-color: inherit; border: 1px solid #eee; }
+:not(pre) > code, code[class], div > .caption { background-color: #f8f8f8; }
+pre > code:is(:not([class]), .language-plain, .language-none), .box, .figure, .table { background-color: inherit; border: 1px solid #eee; }
 pre > code {
   &.message { border-color: #9eeaf9; }
   &.warning { background: #fff3cd; border-color: #fff3cd; }
@@ -28,8 +28,8 @@ pre > code {
   border-left: 2px solid;
   &:hover { opacity: inherit; }
 }
-.box, table { margin: 1em auto; }
-.box > .caption { padding: 1px 1em; }
+.box, .figure, .table, table { margin: 1em auto; }
+div > .caption { padding: 1px 1em; }
 .figure { p:has(img), pre:has(svg) { text-align: center; } }
 .flex-col { display: flex; justify-content: space-between; }
 table {