Examples

This section includes code for the examples shown. These may differ slightly from the examples shown in the live demonstration.

Example 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 the darkly Bootswatch themes.
Further edit the YAML to change the monobackgroundcolor.

See example

example1.qmd

---
title: "Example 1"
format:
  html:
    theme: darkly
    monobackgroundcolor: "#A0A1A2"
---

## 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).

Example 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.
- Change the text colour to #000080.
- Add a left border to code blocks with colour #FE019A.
- Underline the title with a #FE019A coloured line.

See example

example2.qmd

---
title: "Example 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-color: #000080;

// Code blocks
$code-block-border-left: #FE019A;

/*-- scss:rules --*/

.title {
  text-decoration: underline;
  text-decoration-color: $code-block-border-left;
}

Example 3: Styling with Quarto extensions

Install the PrettyPDF template by Nicola Rennie using quarto add nrennie/PrettyPDF.
Edit the YAML of the .qmd file to use the extension.
Re-render the document.

See example

Run:

quarto add nrennie/PrettyPDF

example3.qmd

---
title: "Example 3"
format: PrettyPDF-pdf
---

## 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).

Example 4: Building your own Quarto extension

Create an _extensions folder in the same directory as your .qmd file. (You may already have one from Exercise 3).
Create another folder inside the _extensions folder with a name that will be the name of your extension e.g. PrettyHTML.
Move your styles.scss file from Example 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
- contribution (HTML format with the styles.scss styling)
Edit the YAML in the .qmd file to use this extension.

See example

example4.qmd

---
title: "Example 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-color: #000080;

// Code blocks
$code-block-border-left: #FE019A;

/*-- scss:rules --*/

.title {
  text-decoration: underline;
  text-decoration-color: $code-block-border-left;
}