Quarto

This is a Quarto document.

1 Text formatting

1.1 Headings

## Level 2 heading
### Level 3 heading
#### Level 4 heading
##### Level 5 heading
###### Level 6 heading

1.2 Character sizes

Custom text sizes are provided by this template.

Markdown	Rendered
`[Largest text]{.largest}`	Largest text
`[Larger text]{.larger}`	Larger text
`[Large text]{.large}`	Large text
Normal text	Normal text
`[Small text]{.small}`	Small text
`[Smaller text]{.smaller}`	Smaller text
`[Smallest text]{.smallest}`	Smallest text

1.3 Character styles

Markdown	Rendered
`__Bold text__`	Bold text
`_Italic text_`	Italic text
`~~Strikethrough~~`	~~Strikethrough~~
`H~2~O`	H₂O
`x^2^`	x²
`--`	–
`---`	—
`[link](https://example.com/)`	link
`{{< kbd Shift-Ctrl-P >}}`	Shift-Ctrl-P

1.4 Blockquote

> This is a block quote. This
> paragraph has two lines.
>
> 1. This is a list inside a block quote.
> 2. Second item.

This is a block quote. This paragraph has two lines.

This is a list inside a block quote.

Second item.

1.5 Line block

A line block preserves spaces and line breaks.

| This
|     block
|          preserves
|                   formatting

This
    block
         preserves
                  formatting

1.6 Rule

A horizontal line can be created using three or more * or -.

***

1.7 Footnote

An example of a footnote reference.¹

1.8 Aside

[This content lives in the right margin]{.aside}

This content lives in the right margin

1.9 Buttons

Here is how buttons are defined:

[button]{.btn} button
[button]{.btn .btn-primary} button
[button]{.btn .btn-secondary} button
[button]{.btn .btn-tertiary} button

Button sizes

[button]{.btn .btn-xs} button
[button]{.btn .btn-sm} button
[button]{.btn} button
[button]{.btn .btn-lg} button

Links inside buttons

