Quarto

— Creating documents —

Why html documents?

• Easy to share and host online (for instance through GitHub)
• Better accessibility than PDF
• Fast with little extra hassle
• Basic interactivity possible

Divs and Spans

Divs

Add classes, attributes, and other identifiers to content using Divs and Span in [Callout Blocks].

::: {.border}
This content can be styled with a border
:::

<div class="border">
  <p>This content can be styled with a border</p>
</div>

Divs start with a fence containing at least three consecutive colons plus some attributes. The attributes may optionally be followed by another string of consecutive colons. The Div ends with another line containing a string of at least three consecutive colons. The Div should be separated by blank lines from preceding and following blocks. Divs may also be nested. For example

Divs

::::: {#special .sidebar}

::: callout-warning
## This is a warning block

That can be used for extra emphasis
:::

More content.
:::::

<div class="callout-caption-container flex-fill">
  This is a warning block
</div>
<div class="callout-body-container callout-body">
  <p>That can be used for extra emphasis</p>
</div>

Fences without attributes are always closing fences. Unlike with fenced code blocks, the number of colons in the closing fence need not match the number in the opening fence. However, it can be helpful for visual clarity to use fences of different lengths to distinguish nested divs from their parents.

css and filters

• Style documents with css (cascading style sheets)

• Particularly useful with divs and spans for special styling

• See the Pandoc documentation on Divs and Spans for additional details.

Go to RStudio

• File > New File > Quarto Document
• Have a look at its components
• Render
• Render on save
• Run chunk by chunk
• Alter chunk code to see difference

Exercise

1. Write a little bit about your self. A sentence or two about your background and education.

2. Create a list in your document, listing your favourite foods, at least the top three. Render it.

3. Make the list ordered. Render it.

10:00

Yaml

• Most html options can be controlled via yaml

• Most options come under the html format tag

• be careful of indentation, it matters!

---
title: "My document"
author: "My name"
date: 2022-10-26
format:
  html:
    toc: true
    toc-depth: 2
    toc-title: Contents
    html-math-method: katex
    css: styles.css
    anchor-sections: true
    smooth-scroll: true
    code-fold: true
    code-summary: "Show the code"
    code-overflow: wrap
    css: styles.css
---

Go to RStudio

• Add Table Of Contents (toc)
• Alter output format
• Switch back to html format

Exercise

1. Change the title of the Table of Contents.
2. Change the location of the Table of Contents.
3. Turn off Anchored sections, what did that do?
4. Turn on smooth-scroll, what did that do?

10:00

Go to RStudio

• Show visual editor shortcuts and inserts
• Start adding penguins stuff
• Show silencing setup chunk

Exercise

1. Add a call out block with a tip about your favourite drink
2. Add a horizontal rule below the call out block.
3. What does it look like when you add a comment
   1. to a code chunk
   2. in the text part of the document.

10:00

Break

05:00

Cross-references

Cross-references

Type	Label Prefix
Figures	fig-
Tables	tbl-
Equations	eq-
Sections	sec-
Code listing	lst-
Theorem	thm-

When adding cross-references, its important to have in mind the prefixes necessary to make the cross-referencing work. Thankfully, these are fairly straight forward, but still do require some cognitive load on our part to learn them.

Go to RStudio

• Add cross-refs to tabs and figs

Exercise

1. Take a screenshot of something on your screen, and add the image to your document.
2. Give the image a caption, and reference it in a piece of text.

10:00

Have a look at Figure 1.

Figure 1: Counter screenshot

Citation

Adding citations

• Can be added via insert -> citation

  • Brings up the UI
  • The UI can help you find refs, in addition to adding them to the doc.

• Can also be added directly with @

• References are stored in bibtex files in your project

Citation control

Markdown Format	Output (author-date format)
Blip blop bloop [see @biswal2010, pp. 33-35; also @ggseg, chap. 1]	Blip blop bloop [see Biswal et al. (2010), pp. 33-35; also , chap. 1]
Blip blop bloop [@biswal2010, pp. 33-35, 38-39 and passim]	Blip blop bloop (Biswal et al. 2010, 33–35, 38–39 and passim)
Blip blop bloop [@ggseg; @biswal2010].	Blip blop bloop (Mowinckel and Vidal-Piñeiro 2019; Biswal et al. 2010).
Mowinckel says blah [-@ggseg]	Mowinckel says blah (2019)
@biswal2010 says bloop.	Biswal et al. (2010) says bloop.

yaml settings

• control file name containing the bibliography
• control citation style with csl file
  • CSL directory
  • Zotero style search

---
bibliography: references.bib
csl: nature.csl
---

Currently, only Zotero is supported as a connected reference manager.

Redirect reference generation

::: {#refs}
:::

References

Biswal, Bharat B., Maarten Mennes, Xi-Nian Nian Zuo, Suril Gohel, Clare Kelly, Stephen M. Smith, Christian F. Beckmann, et al. 2010. “Toward Discovery Science of Human Brain Function.” Proceedings of the National Academy of Sciences of the United States of America 107 (10): 4734–39. https://doi.org/0911855107 [pii];10.1073/pnas.0911855107 [doi].

Mowinckel, Athanasia M., and Didac Vidal-Piñeiro. 2019. “Visualisation of Brain Statistics with r-Packages Ggseg and Ggseg3d.”

Go to RStudio

• Show the insert citation tool

• Search for doi 10.1177/2515245920928009

• Search pubmed

Exercise

1. Add a citation to an important paper in your field searching for its DOI
2. Cite it in text using three different ways of controlling citation appearance
   1. standard
   2. extra page information
   3. year only

10:00

Lunch

60:00

PDF

Very controlled by yaml

---
title: "My document"
format:
  pdf:
    toc: true
    toc-depth: 2
    toc-title: Contents
    number-sections: true
    colorlinks: true
    keep-tex: true
---

Go to RStudio

• Change html document to pdf
• Try to render
• What are differences?

Exercise

1. Add some headers, what does that do?
2. Add section numbering, what does that do?

10:00

Break

05:00

Presentations

Formats

• revealjs — reveal.js (HTML)

• pptx — PowerPoint (MS Office)

• beamer — Beamer (LaTeX/PDF)

Slides are made by adding headlines

---
title: "9 to 5"
author: "Dolly Parton"
format: revealjs
---

# Tumble out of bed 

- I stumble to the kitchen
- Pour myself a cup of ambition
- yawn and stretch and try to come to life

## Jump in the shower 

- the blood starts pumpin'
- Out on the street
- the traffic starts jumpin'

Or adding horizontal rules (no header)

---
title: "9 to 5"
author: "Dolly Parton"
format: revealjs
---

# Tumble out of bed 

- I stumble to the kitchen
- Pour myself a cup of ambition
- yawn and stretch and try to come to life

---

- Jump in the shower 
- the blood starts pumpin'
- Out on the street
- the traffic starts jumpin'

Go to RStudio

• use html document as basis, convert to revealjs
• render
• start adapting to make slides
• show tabset

Exercise

1. Adapt the remaining of the document so that you have distinct slides for all content
2. Make a slide without a header
3. Make a slide with two columns of content

10:00

Break

05:00

Getting more help

• Awesome quarto - Curated list of Quarto talks and websites

• Quarto tag - RStudio Community

• rOpenSci community

Athanasia Monika Mowinckel

Athanasia Monika Mowinckel

• Staff scientist /
  Research Software Engineer at LCBC-UiO
• PhD in cognitive psychology
  
• Software Carpentry &
  RStudio tidyverse Instructor
  
• R-Ladies Oslo &
  R-Ladies Global team