HTML Workhorse

quarto.org/docs/reference/formats/html

Quarto and RMarkdown

• Basic RMarkdown documents that render to static HTML and PDF are the most transferable directly to Quarto

title: "My Document"
output:
  html_document:
    toc: true
    number_sections: true
    css: styles.css

title: "My Document"
format:
  html:
    toc: true
    number-sections: true
    css: styles.css

Static documents

• A static document is your “daily driver” - has the power for a complex table of contents, figure alignment, control of ouptut/code, and other niceties
• Useful as a lab notebook, scratchpad, or the final output for your team

Table of contents and Sections

Table of contents (ToC) and sections are useful for breaking up longer documents.

• Quarto will automatically build a ToC for level 3 headers and above but you can control this with:

toc-depth: 4

or

toc-depth: 2

Table of Contents and Section

Tabsets

Split up and flip between sections of a page, alternative to just two columns

::: {.panel-tabset}

## Element 1

## Element 2

:::

Tabsets

```{r}
#| eval: false
head(mtcars)
```

                   mpg cyl disp  hp drat    wt  qsec vs am gear carb
Mazda RX4         21.0   6  160 110 3.90 2.620 16.46  0  1    4    4
Mazda RX4 Wag     21.0   6  160 110 3.90 2.875 17.02  0  1    4    4
Datsun 710        22.8   4  108  93 3.85 2.320 18.61  1  1    4    1
Hornet 4 Drive    21.4   6  258 110 3.08 3.215 19.44  1  0    3    1
Hornet Sportabout 18.7   8  360 175 3.15 3.440 17.02  0  0    3    2
Valiant           18.1   6  225 105 2.76 3.460 20.22  1  0    3    1

Tabsets

::: {.panel-tabset}

## Code

```{r}
#| echo: fenced
#| eval: false
head(mtcars)
```


## Output

```{r}
#| eval: true
#| echo: false
head(mtcars)
```

:::

Footnotes

You can create inline footnotes like so: some inline text with a^[footnote]

Cross-references

![Howard is glamorous](images/howard-glamour.jpg){#fig-glamour}

The presence of the caption (Howard is glamouros) and label (#fig-howard) make this figure referenceable. This enables you to use the following syntax to refer to it elsewhere in the document

Reference popups

If you hover your mouse over the citation and footnote in this sentence you’ll see a popup displaying the reference contents:

format:
  html:
    citations-hover: true
    footnotes-hover: true

For example, did you know that Howard is a dog^[Specifically he is a Boston Terrier, although sometimes he acts like a cat]?

Hide all code

format: html
execute:
  echo: false

#| echo: true

Fold code

format:
  html:
    code-fold: true
    code-summary: "Hidden code"

#| code-fold: true
#| code-summary: "Hidden code"

Code tools

format:
  html:
    code-fold: true
    code-tools: true

Code tools, source

For example, here we specify that we want only “View Source” (no toggling of code visibility) and no caption on the code menu:

format:
  html: 
    code-tools:
      source: true
      toggle: false
      caption: none

Code tools, source repo

In some situations (especially for longer documents), you may prefer to send viewers to the source code on a version-control website rather than the built in viewer.

format:
  html: 
    code-tools:
      source: https://github.com/quarto-dev/quarto-web/blob/main/index.md

Code highlighting

Full highlighting options

library(dplyr)
mtcars |> 
  group_by(cyl, am) |> 
  summarize(mean = mean(mpg), n = n(), .groups = "drop")

# A tibble: 6 × 4
    cyl    am  mean     n
  <dbl> <dbl> <dbl> <int>
1     4     0  22.9     3
2     4     1  28.1     8
3     6     0  19.1     4
4     6     1  20.6     3
5     8     0  15.0    12
6     8     1  15.4     2

Code highlighting

format: 
  html:
    highlight-style: dracula
    code-block-border-left: "#4f6952"

Code highlighting

format: 
  html:
    highlight-style: github
    code-block-border-left: "#4f6952"
    code-block-bg: true

Code linking with downlit

The goal of downlit is to provide syntax highlighting and automatic linking of R code

format:
  html:
    code-link: true

HTML Appearance

Out of the box, Quarto is styled with Bootstrap 5 and opinionated defaults.

Bootstrap is the most popular CSS Framework for responsive websites, where v5 is the latest.

---
format:
  html:
    theme: litera
---

---
format:
  html:
    theme: 
      - litera
      - custom.scss
---

Bootswatch themes

Bootswatch: lumen

Bootswatch: litera

Bootswatch: flatly

Bootswatch: sketchy

CSS

CSS = Cascading Style Sheets:

CSS is a language for specifying how documents are presented to users — how they are styled, laid out, etc mdn web docs

<div style="color: red; font-size: 100px;">Some text</div>

@import url('https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap');

Inline css

:::{style="color: white; font-size: 150px; background-color:#d3d3d3;"}
Text
:::

Some text with [dplyr code]{style="font-family: 'Fira Mono !important'; background-color:#d3d3d3;"} and more text.

CSS Class

.big-text {
  font-size: 150px;
  color: blue;
}

::: {.big-text}
- Big text
- Still big
:::

- Smol text

• Smol text

Class + spans

Here is some [big text]{.big-text} and some small text.

Here is some big text and some small text.

CSS Id

#blue {
  background-color: #3c6f9a;
  color: #fa551b;
}

::: {#blue}
Some content
:::

Some [text]{#blue}

SCSS/SASS

SASS (Syntactically Awesome Style Sheets) is a pre-processor scripting language that will be compiled or interpreted into CSS. SassScript is itself a scripting language whereas SCSS is the main syntax for the SASS which builds on top of the existing CSS syntax

$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;

/* use the variables */
.main-header {
  background-color: $primary_1;
}

.menu-left {
  background-color: $primary_2;
}

.menu-right {
  background-color: $primary_3;
}

SASS variables + Quarto

format: PDF

TIP! - pandoc divs/spans are generally transferrable - CSS is not transferable - Lean on Quarto/Pandoc tooling and then reach for raw CSS/LaTeX