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 character sizes. This is an enhanced feature.

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

Line block preserves spaces and new lines.

| 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 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-sm} button
[button]{.btn} button
[button]{.btn .btn-lg} button

Links inside buttons

[[link](url)]{.btn} link
[[link](url)]{.btn .btn-primary} link
[[link](url)]{.btn .btn-secondary} link
[[link](url)]{.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](url)]{.badge .badge-primary} link
[[link](url)]{.badge .badge-secondary} link
[[link](url)]{.badge .badge-tertiary} link

2 Code formatting

Verbatim code is text formatted using monospaced font intended as code. Verbatim code can be defined inline where `date()` looks like date().

Code can also be defined inside code blocks.

```
date()
```

date()

Source code, ie; code that is highlighted or executed in a quarto document is not covered here.

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 has many many bult-in classes of it’s own. 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 plain markdown or HTML directly. Plain markdown can be embellished with custom quarto adjustments to modify aspects of the image. Clicking the image opens the image in a lightbox. This is made possible using the lightbox extension.

5.1 Using Markdown

Using regular markdown.

![](assets/image.webp)

The dimensions are based on image and/or fill up the entire available space. You can control the dimension as shown below.

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

This image above is now 30% of it’s original width.

5.1.1 Figure layout

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

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

These figures are interesting.
:::

More figure options and layouts are described here. Cross referencing 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

This image below is 30% size.
<img src="assets/image.webp" style="width:30%;"/>

For more information on figures, see here. Images generated through code is 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{eqnarray} X & \sim & \mathrm{N}(0,1)\\ Y & \sim & \chi^2_{n-p}\\ R & \equiv & X/Y \sim t_{n-p} \end{eqnarray}$

\(\begin{eqnarray} X & \sim & \mathrm{N}(0,1)\\ Y & \sim & \chi^2_{n-p}\\ R & \equiv & X/Y \sim t_{n-p} \end{eqnarray}\)

$\begin{eqnarray} P(|X-\mu| > k) & = & P(|X-\mu|^2 > k^2)\\ & \leq & \frac{\mathbb{E}\left[|X-\mu|^2\right]}{k^2}\\ & \leq & \frac{\mathrm{Var}[X]}{k^2} \end{eqnarray}$

\(\begin{eqnarray} P(|X-\mu| > k) & = & P(|X-\mu|^2 > k^2)\\ & \leq & \frac{\mathbb{E}\left[|X-\mu|^2\right]}{k^2}\\ & \leq & \frac{\mathrm{Var}[X]}{k^2} \end{eqnarray}\)

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 caption and numbering can be added as such:

|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

More information about tables.

7.1.1 Cross referencing

Images and tables can be automatically numbered by using label attribute. Image label must start with fig- and tables with tbl-. Tables and images can also be cross-referenced when using the label attribute. For example, the table above can be referenced like @tbl-mylabel which renders as Table 1.

8 Icons

8.1 Bootstrap icons

Bootstrap icons are directly available since quarto uses bootstrap for styling. Optionally, one could also use the quarto extension bsicons for more control.









8.2 Fontawesome

To use fontawesome icons as shortcodes, quarto extension fontawesome needs to be installed.

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 full list of icons check out FontAwesome.

9 Call-Outs

Call-Out blocks are explained here.

::: {.callout-note}
This is a call-out.
:::

::: {.callout-warning}
This is a call-out.
:::

::: {.callout-important}
This is a call-out.
:::

::: {.callout-tip}
This is a call-out.
:::

::: {.callout-caution}
This is a call-out.
:::

::: {.callout-tip collapse="true"}
## Call-out with collapse

This content is behind an accordion.
:::

Note

This is a call-out.

Warning

This is a call-out.

Important

This is a call-out.

Tip

This is a call-out.

Caution

This is a call-out.

Call-out with collapse

This content is behind an accordion.

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

This is a call-out.

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

This is a call-out.

10 Alerts

This is not a quarto feature, but rather from bootstrap.

::: {.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 is left.
:::
::: {.column style="background-color:  #f5b7b1"}
Content is right.
:::
::::

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 Panel layout

::: {.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

Shortcodes are sort of like quarto functions.

Two important shortcodes are meta and var. meta allows to read metadata from the yaml block in the current page or from _quarto.yml. Here are a few examples:

{{< meta title >}} Quarto

{{< meta description >}} This document showcases some of the in-built capabilities of quarto. It also shows the custom theme, style and usage.

Similarly, var allows to read variables from _variables.yml if it has been defined. The include shortcode allows to add a child qmd document into a specific position in a qmd file. The kbd shortcode allows keyboard notations:

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

The video shortcode allows to embed a video.

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

Some of the custom shortcodes added with this template are:

{{< meta quarto_version >}} 1.10.18
{{< meta current_date >}} 05-09-2026
{{< meta current_year >}} 2026
{{< meta current_time >}} 22:45:12
{{< meta output-dir >}} docs
{{< meta output-dir-path >}} /home/runner/work/abstrave/abstrave/docs

Additional functionality was added to read website, project and format blocks from _quarto.yml under the custom metadata key.

{{< meta custom.website.site-url >}} https://royfrancis.github.io/abstrave/
{{< 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 header as shown below.

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

and then called in the 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 are 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. Leaflet maps are documented here. Add map information to yaml matter or _metadata.yml and use the shortcode .

---
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 heading as the highest level

## Section A

Add custom css under YAML if needed css: "my-theme.css"
Check out the Quarto website

Footnotes

That reference refers to this footnote.↩︎