Quarto tips

Embedding resources

Quarto often saves the “look and feel” of your report (themes, table options, navigation, etc.) in a separate folder next to the .html file. If you have included extra stylings and only upload the .html and not the folder, Canvas can’t find those resources — so your report shows up plain and unstyled.

The easiest fix is to tell Quarto to embed all of those resources directly into the .html file. That way, everything you need (styles, scripts, images) is packaged together in one file, and your report will look the same wherever you upload it.

To do this, add the following line in your YAML header (the section at the very top of your .qmd):

format: 
  html: 
    embed-resources: true

For example, here’s a complete YAML:

---
title: "My Quarto Document"
author: "Your Name"
format: 
  html: 
    theme: minty
    embed-resources: true
    toc: true
---

Getting the YAML right

Getting the YAML right can be tricky at the beginning – here are some rules to follow:

Start and end with three dashes
A YAML block always begins and ends with --- (or just ends when the code starts).
```
---
title: "My Report"
author: "Student Name"
format: html
---
```
Use spaces, never tabs
YAML does not allow tabs. Indent with spaces only.
- Standard convention: two spaces per level of indentation.
- Example (correct):
```
format:
  html:
    theme: minty
```
Consistent indentation
Items under the same parent (like under html:) must be indented the same amount. Mixing 2 spaces and 4 spaces will break it.
Key-value pairs with a colon
Each setting is written as key: value.
```
title: "Final Lab Report"
toc: true
```
Quotes for special characters or long strings
If your title or text has a colon, apostrophe, or starts with a number, wrap it in quotes:
```
title: "Report: Final Results"
subtitle: "Kim's Analysis"
```
Lists use dashes (-)
For multiple values (e.g. multiple themes or files), start each item with a dash.
```
format:
  html:
    theme: 
      - minty
      - styles.css
```
Case matters
YAML is case-sensitive. Write true/false in lowercase, not True/False.