Exercises

Exercise 1: Customising Quarto outputs

Create a Quarto document which outputs to HTML format.
Include some text and a code block (in a programming language of your choice).
Edit the YAML to use one of the Bootswatch themes. See quarto.org/docs/output-formats/html-themes.html for options.
Further edit the YAML to change the linkcolor.
Bonus: edit other YAML options to customise further.

Solution

exercise1.qmd

---
title: "Exercise 1"
format:
  html:
    theme: morph
    linkcolor: orange
---

## Quarto

Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see <https://quarto.org>.

## Running Code

When you click the **Render** button a document will be generated that includes both content and the output of embedded code. You can embed code like this:

```{r}
1 + 1
```

You can add options to executable code like this 

```{r}
#| echo: false
2 * 2
```

The `echo: false` option disables the printing of code (only output is displayed).

Exercise 2: Using style files

Create a styles.scss file.
Add the styles.scss file to the YAML options in your Quarto file.
Create some CSS variables and write some simple CSS rules in the styles.scss file.

Solution

exercise2.qmd

---
title: "Exercise 2"
format:
  html:
    theme: [default, styles.scss]
---

## Quarto

Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see <https://quarto.org>.

## Running Code

When you click the **Render** button a document will be generated that includes both content and the output of embedded code. You can embed code like this:

```{r}
1 + 1
```

You can add options to executable code like this 

```{r}
#| echo: false
2 * 2
```

The `echo: false` option disables the printing of code (only output is displayed).

styles.scss

/*-- scss:defaults --*/

// Body
$body-bg: #FAFAFA;
$link-color: #75AADB;

// Code blocks
$code-block-bg: #e2edf7;

/*-- scss:rules --*/

.title {
  font-family: $font-family-monospace;
}

Exercise 3: Styling with Quarto extensions

Install the LCARS template by Michael McCarthy using quarto add mccarthy-m-g/quarto-lcars-theme.
Edit the YAML of your .qmd file to use the extension. See github.com/mccarthy-m-g/quarto-lcars-theme for more information.
Re-render your document.
Bonus: browse the Awesome Quarto list and choose a different extension: github.com/mcanouil/awesome-quarto

Solution

Run:

quarto add mccarthy-m-g/quarto-lcars-theme

exercise3.qmd

---
title: "Exercise 3"
format:
  lcars-html: default
---

## Quarto

Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see <https://quarto.org>.

## Running Code

When you click the **Render** button a document will be generated that includes both content and the output of embedded code. You can embed code like this:

```{r}
1 + 1
```

You can add options to executable code like this 

```{r}
#| echo: false
2 * 2
```

The `echo: false` option disables the printing of code (only output is displayed).

Exercise 4: Building your own Quarto extension

Create an _extensions folder in the same directory as your .qmd file.
Create another folder inside the _extensions for your extension e.g. PrettyHTML.
Move your styles.scss file from Exercise 2 into the PrettyHTML folder.
Create an _extension.yml file in the PrettyHTML folder.
Write the YAML code specifying the extension title, author name, version number, and contribution (HTML format with the styles.scss styling).
Edit the YAML in the .qmd file to use this extension.

Solution

exercise4.qmd

---
title: "Exercise 4"
format: PrettyHTML-html
---

## Quarto

Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see <https://quarto.org>.

## Running Code

When you click the **Render** button a document will be generated that includes both content and the output of embedded code. You can embed code like this:

```{r}
1 + 1
```

You can add options to executable code like this 

```{r}
#| echo: false
2 * 2
```

The `echo: false` option disables the printing of code (only output is displayed).

_extensions/PrettyHTML/_extension.yml

title: PrettyHTML
author: Nicola Rennie
version: 0.0.1
contributes:
  formats: 
    html:
      theme: [default, styles.scss]

_extensions/PrettyHTML/styles.scss

/*-- scss:defaults --*/

// Body
$body-bg: #FAFAFA;
$link-color: #75AADB;

// Code blocks
$code-block-bg: #e2edf7;

/*-- scss:rules --*/

.title {
  font-family: $font-family-monospace;
}