contents shortcode not working with altair plot

[cderv]

Discussed in #12075

^{Originally posted by laguill February 13, 2025}

Description

Hello,

I am trying to rearrange the output of a chart made with altair.
As followed here https://quarto.org/docs/authoring/contents.html

The output is not displayed.
Is it only working with matplotlib ?

---
title: Rearrange altair chart content
format: html
---

## A section

Here we define a plot.

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

import altair as alt
from vega_datasets import data

source = data.iowa_electricity()
alt.Chart(source).mark_area(opacity=0.3).encode(x="year:T", y=alt.Y("net_generation:Q").stack(None), color="source:N")
```

## Another section

Here we use the plot, inside a callout:

::: callout-note

## Note the following plot

{{< contents a-cell >}}

:::

``` </div>

[cderv]

Example

---
title: Rearrange altair chart content
format: html
---

## A section

Here we define a plot.

```{python}
#| echo: true
#| label: a-cell

import altair as alt
from vega_datasets import data

source = data.movies.url

alt.Chart(source).mark_bar().encode(
    alt.X("IMDB_Rating:Q", bin=True),
    y='count()',
)
```

## Results

{{< contents a-cell >}}

No output shown only the source cell is moved

The HTML does not have the plot either

<section id="a-section" class="level2">
<h2 class="anchored" data-anchor-id="a-section">A section</h2>
<p>Here we define a plot.</p>
</section>
<section id="results" class="level2">
<h2 class="anchored" data-anchor-id="results">Results</h2>
<div id="cell-a-cell" class="cell" data-execution_count="1">
<div class="sourceCode cell-code" id="cb1"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> altair <span class="im">as</span> alt</span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a><span class="im">from</span> vega_datasets <span class="im">import</span> data</span>
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a>source <span class="op">=</span> data.movies.url</span>
<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a>alt.Chart(source).mark_bar().encode(</span>
<span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a>    alt.X(<span class="st">"IMDB_Rating:Q"</span>, <span class="bu">bin</span><span class="op">=</span><span class="va">True</span>),</span>
<span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a>    y<span class="op">=</span><span class="st">'count()'</span>,</span>
<span id="cb1-9"><a href="#cb1-9" aria-hidden="true" tabindex="-1"></a>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</div>
</section>

So not a viewer problem, but something in the Content shortcode and this type of content. (matplotlib example still works)

[cderv]

@mcanouil shared that using the div syntax works

---
title: Rearrange altair chart content
format: html
---

## A section

Here we define a plot.

::: {#b-cell}

```{python}
#| echo: true
#| label: a-cell

import altair as alt
from vega_datasets import data

source = data.movies.url

alt.Chart(source).mark_bar().encode(
    alt.X("IMDB_Rating:Q", bin=True),
    y='count()',
)
```

:::

## Results

{{< contents b-cell >}}

So this has to do with specific output and the label not applying to it.

Issue to fix or documentation about how to use this shortcode for complex code output (like those altair chart ? ) 🤔

[mcanouil]

For reference as it might be the exact same root cause:

• Contents shortcode does not work on code-cell div with knitr #12065