output-location with html

[Walser52]

Description

Quarto's documentation for presentation shows there is an output-location option for revealjs. Is there a similar option for html output? I have a website with python code and I would like plots to be rendered side by side.

I can try to store the result in a variable and then use a two column setup with the code in column A, and {python} result in column B.

Is there a cleaner way?

[cderv]

output-location is only available for revealjs format today. This could be an interesting feature request to make this work for other outputs. 🤔

I guess it would be leveraging block layout: https://quarto.org/docs/authoring/figures.html#block-layout

With latest Quarto 1.6 pre-release, we added a feature to reuse code cell output. So you could now to that manually. See pre-release doc: https://prerelease.quarto.org/docs/authoring/contents.html

Something like

---
title: Layout plot / code
format: html
---

## A section

:::: {layout="[ 40, 60 ]"}

::: {#first-column}

Here we define a plot.

```{python}
#| label: a-cell
import matplotlib.pyplot as plt
plt.plot([1,2,3])
```

:::

::: {#second-column}

See the plot

{{< contents a-cell >}}

:::

::::

However, it seems we have an issue with Python cell and layout - we put the code cell outside always !

---
title: Layout plot / code
format: html
---

## A section

:::: {layout="[ 40, 60 ]"}

::: {#first-column}

Here we define a plot.

```{python}
#| label: a-cell
import matplotlib.pyplot as plt
plt.plot([1,2,3])
```

:::

::: {#second-column}

Comment

:::

::::

This is surprising to me - but I remember a discussion about this somewhere. I'll find it.

@cscheid would you have expected this to be a good usage of contents shortcode ?

[mcanouil]

FYI, there is a Quarto extension for something similar but as panel: https://github.com/coatless-quarto/panelize

• How can I use a pre-render approach with a Lua document filter? #9646 (reply in thread)

[cderv]

This is surprising to me - but I remember a discussion about this somewhere. I'll find it.

And here it is :

• Code cells of different languages are wrongly merged when inside a layout #8179

I think I am as surprised by this behavior now as I was back then. It feels really not expected to me that code cells is move out of a column when the Markdown syntax really express it to have the code cell in first column. Anyhow, not the place to discuss.

Regarding my proposal, it does not work as I think it was. Even using .columns does not help because code cell and output are moved together.

---
title: Layout plot / code
format: html
---

## A section

:::: {.columns}

::: {.column width=40%}

Here we define a plot.

```{python}
#| label: a-cell
import matplotlib.pyplot as plt
plt.plot([1,2,3])
```

:::

::: {.column width=60%}

See the plot

{{< contents a-cell >}}

:::

::::

To make it works with column, we would need the output only to be inserted inside a div with a label we can refer.

I'll post a working work around in another post below

[mcanouil]

I edited to add the comment from Carlos that initiated the extension (Lua filter)

• How can I use a pre-render approach with a Lua document filter? #9646 (reply in thread)

[cderv]

possible workaround - just sharing for reference

Duplicating the code cell and have one evaluate while the other no would make this possible. Not ideal.
Maybe an extension like panelize would make this easier to use.

---
title: Layout plot / code
format: html
---

## A section

:::: {.columns}

::: {.column width=40%}

Here we define a plot.

```{python}
#| eval: false
import matplotlib.pyplot as plt
plt.plot([1,2,3])
```

:::

::: {.column width=60%}

See the plot

```{python}
#| echo: false
#| label: a-cell
import matplotlib.pyplot as plt
plt.plot([1,2,3])
```


:::

::::

[cderv]

For completeness, we are limited by Jupyter engine here. knitr does have mecanism to reuse code cell easily

---
title: Layout plot / code
format: html
---

## A section

:::: {.columns}

::: {.column width=40%}

Here we define a plot.

```{r}
#| eval: false
#| label: a-cell
plot(cars)
```

:::

::: {.column width=60%}

See the plot

```{r}
#| echo: false
#| label: a-cell
```


:::

::::