RevealJS - How do I show a code echo and outputs in multiple fragments within a layout?

[rchaput]

Description

Hello,

I'm trying to achieve a somewhat complex layout in a RevealJS slide with executable code blocks (both the code echo and the output) and fragments, and it appears in a very strange and (at least in my opinion) non-intuitive way.

The layout I'd like to achieve is roughly this:

A list on the left side (first to appear on the slide)	Some text and the code block (fragment, second to appear)
The list, continued (also first to appear)	The code block output (fragment, third to appear)

Here is the MWE I tried to come up with:

---
title: Test code fragments in Revealjs
format: revealjs
---

## Slide 1

:::: {layout="[50, 50]"}
::: {}
- A list of items
- That should appear on the left side
:::

::: {.fragment}
A code fragment that should appear on the right side

```{python}
#| echo: true
#| output: fragment
print("Hello from Python")
```
:::
::::

But this is the result I get:

Notice how the code block appears even before the 50/50 layout. It does not appear in a fragment as well (that is, it appears at the same time as the list).
The text "A code fragment that should appear on the right side" correctly appears as a fragment, and at the correct place.
But the output "Hello from Python" appears at the same time as this text instead of as a separate fragment.

I guess I have misunderstood something in how Quarto processes fragments, layouts and/or executable code blocks.
(Note that I tried echo: fragment but it does not work, because only true and false are valid)
Do you know how to achieve this? Thanks!

[mcanouil]

What's output: fragment? This isn't a Quarto option, thus why the code output is not a fragment.

See:

• https://quarto.org/docs/reference/formats/presentations/revealjs.html#slide-content

Regarding the "echo" part, I need to check the reason the code appears above divs in the case of layout.
Note that trying random options are very unlikely to give you anything. You should refer to the documentation to look for what's available as it will save you quite some time.

edit: workaround / alternative approach using .columns/.column and valid/correct options

---
title: Test code fragments in Revealjs
format: revealjs
---

## Slide 1

::: {.columns}

::: {.column}
- A list of items
- That should appear on the left side
:::

::: {.column .fragment}
A code fragment that should appear on the right side

```{python}
#| echo: true
#| output-location: fragment
print("Hello from Python")
```

:::

:::

[rchaput]

Indeed, I mis-remembered output-location and wrote output instead, thus it could not work...

It is still strange that the code appears above when using layout, but at least I can confirm it works using your suggested columns/column solution! Many thanks!

[mcanouil]

I've opened an issue as I think the layout scaffolding has actually a bug which leads to the issue.

• Code echo is hoisted out of a layout div when the cell is nested inside another div #14841