[[link](https://example.com/)]{.btn} link
[[link](https://example.com/)]{.btn .btn-primary} link
[[link](https://example.com/)]{.btn .btn-secondary} link
[[link](https://example.com/)]{.btn .btn-tertiary} link

1.10 Badge

Here is how badges are defined:

[badge]{.badge} badge
[badge]{.badge .badge-primary} badge
[badge]{.badge .badge-secondary} badge
[badge]{.badge .badge-tertiary} badge

Links inside badges.

[[link](https://example.com/)]{.badge .badge-primary} link
[[link](https://example.com/)]{.badge .badge-secondary} link
[[link](https://example.com/)]{.badge .badge-tertiary} link

2 Code formatting

Verbatim code is text formatted in a monospaced font and intended to be read as code. Inline verbatim code is enclosed in backticks, so `date()` renders as date().

Verbatim code can also be placed in fenced code blocks.

```
date()
```

date()

Source code, that is, code that is syntax-highlighted or executed in a Quarto document, is not covered here in this document.

3 Lists

3.1 Unordered

Unordered lists are created using dashes.

- Bullet 1
- Bullet 2
  - Sub-bullet 2.1
  - Sub-bullet 2.2
- Bullet 3

Bullet 1
Bullet 2
- Sub-bullet 2.1
- Sub-bullet 2.2
Bullet 3

3.2 Ordered

Ordered lists are created using numbers.

1. Point 1
2. Point 2
3. Point 3

Point 1
Point 2
Point 3

3.3 Multiple lists

::: {}
1. Point 1
2. Point 2
:::

::: {}
1. Point 1
2. Point 2
:::

Point 1
Point 2

Point 1
Point 2

4 Bootstrap

Bootstrap provides many built-in utility classes. Here are some examples:

[lOwerCase]{.text-lowercase} lOwerCase
[lOwerCase]{.text-uppercase} lOwerCase
[lOwerCase]{.text-capitalize} lOwerCase
[lOwerCase]{.fs-2} lOwerCase
[lOwerCase]{.fw-bold} lOwerCase
[lOwerCase]{.fw-bolder} lOwerCase
[lOwerCase]{.fw-light} lOwerCase
[lOwerCase]{.fw-lighter} lOwerCase
[lOwerCase]{.fst-italic} lOwerCase
[lOwerCase]{.text-muted} lOwerCase
[lOwerCase]{.text-decoration-underline} lOwerCase
[lOwerCase]{.text-decoration-line-through} lOwerCase

5 Images

Images can be inserted using Markdown or HTML. In Markdown, Quarto attributes can control image properties. With the project’s lightbox: auto setting, clicking an image opens it in a lightbox.

5.1 Using Markdown

Using regular Markdown.

![](assets/image.webp)

By default, an image uses its actual size, constrained by the available width. You can change its displayed dimensions as shown below.

![This is a caption](assets/image.webp){width=30%}

This image is now 30% of the available width.

5.1.1 Figure layout

::: {#fig-mylabel layout-ncol=2}
![Caption for figure 1](assets/image.webp){width="40%" fig-align="center"}

![Caption for figure 2](assets/image.webp){width="40%" fig-align="center"}

These figures are interesting.
:::

More figure options and layouts are described here. Cross-referencing is described here.

Here are some Bootstrap styles:

![](assets/image.webp){width="20%" class="shadow-sm rounded"}

![](assets/image.webp){width="20%" class="shadow rounded"}

![](assets/image.webp){width="20%" class="shadow-lg rounded-pill"}

5.2 Using HTML

The image below is displayed at 30% width.
<img src="assets/image.webp" style="width:30%;"/>

For more information on figures, see here. Images generated through code are not covered here.

6 Math expressions

Some examples of rendering equations.

$e^{i\pi} + 1 = 0$

\(e^{i\pi} + 1 = 0\)

$$\frac{E \times X^2 \prod I}{2+7} = 432$$

\[\frac{E \times X^2 \prod I}{2+7} = 432\]

$$\sum_{i=1}^n X_i$$

\[\sum_{i=1}^n X_i\]

$$\int_0^{2\pi} \sin x~dx$$

\[\int_0^{2\pi} \sin x~dx\]

$\left( \sum_{i=1}^{n}{i} \right)^2 = \left( \frac{n(n+1)}{2}\right)^2 = \frac{n^2(n+1)^2}{4}$

\(\left( \sum_{i=1}^{n}{i} \right)^2 = \left( \frac{n(n+1)}{2}\right)^2 = \frac{n^2(n+1)^2}{4}\)

$$\begin{aligned} X &\sim \mathrm{N}(0,1), \quad Y \sim \chi^2_{n-p}, \quad X \perp Y\\ R &\equiv \frac{X}{\sqrt{Y/(n-p)}} \sim t_{n-p} \end{aligned}$$

\[\begin{aligned} X &\sim \mathrm{N}(0,1), \quad Y \sim \chi^2_{n-p}, \quad X \perp Y\\ R &\equiv \frac{X}{\sqrt{Y/(n-p)}} \sim t_{n-p} \end{aligned}\]

$$\begin{aligned} \mu &= \mathbb{E}[X], \quad k > 0,\\ P(|X-\mu| > k) &= P(|X-\mu|^2 > k^2)\\ &\leq \frac{\mathbb{E}[|X-\mu|^2]}{k^2}\\ &= \frac{\mathrm{Var}(X)}{k^2} \end{aligned}$$

\[\begin{aligned} \mu &= \mathbb{E}[X], \quad k > 0,\\ P(|X-\mu| > k) &= P(|X-\mu|^2 > k^2)\\ &\leq \frac{\mathbb{E}[|X-\mu|^2]}{k^2}\\ &= \frac{\mathrm{Var}(X)}{k^2} \end{aligned}\]

7 Tables

For simple cases, tables can be manually created in Markdown.

|speed|dist|
|-----|----|
|4    |   2|
|4    |  10|
|7    |   4|

speed	dist
4	2
4	10
7	4

Table captions and numbering can be added as follows:

|speed|dist|
|-----|----|
|4    |   2|
|4    |  10|
|7    |   4|

: These are exciting results. {#tbl-mylabel}

Table 1: These are exciting results.

speed	dist
4	2
4	10
7	4

Tables can also be generated through code, which is not covered here.

7.1 Margin table

A table placed in the margin.

::: {.column-margin}

| speed | dist |
|-------|------|
| 4     | 2    |
| 4     | 10   |
| 7     | 4    |

:::

speed	dist
4	2
4	10
7	4

See the tables documentation for more information.

7.2 Cross-referencing

Figures and tables can be numbered by adding an identifier beginning with fig- or tbl-, such as {#tbl-mylabel}. Reference it with @tbl-mylabel, which renders as Table 1.

8 Icons

8.1 Bootstrap Icons

Bootstrap Icons are available in Quarto HTML documents that use a Bootstrap-based theme. The Quarto bsicons extension provides a shortcode interface.









8.2 Font Awesome

To use Font Awesome icons with shortcodes, install the Quarto fontawesome extension.

Icons can be placed using shortcodes.

{{< fa lightbulb >}}
{{< fa exclamation >}}
{{< fa clipboard-list >}}
{{< fa comments >}}
{{< fa desktop >}}
{{< fa cloud >}}
{{< fa check >}}
{{< fa times >}}
{{< fa skull >}}
{{< fa skull size=2x >}}
{{< fa brands github >}}
{{< fa brands youtube >}}

Icons can be displayed using the HTML  tag. Note that not all icons may work.

Here is a calendar and a couch.

Here is a calendar and a couch.

There are many other Quarto extensions for icons, such as academicons, iconify, and lordicons.

For a full list of icons, see Font Awesome.

9 Callouts

Callout blocks draw attention to specific information. Quarto provides five types: note, tip, caution, warning, and important.

::: {.callout-note}
Use notes for supplementary context that does not require the reader to take action. This should be the default for most things.
:::

::: {.callout-tip}
Use tips for optional advice that can make a task easier or more efficient.
:::

::: {.callout-caution}
Use cautions when an action could have unwanted consequences that the reader should consider first.
:::

::: {.callout-warning}
Use warnings for actions that could cause mistakes, data loss, or other significant problems.
:::

::: {.callout-important}
Use important callouts for essential information the reader must understand before continuing.
:::

Note

Use notes for supplementary context that does not require the reader to take action. This should be the default for most things.

Tip

Use tips for optional advice that can make a task easier or more efficient.

Caution

Use cautions when an action could have unwanted consequences that the reader should consider first.

Warning

Use warnings for actions that could cause mistakes, data loss, or other significant problems.

Important

Use important callouts for essential information the reader must understand before continuing.

Callout variations.

::: {.callout-tip collapse="true"}
## Collapsible callout

This content is inside a collapsible callout.
:::

Collapsible callout

This content is inside a collapsible callout.

Simple appearance

::: {.callout-note appearance="simple"}
This is a callout with a simple appearance.
:::

This is a callout with a simple appearance.

Minimal appearance

::: {.callout-note appearance="minimal"}
This is a callout with a minimal appearance.
:::

This is a callout with a minimal appearance.

10 Alerts

Alerts are Bootstrap components, not Quarto callouts.

::: {.alert .alert-primary}
**Note:** This is an alert!
:::
::: {.alert .alert-secondary}
**Note:** This is an alert!
:::
::: {.alert .alert-success}
**Note:** This is a success alert!
:::
::: {.alert .alert-danger}
**Note:** This is a danger alert!
:::
::: {.alert .alert-warning}
**Note:** This is a warning alert!
:::
::: {.alert .alert-info}
**Note:** This is an info alert!
:::

Note: This is an alert!

Note: This is a success alert!

Note: This is a danger alert!

Note: This is a warning alert!

Note: This is an info alert!

11 Layout

11.1 Span

[Content inside span]{style="background-color: gray"}

Content inside span

11.2 Div

::: {style="background-color: gray"}
Content inside div
:::

Content inside div

Divs can be nested like this:

:::: {.class}
::: {.class}
:::
::::

Both spans and divs support attributes in this specific order: identifiers, classes, and then key-value attributes.

[Content inside span]{#id .class key1="val1" key2="val2"}

11.3 Hidden div

::: {.hidden}
Hidden content
:::

11.4 Conditional content

::: {.content-visible when-format="html"}
Will only appear in HTML.
:::

::: {.content-hidden when-format="html"}
Will not appear in HTML.
:::

Conditional content is documented here.

11.5 Inner columns

Organization of content into columns within the body container.

:::: {.columns}
::: {.column style="background-color: aliceblue"}
Content in left column.
:::
::: {.column style="background-color:  #f5b7b1"}
Content in right column.
:::
::::

Content in left column.

Content in right column.

This is an example of nested columns.

:::: {.columns}

::: {.column style="background-color: aliceblue"}
Content in left column.
:::

::: {.column}
Content in right column.

:::: {.columns}
::: {.column style="background-color: #d0ece7"}
Nested left.
:::
::: {.column style="background-color: #f2d7d5"}
Nested right.
:::
::::

:::

::::

Content in left column.

Content in right column.

Nested left.

Nested right.

11.6 Outer columns

Extending content outside the body container.

::: {.column-body style="background-color: lightgray; margin-bottom:0.5em;"}
.column-body
:::

::: {.column-body-outset style="background-color: lightgray; margin-bottom:0.5em;"}
.column-body-outset
:::

::: {.column-page-inset style="background-color: lightgray; margin-bottom:0.5em;"}
.column-page-inset
:::

::: {.column-page style="background-color: lightgray; margin-bottom:0.5em;"}
.column-page
:::

::: {.column-screen-inset style="background-color: lightgray; margin-bottom:0.5em;"}
.column-screen-inset
:::

::: {.column-screen style="background-color: lightgray; margin-bottom:0.5em;"}
.column-screen
:::

::: {.column-body-outset-right style="background-color: lightgray; margin-bottom:0.5em;"}
.column-body-outset-right
:::

::: {.column-page-inset-right style="background-color: lightgray; margin-bottom:0.5em;"}
.column-page-inset-right
:::

::: {.column-page-right style="background-color: lightgray; margin-bottom:0.5em;"}
.column-page-right
:::

::: {.column-screen-inset-right style="background-color: lightgray; margin-bottom:0.5em;"}
.column-screen-inset-right
:::

::: {.column-screen-right style="background-color: lightgray; margin-bottom:0.5em;"}
.column-screen-right
:::

::: {.column-body-outset-left style="background-color: lightgray; margin-bottom:0.5em;"}
.column-body-outset-left
:::

::: {.column-page-inset-left style="background-color: lightgray; margin-bottom:0.5em;"}
.column-page-inset-left
:::

::: {.column-page-left style="background-color: lightgray; margin-bottom:0.5em;"}
.column-page-left
:::

::: {.column-screen-inset-left style="background-color: lightgray; margin-bottom:0.5em;"}
.column-screen-inset-left
:::

::: {.column-screen-left style="background-color: lightgray; margin-bottom:0.5em;"}
.column-screen-left
:::

::: {.column-margin style="background-color: lightgray; margin-bottom:0.5em;"}
.column-margin
:::

.column-body

.column-body-outset

.column-page-inset

.column-page

.column-screen-inset

.column-screen

.column-body-outset-right

.column-page-inset-right

.column-page-right

.column-screen-inset-right

.column-screen-right

.column-body-outset-left

.column-page-inset-left

.column-page-left

.column-screen-inset-left

.column-screen-left

.column-margin

11.7 Tabset panel

::: {.panel-tabset}
#### Sub topic 1

This is some material for topic 1.

#### Sub topic 2

This is some material for topic 2.

:::

This is some material for topic 1.

This is some material for topic 2.

More layout settings are described here and here.

12 Shortcodes

Quarto shortcodes are special Markdown directives that generate content.

The meta shortcode prints values from document metadata, including metadata inherited from _quarto.yml. Here are a few examples:

{{< meta title >}} Quarto

{{< meta description >}} This document showcases some of Quarto’s built-in capabilities and demonstrates the custom theme, styles, and usage.

The var shortcode prints values from _variables.yml, include inserts another .qmd file, and kbd renders keyboard shortcuts:

Press {{< kbd Shift-Ctrl-P >}} Press Shift-Ctrl-P

The video shortcode embeds a video.

{{< video https://www.youtube.com/watch?v=_f3latmOhew >}}

The custom Lua filter adds the following metadata values, which can be read with the built-in meta shortcode:

{{< meta quarto_version >}} 1.11.9
{{< meta current_date >}} 02-Nov-2026
{{< meta current_year >}} 2026
{{< meta current_time >}} 21:48 CET
{{< meta output-dir >}} docs
{{< meta output-dir-path >}} /home/runner/work/specky/specky/docs

The filter also exposes supported values from the website, project, and format blocks of _quarto.yml through the custom. prefix.

{{< meta custom.website.site-url >}} https://royfrancis.github.io/specky/
{{< meta custom.project.type >}} website
{{< meta custom.format.html.quarto-required >}} >=1.8.25

Shortcodes are documented here.

13 Accordions

Accordion support is provided through the accordion extension.

Accordion contents can be defined in the YAML front matter as shown below.

accordion:
  - ac-1:
    - header: "**This is a header**"
      body: "This is **bold** and *italic* text"

and then rendered in the document body using the shortcode.

{{< accordion ac-1 >}}

This is a header

This is bold and italic text

Alternatively, an accordion can be defined inline as shown below.

{{< accordion label="my-accordion" header="Click to expand" body="This is the content of the accordion." >}}

Click to expand

This is the content of the accordion.

Multiple inline items can be defined using JSON.

{{< accordion label="inline-multi" items='[
  { "header": "Inline Item 1", "body": "Content for inline item 1." },
  { "header": "Inline Item 2", "body": "Content for inline item 2." }
]' >}}

Inline Item 1

Content for inline item 1.

Inline Item 2

Content for inline item 2.

14 Leaflet maps

Leaflet maps are enabled through the leaflet extension. Add map configuration to the page’s YAML front matter or _metadata.yml, then use the {{< leaflet mapname >}} shortcode. See the extension documentation for details.

---
leaflet:
  zoom: 15
  ucl:
    markers:
      - tooltip: Venue
        icon: "fa-solid fa-briefcase"
        icon-color: "#E74856"
        lat: 51.5218
        lon: -0.1318
        popup: "Room 309<br> Roberts Building<br> University College London<br> Torrington Place<br> London WC1E 7JE<br> United Kingdom"
      - tooltip: "The Academy Hotel (0.2 km, 3 min walk)"
        icon: "fa-solid fa-bed"
        icon-color: "#0078D7"
        lat: 51.5244
        lon: -0.1328
        popup: "21 Gower Street<br> London WC1E 6HG<br> United Kingdom"
---

{{< leaflet ucl >}}

15 General tips

Use level-2 headings (##) as the highest heading level:

## Section A

Add a custom stylesheet in the YAML front matter if needed:
```
format:
  html:
    css: my-theme.css
```
See the Quarto documentation

Footnotes

That reference refers to this footnote.↩︎