Quarto Content

Details blocks support most Quarto content features, including math equations, code blocks, tables, and lists. Content renders identically inside and outside of details blocks in HTML output. Some limitations apply to non-interactive formats (see Callouts below).

Math Equations

Both display and inline math work within details blocks:

::: {.details summary="Click to see the math"}

Display math (centered):

$$
\phi + \sigma
$$

Inline math: $\phi + \sigma$

$$
E = mc^2
$$

:::
Click to see the math

Display math (centered):

\[ \phi + \sigma \]

Inline math: \(\phi + \sigma\)

\[ E = mc^2 \]

Code Blocks

Syntax-highlighted code blocks work as expected:

::: {.details summary="View the Python code"}

`​``python
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

# Calculate first 10 Fibonacci numbers
for i in range(10):
    print(fibonacci(i))
`​``

:::
View the Python code 
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

# Calculate first 10 Fibonacci numbers
for i in range(10):
    print(fibonacci(i))

Panel Tabsets (HTML only)

Quarto panel tabsets work inside details blocks in HTML output:

::: {.details summary="View examples in multiple languages"}

::: {.panel-tabset}

#### Python

```python
print("Hello, World!")
```

#### R

```r
print("Hello, World!")
```

#### JavaScript

```javascript
console.log("Hello, World!");
```

:::

:::
View examples in multiple languages 
print("Hello, World!")
print("Hello, World!")
console.log("Hello, World!");

Panel tabsets require JavaScript and only work in HTML output. In non-interactive formats, consider using separate sections instead.

Callouts (HTML only)

Quarto callouts can be nested inside details blocks in HTML output:

::: {.details summary="Important information"}

:::{.callout-warning}
This is a warning callout inside a details block.
:::

:::{.callout-tip}
You can use any callout type: note, warning, tip, caution, or important.
:::

:::
Important information

This is a warning callout inside a details block.

You can use any callout type: note, warning, tip, caution, or important.

In non-interactive formats (PDF, Word, Typst), details blocks are rendered as callouts. Since Quarto doesn’t support nested callouts, avoid placing callouts inside details blocks when targeting these formats.

Tables

Markdown tables render properly within details:

::: {.details summary="View the data table"}

| Name    | Value | Description         |
|---------|-------|---------------------|
| Alpha   | 1.0   | First parameter     |
| Beta    | 2.5   | Second parameter    |
| Gamma   | 0.8   | Third parameter     |

:::
View the data table
Name Value Description
Alpha 1.0 First parameter
Beta 2.5 Second parameter
Gamma 0.8 Third parameter

Lists

All list types work within details blocks:

View list examples

Unordered list:

  • Item one
  • Item two
    • Nested item
    • Another nested item
  • Item three

Ordered list:

  1. First step
  2. Second step
  3. Third step

Definition list:

Term 1
Definition for term 1
Term 2
Definition for term 2

Images

Images can be included in details blocks:

::: {.details summary="View the diagram"}

![Quarto logo](https://quarto.org/quarto.png){width=200}

:::

Combining Features

You can combine multiple Quarto features in a single details block:

Complete example

Here’s a formula with explanation:

\[ f(x) = \int_{-\infty}^{\infty} \hat{f}(\xi) e^{2\pi i \xi x} d\xi \]

This is the inverse Fourier transform formula, which reconstructs a function from its frequency components.

Implementation:

import numpy as np

def inverse_fourier(f_hat, x):
    """Compute inverse Fourier transform at point x."""
    return np.trapz(f_hat * np.exp(2j * np.pi * xi * x), xi)
Parameter Type Description
f_hat array Fourier coefficients
x float Evaluation point